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. 


 

 

UX SPRINT-DETAIL

 

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

Create user story

 

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

Create user flows

 

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

Site Map

 

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

Prototype sketch

 

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

Digital Prototype

 

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

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

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://www.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@bonanza.design

 

Next Stories

PRACTICAL TIPS FOR REMOTE USABILITY TESTING

  PART A – BEFORE TESTING   1) Research your testing platform and make sure it fits your needs When I conducted my first usability testing on Skype, I sadly realized that once the participant shared their screen on their mobile device, the front-facing camera was automatically disabled. Not being able to observe the user’s

Read More

DESIGN THINKING: HOW TO IDEATE SOLUTIONS EFFECTIVELY?

Written by Nora Schmidhofer who participated in the workshop with added notes from Behrad   In Behrad’s Design Thinking workshop “How to ideate solutions effectively?” We learn a systematic and effective approach to come up with potential ideas to a challenge and evolve them into a solution. The challenge of the workshop on 24-09-2020 was

Read More