For designers, one of the most important things to understand is that design is only one step in the product development process.
It doesn’t matter how pixel-perfect your layouts are. If you can’t empathize and communicate your vision to developers and QA engineers, the pixels won’t come to life like you wanted.
This checklist, our definition of done at Nordnet Design Studio, helps everybody in the process of crafting the customer experience. It ensures that the design meets our collective seal of approval.
We believe that design is a team sport. Everyone should feel ownership of the entire customer experience, not just their piece. Our aspiration is that this checklist will bring us closer to that notion.
“Design is only one step in the product development process.”
Image from Inside Design: Meerkat.
Our definition of done
Quality
1. Are you proud of the design?
If you’re not proud of the design, there’s something fundamentally wrong. This is because you’re not bought into the idea. You don’t feel ownership of the solution.
How can you address this? Get more involved, and challenge the idea and the assumptions. The more you learn about the problem you’re solving, the more passionate you’ll feel about the solution.
“If you’re not proud of the design, there’s something fundamentally wrong.”
2. Is the design adhering to our principles of fast, frictionless, and flexible?
We’ve written a set of principles that we use in design. These principles keep us in check and deter us from steering in the wrong direction. Most importantly, the principles are grounded in customer insight.
Learn more: Design Principles FTW.
Image from Inside Design: Prezi.
Insight
3. Have you designed based on the most important job stories?
At Nordnet, we use Jobs-To-Be-Done as a framework when interviewing customers, and we use job stories when writing requirements.
“With an understanding of the ‘job’ for which customers find themselves ‘hiring’ a product or service, companies can more accurately develop and market products well-tailored to what customers are already trying to do.”
–Clayton Christensen Institute
Using this framework is a way for us to focus on the problem we’re solving, and the outcome our customers expect when using our products, rather than specific solutions.
Learn more:
4. Have you sense-checked the design based on our personas?
We use 2 personas in our design work. They’re one-pagers that describe our archetype customers. Typically, personas have specific sections that explain motivations, drivers, and demographic data. Our personas are story-based. They tell a short narrative about the persona’s life. We find this format engaging and relatable.
Image from Brooklyn United’s Design Agency Glossary.
In our design work, we can use these personas as a test, ensuring that what we craft is relevant to our customers.
5. Have you tested the design on real customers?
This should be a given. If you don’t test on real customers, how do you know if you’re right? We strive to recruit users every Friday to test our latest prototypes. We recommend making this into a habit.
“Make it a habit to test your product on real customers.”
6. Does the design work properly on mobile? Are UI elements big enough?
This can be an oversight when you’re creating responsive designs. When you’re designing the mobile scenarios, use the medium and test all the interactions.
“The details are not the details; they make the product.”
–Charles and Ray Eames
Hierarchy
7. Are the most important elements at the top of the page?
Customers hunt for information when they come to a page. If they don’t find what’s most important, they may leave.
Based on the Jobs-To-Be-Done research, write a short list of what’s most important to customers. Use that list when constructing the layout.
8. Have you defined breakpoints for mobile, tablet, and desktop?
This can be an afterthought when you design fast. Take the time to define the responsiveness of the layout.
Consistency
9. Is the design using elements from our UI kit? If you’ve created new elements, have they been discussed with the team?
We use a UI kit, a Sketch file, that contains major UI elements such as form fields, buttons, tabs, etc. It was created for consistency purposes. To prevent “reinventing the wheel,” be vigilant about introducing new elements.
Content
10. Does the design meet our accessibility guidelines?
Have you reviewed the guidelines and answered, for example, the following questions: Are there meaningful page titles? Have you tested the color contrasts? Is there sufficient help content?
11. Have you discussed with a developer or a requirement analyst that we can supply all the data that is featured in the design?
An important step in reaching a more detailed design is to continuously meet with developers and requirement analysts who will ultimately bring the design to life. They understand all the underlying systems, the data, and the necessary logic.
12. Have you thought about potential corner cases, edge cases, empty states, and error states?
This relates to point 11. Have we done our due diligence in understanding all the potential circumstances that can happen in the interface? What are the errors that customers could experience? What happens if a customer signs up for the first time—will there be help content to assist? Are there potential edge cases, where the customer, for instance, interacts with a button too many times?
13. Has the copy been written by, or validated by, a copywriter?
Copy is a vital part of the customer experience. During design sprints, we might not have a copywriter available to help us write interface texts. Commonly, we might write placeholders. To reach a more polished state, a copywriter needs to review the texts and understand all scenarios where we communicate with a customer.
The handoff
14. Have you published your designs? Are the images and icons made exportable?
In the Nordnet Design Studio, we publish our designs in a digestible format for developers so they can clearly see the font size, dimensions, spacing, and color palette.
Using this 14-point list won’t only make you a better designer—developers, QA engineers, and your customers will all thank you for your attention to detail.
This post was originally published on Medium.
Marcus Castenfors leads the Product Design team at Nordnet, a modern bank that focuses on transparency and innovation. Before joining Nordnet, he was the Swedish creative lead at SapientNitro where he worked with clients such as Volvo Group, TUI Group, and Scandic Hotels.
