Flash
Data-lead redesign of a Montenegrin start-up's MVP
Scope
Complete mobile app redesign
Heuristic evaluation & Analysis of User Pain Points;
Maps: Concept Map, Mind Map;
Wireframe (low-fi);
UI & foundations of future design system;
Prototype
Timeline
February 2023 – March 2023
Tools
Ai, Ps
Figma
Jamboard
Milanote
Team
Milica Gazivoda
CEO, Co-Founder, Software Engineer
Natasa Popivoda
COO, Co-Founder, Software Engineer
Summary
Flash is a digital wallet app, the first in the Montenegro / Balkan region with Montenegrin founders. They make NFC and QR code payments possible, as well as bank transfers. Both sending and requesting payments are possible through the app, as are recurring payments and discounts available at partner stores in the country. All other available apps in this region are those of financial institutes, which is why Flash is in a good market position to fill in the gaps, like cross-bank payments from a single app.
Problem Statement
Flash needed its MVP app redesigned, to align more with its users’ needs. After their initial MVP app design was finished, unmoderated qualitative research has been conducted to detect usability issues. Many pain points were revealed by users finishing 10 short tasks and adding their general comments and a score of the task difficulty.
Pain Points
Intuitiveness & Previous Knowledge
Users weren’t familiar with the different types of transfers the app offers. After onboarding and arriving at the home screen, it wasn’t obvious to them at the first sight what the app does and what can they use it for.
UX writing & Previous Knowledge
Users weren’t familiar with the term NFC payment. This lead to the conclusion that UX writing has to be changed according to familiarity of the users.
Onboarding
The onboarding process included too many steps and asked for partially unnecessary information, that could be eliminated from the process.
Feedback & Information
At finishing some flows, feedback or confirmation of the success of the flow was missing. In another task, some users had difficulties finding information on the discount program the app offers.
Users and Audience
Users of the app were defined by first creating a user persona. To make this hypothetical user group more accurate, demographic data of concurrent mobile apps were filtered into the creation of this user persona, while we kept specifics of the Montenegrin market in mind.
Design Process
Analysis of Accessibility and Usability Standards of the initial MVP & Usability research data
In this phase, we were aiming to detect usability issues. The Heuristic Evaluation of the app design detected a number of potential usability issues. Partially, these hypotheses were proven right by the results of the unmoderated user testing that took place after the initial app design was created. The problems that were detected and approved by the previous testing, were handled as pain points we needed to solve with the redesign.
Spreads of Analysis Results
First maps
Redesigning user flows, creating maps of IA & navigation
Following the markup of the analysis conducted in the first step, user flows were created to detect the functionalities that users will need to have available in the app interface. After the user flows were written down, concept maps and mind maps were drawn to outline an Information Architecture and Navigation concept for the app. These were reiterated until the main navigation was created, which was basically all shown in 1 wireframe of the Home page.
The idea behind the new navigation was to have a link to all primary functions of the app, which are all transfer sorts (sending transfer by NFC, QR code or phone number/contact number, requesting transfer by NFC, phone number/contact number, pay online by reading a QR code). Additionally, from the Home page, any other sections of the app had to be available through a link, which is why the navigation bar was added with the 4 sections of the app: Home (all transfer types), History of Transfers, Discounts (the benefits users receive by using the app), Profile (incl. Settings).
Creating wireframes
Wireframes were drawn on paper first. Later on, some of the screens were re-drawn in Figma in higher fidelity, but still very rustic, to avoid jumping into UI conclusions. At this point we focused on component designs with flows in mind and were following a top-down approach.
The 4 sections of the app were drawn as wireframes to include all screens the main navigational flows would demand. Then the screens of the payment flows were added, all starting from the Home screen, to show the purpose of the app clearly to any new user that lands here after the onboarding steps. From here, there were only a few screens needed that had a bridging role between steps a user would take during any flow. Screens of feedback were only added in the UI phase.
Wireframes
Creating the new user interface and foundations of a future design system
The new visual interface of the app had to be one that builds on the existing app (law of familiarity) and includes Accessibility guidelines, all while respecting the Brand guidelines too. The briefing of the customers was concise: not to include any illustrations and needless visuals, to keep a serious visual brand language. Brand keywords were: serious, trustworthy, clear. The brand colors were guiding the process of choosing shades for the app components and screens. The current interface has a light-theme, but the color shades are already defined for the creation of a dark-theme as well.
Brand materials
Mobile app prototype
The prototype was created for 15 flows to present a full picture of all app functionalities. It’s been reviewed by the developers and it’s prepared to be used for testing purposes.
The payment flows were made more intuitive due to the overlay actions. Users don’t need to leave the home screen anymore to go through a number of screens to make payments. Instead, there is an overlay dedicated to each step of the transaction flow, and ensuring of the outcome with feedback. This is a scalable yet efficient way to simplify and automatize the steps a user has to take to fulfil a task.
Outcomes and Conclusions
This project is still in the pre-testing phase and the real outcome of the redesign will be more visible through its results. Nevertheless, we hope that the new app design has made an impact on the usability of the MVP. We will focus in our testing on the following areas to detect measurable impact:
UX writing
Some buttons had confusing or difficult-to-understand labels, e.g. “Send NFC”. Users from our target group had difficulties understanding this because some of them didn’t know what NFC was.
Question
Are the new labels easy to understand for first-time users?
Accessibility
We aimed to improve: Color contrasts • Touch areas of Buttons • Form Labels • Placeholders • Help text and Instructions • Typography (font sizes and spacing).
Question
Is the new UI following accessibility standards?
Navigation
The navigation of primary and secondary functions of the application, as well as Cross-section navigation were in focus when the redesign was created.
Question
Is the new Navigation intuitive for our users?
Method
Qualitative testing combined with a short interview. Users will also rate the difficulty of each task.
UI & design system*
The new design system was built on company brand guidelines, and while it kept some elements of the previous UI, most of the components have received a new structure and look in an attempt to improve usability and accessibility.
Question
Is the new interface in alignment with a consistent visual identity?
Usability
We aimed to improve the intuitiveness of flows, as well as to add clear and concise action feedback.
Question
Is our current interface design improving usability? Are users completing payment tasks more easily?
View more case studies
Ambages Design 2024