fbpx
SUBSCRIBE

STAY IN TOUCH WITH THE LATEST TRENDS IN DESIGN

UX Design Sprint: Design Pixel Perfect Digital Products in Three Weeks

Welcome to UX SPRINT!
 
Before we elaborate on our UX SPRINT process, you want to read the article on our DESIGN SPRINT first. Why is that?
 
During the UX SPRINT, we develop an idea into an application and design it in pixel. Before the UX SPRINT, we hold a DESIGN SPRINT to define and validate ideas with the market. By validation, we want to make sure that if the product was developed, it’d address the needs of a group of people i.e. it would be usable. In other words, the input of UX SPRINT is a solution to a problem validated with a market that addresses the needs of a group of people.
 
In case you’re wondering how we confirm a solution, we have our own process which we call it DESIGN SPRINT. It’s a 4-WEEK sprint by which we first define and validate the initial idea with the market. Then develop the idea into the solution and test it with users in 4 weeks. In this article, we went in-depth breaking down our 4-WEEK DESIGN SPRINT process.
 
UX SPRINT is a 3-WEEK process that the first week is about defining & scoping and the second and third weeks are about detail designing the product.
 

WEEK 1

DEFINE & SCOPE

Through DESIGN SPRINT, we validate the most pressing use case of the product without which it cannot exist. A use case is an experience perceived by users. For example, for a product that allows small business owners to manage their customer bookings effectively. The act of booking is essential. Every other use case (i.e. feature) may be complementary to the core use case.
 
Thanks to DESIGN SPRINT, we know the core experience that we have to deliver through our product. But, we cannot go ahead and code it because we only validated the impact of the experience. To develop the product, we need to define the user flow and that’s the first thing we need to do during the UX SPRINT.
 
– Create the User Flow
 
Create User Flow
 
 
As the first step to our UX SPRINT, we breakdown the user flow to make sure that all the edge cases, about how users interact with the product, are included. A user flow maps out the user’s actions as she interacts with the product and accomplishes her goal. Then it breaks down the pages, actions, system automation, and external assets needed to develop the product. A user flow goes in detail to surface all the edge cases. For example, what happens if the customer doesn’t show up to the appointment or if the user lost their password.
 
– Define the Use Cases and Feature List
 
When we define the user flow and acquire a clear understanding of it, then we can break down the feature list needed to launch the product. The future list must include all the desired functionalities at this point. We’ll do the prioritization of the future at a later stage.
 
You may ask why don’t we do the prioritization now?
 
Right now, we’re going through the divergent phase of the design process and we don’t want to limit ourselves. We do the scoping at the end when we have the wireframes ready. At that point, we’re mentally and visually better equipped to do the feature prioritization.
 
 
Define use case
 
– Wireframing
 
wireframe
 
Knowing the future list and user flow allows us to break down the screens needed for the interface. Then we wireframe each screen in detail. At this point, we won’t try to design it in perfect pixel. Just on the wireframe level so we can analyze the screens visually.
 
This is a critical step and we usually take our time to analyze the wireframes. This is to make sure all the use cases are addressed and there are screens for all the edge cases. A close evaluation at this point allows us to address possible design issues when it comes to the layout design and interface elements.
 
At this stage, we’d conduct a semi-usability test with people in our network to make sure the wireframes have been exposed to as many eyes as possible.
 
– Scoping and defining the Minimum Viable Product (MVP)
 
mvp
 
After having the final version of the wireframes, we’d revisit the use cases and prioritize them. By which we’d park certain functionalities for later versions of the product and finalize the scope for the MVP.
 

WEEK 2

Design System & Interaction Design

 
Having the wireframes and scope finalized in week 1. The rest of the UX Sprint would be about creating the Design System and designing the Interaction Design and Interface of the product.
 
– Create a Design System
 
design system
 
Before we begin to design the interface, we create the design system. The design System includes all the elements needed to design the interface. Such as colors, font styles, buttons, forms, menus, a navigation system, layout structure, etc.
 
Creating the Design System at this stage allows the dev team to begin coding the user interface elements of the product. While we buy ourselves time to finish the design of the interface.
 
– Interaction Design
 
Interaction design
 
We love interaction design. Interaction design gives the interface its unique character. It’s all about how elements react to different inputs such as click, hover, etc.
 
By the end of week 2, we finish the design system and interaction design. By which the dev team can start doing the groundwork and get ready to code the app in detail.
 

WEEK 3

Interface Design & Usability testing

Week 3 is exclusively allocated to Interface Design. This is when we paint the wireframe and decorate it with the elements from the Design System.
 
We Design all the wireframes in detail and then aim to hold a usability test to assess the performance of the most crucial parts of the interface no later than Wednesday.
 
Based on the results of the test, then we’d complete the design of the interface by the end of the week.
 
Here’s our UX Sprint process by which we design an application in detail. I hope you find this article insightful. In case you’d like to share your feedback or have questions, please contact us at contact@bonanza.design