UI/UX Case Study: WinSalvo

David Alagoa
Aug 12, 2019 · 6 min read

Introduction

We were commissioned by one of our clients to develop and implement a product named WinSalvo, a competition platform that allows customers to win prizes. This UI/UX case study focuses on the design of the entire digital platform: mobile apps for both Android and iOS, mobile and desktop website, and a back-end administrative dashboard. The clients were kind enough to provide us with a well-detailed requirement and specification document, that laid the foundation for the project.

The Challenge

With the increasing popularity of online gaming and prize-winning platforms in Nigeria, the clients thought it would be as easy as snatching an iPad from a teen. However, we realized it would take a bit more finesse to stand out from the competition. Winsalvo provides an opportunity for people who love participating in prize-winning competitions to do so anywhere, anytime. This forced us to create a seamless and engaging experience.

Research Methods

1. Personas

Thanks to the client’s thoughtful presentation of their requirements and some discussions, we extensively dove into the type of customers WinSalvo attracts. The app appeals to two major demographics; students between 18–25 and working-class adults between 25–40. We created two personas, Tunde and Ijeoma, gave them backstories, and imagined their interaction within the WinSalvo platform.

Persona for Tunde, 21, student
Persona for Ijeoma, 32, banker

2. User Journey

Next, we created a script of the personas’ typical behaviour with respect to the product. Giving us an understanding of the user experience and allowing us to empathize with their emotions. The figure below shows the user journey for core features of the app.

Customer Journey based on created personas

3. Customer Flowchart

Understanding the user journey and app requirements gave us an idea of what the app flow would look like. We created a basic flowchart following the customer from the landing pages, to competition entry, and finally payments

Customer Flowchart following user’s journey

4. Sketches & Wireframes

The next stage was sketching low fidelity screens of the app. After a few iterations, we transitioned to basic medium fidelity wireframes. The sketches are shown below.

Sketches for the Competition flow and screen
Initial wireframes of the customer profile screens

5. Iteration

We made a couple of iterations to the design, experimenting with different styles and colour schemes.

The client preferred the designs with the blue background so we explored a bit further. Our idea was for a simplified version of the ones created earlier so we came up with another iterated version of the app.

Initial design iteration
Second design iteration

One of the app’s key features was the raffle number selection where customers pick their lucky numbers. Each number has a cost, so a customer can purchase as many as they want, knowing that they will pay for each number. We came up with a couple of iterations for this interaction, taking into account the usability, functionality, and screen size.

Design iterations for raffle number screens

6. Colour Palette & Typography

We applied the colours from the client’s logo in our colour palette. We deliberated on having a vibrant yet pleasant feel to the app so we created shades of the logo’s primary colour to show contrast. The colour palette is shown below.

Colour palette used for the user interface

For the typography, we used Circular which is a geometric Sans Serif typeface created by Swiss designer, Laurenz Brunner. We opted for simplicity and variation so the entire font family was implemented. The typography set is shown below.

Typography for the user interface

7. Iconography

The illustrations and icons are an important part of the design. They communicate ideas and concepts that should not and sometimes cannot be communicated with words. Furthermore, they allow consistency of the visual aesthetics that help build the users’ trust and produce moments of delight.

Icon set for user interface

8. Final Designs

Onboarding Flow

The aim of the onboarding flow in WinSalvo is to give a brief description of how the app works and collect necessary information from new users. We made this process simple enough for users to easily sign up to the platform.

Onboarding Screens for WinSalvo

Competition Selection and Entry

This is the core feature of the app. After the onboarding process, the users should be able to see available competitions to participate in. We made the steps to preview and enter competitions as short as possible.

Competition Menu and Details screens

Entry Quiz and Lucky Number Selection

After users enter their competition of choice, they are required to answer a multiple choice quiz and if they select the right answer, they can proceed to select their lucky numbers. Each number is attached to a price tag so the more numbers they select, the higher they pay and their chances of winning. Users will not be able to select numbers that have been previously selected by them or previous users.

Entry Quiz and Lucky Number Selection screens

Payment Process

The lucky numbers selected add up to a total amount to be paid. After confirmation, the user is taken to the payment method page and is required to provide either their card or bank details to make payment. Confirmation of successful payment is displayed after this.

Payment Process and Success screens

9. Conclusion

What did we learn?

The entire process of ideation and design of the app was an interesting challenge for us. From understanding how user personas play a role in the user experience and interaction, to making sure the UI elements were consistent throughout the app, we were able to appreciate the need for proper research and design systems. Also, we learnt to explore how prize-winning apps such as WinSalvo have to offer more incentives in order to stand out from their counterparts.

Future Recommendations

  • A more detailed research into user behaviour
  • Prototype testing with different users to collect feedback and note pain points to improve the app’s experience.

SiriusLabs

Musings, thoughts and process of how we achieve things at…