BACK TO BLOG

CASE STUDY: DESIGN PIXEL PERFECT APPLICATIONS IN 3 WEEKS

We started working with a newly founded startup called Qtaq from Canada. They’re developing a SaaS application for the global leasing market. 

Through a tight 3-week sprint we designed their MVP. We’re excited about this collaboration because we can get to work with a team at such an early stage and help them on multiple fronts. 

We started with their applications and soon we’ll work on their branding, marketing, and website design. 

We follow our exclusive 3-WEEK process which more or less, has 12 steps. This is an interactive process through which 3 designers work on the designs. 

When we design MVPs, we focus on delivering a whole experience rather than a feature or functionality. An MVP mindset often leads to sacrificing experience to fill in the sprint pipeline with feasible to-dos.

To the point that we don’t use the term ???????????? (Minimum Viable Product) anymore. It’s a tricky term and leads to creating mediocre works. We use the term MLE (???????????????????????????? ???????????????????????????? ????????????????????????????????????????) instead. 

Before we walk you through the case study, it’s necessary that you have an understanding of our 3-WEEK UX Design Process. 

First week 

All about creating user stories, user flows, wireframing and scoping

Second week

All about creating a design system and designing the interface

Third week

All about finalizing the designs of the interface and conducting usability testings

To go through this 3-WEEK process, we follow more or less 12 steps. Let’s go through each.

STEP 1

CREATE USER STORIES FOR EACH PERSONA

A user story is a perfect way to distill the user’s need for a persona and express it in a way that everyone can understand it. One of the most common formats of creating a user story is

As a user……., I’d like to achieve this…….

For example, as a Healer, I’d like to access to the rare ingredients from the Amazon rainforest

STEP 2

CREATE USER FLOWS FOR EACH USER STORY

A user story wraps around a user’s need in a story. A user flow translates the user story into a simple language of programming. It breaks down all the CTAs, logics, backend automation, pages, and external assets you need to actualize the user story

STEP 3

CREATE AN APP SITEMAP BASED ON USER FLOWS

Reverse engineer the app sitemap based on the final user flows. Map out all the pages needed both functional and informational pages

STEP 4

PROTOTYPE EACH PAGE ON A PAPER

Before you fire up your interface software (sketch, Figma, or Adobe XD), spend a day prototyping on (eco)paper. It helps you a lot to hash out the details. And you’re faster on paper than software.

STEP 5

SCOPING AND DEFINING MINIMUM LOVEABLE EXPERIENCE

Often one’s prototypes don’t translate fully into an app. Then you need to create a roadmap that breaks down the gradual implementation of the design.

Some call it Minimum Viable Product (MVP) but we like to call it Minimum Lovable Experience (MLE).

Product managers’ concern with shipping fast sometimes gets in the way of delivering a great experience.

We’ve experienced first-hand how such great experiences were broken into sub-features and got lost in the process of ticketing at the end of the day.

That’s why we renamed MVP to MLE to emphasize the user experience rather than defining a feasible set of features for a sprint.

This mindset shift also helps to elevate team morale. Everyone is more willing to go the extra mile to deliver the MLE than MVP because they’re contributing to a cohesive experience rather than functionality.

STEP 6

PROTOTYPE EACH PAGE DIGITALLY

It’s now the perfect time to transform all your paper prototypes to a digital one and link pages to each other. We’d like to call these prototypes as mid-fidelity prototypes.

STEP 7

CONDUCT AN INTERNAL USABILITY TEST AND FINALIZE THE WIREFRAMES

When you’re done with the mid-fidelity prototypes, conduct a round of internal usability tests with your colleagues. Expose the designs to as many eyes and improve the designs before the real usability tests with real users.

STEP 8

CREATE A DESIGN SYSTEM

When you improve the prototypes, it’s time to design them in perfect pixels. but before, create your design system. This is especially vital if you’re working on a complex product.

STEP 9

THEN DESIGN EACH WIREFRAME IN PERFECT PIXELS USING THE DESIGN SYSTEM

STEP 10

THEN CONDUCT A THOROUGH USABILITY TEST WITH USERS

Only expose the high-fidelity designs to the users and make sure the prototype looks as real as possible.

Try to at least test the prototype with 5 users if it’s a brand new product. If it’s a product with thousands of users, you want to at least conduct several batches of interviews (each batch – 5 interviews) depending on your capacity and budget.

STEP 11

STUDY THE RESULTS AND IMPROVE THE INTERFACE

If the designs pass the usability test, it’s time to prepare the assets for the production. If it didn’t, then you need to revisit your prototypes and improve the user flows and layout. Then you have to conduct another round of usability tests.

The results of the user test shall be overwhelmingly positive otherwise that’s not a strong signal to move forward.

STEP 12

FINALIZE THE SCREENS AND HAND THEM OVER TO THE DEV TEAM

When you’re creating the assets for the dev team, be prepared to receive detailed feedback on the interface. You will probably have to create a lot of more screens covering the edge cases that only a developer could think of. At this point, using a design system will save you a lot of time.

Take a look at the final designs here: https://v2.bonanza.design/projects/qtaq-ux-design-saas-application-automative/

Thank you for reading this article. We’d love to hear about your feedback. Please write to us at contact@v2.bonanza.design