UI/UX Case Study: WinSalvo
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
