year
2019
industry
Fintech
team
Account, Project Manager, Service designer, UX designer, UI designer. Team by Antreem
role
UX, UI designer
The goal
The client is an international provider of financial services, asking us to redesign service to sign up for personal insurance. He asked for a usability study, 2 visual concepts, and some proposing evolutions.
Discovery
USABILITY SCENARIO
In this step, service design described a user scenario to capture the key interactions with a system and not all possible interactions.
Scenarios ensure that designs are firmly rooted on the ground and taking a “what our users want/need” approach from the outset.
Our scenario described the meeting between the advisor and the prospect. The advisor together with the prospect plans and explains the client’s financial situation, recommending the best solutions.
USER STUDY
In this step, our focus was to define and prove the usability level of the existing application.
I used a technique called Heuristic Evaluation that can help eliminate a major chunk of usability issues without necessarily involving real users.
I collected app warnings, listed in some tables, sorted by the corresponding heuristic. Each warning should be classified by its priority:
- soft usability problem
- hard usability problem
- stopping problem for the user
BENCHMARK REPORT
We surfed the network to discover some other assurance web app. We focused to data entry flow and visual identity.
NAVIGATION MAP AS-IS
At this point, we combined all the collected knowledge using a Navigation map technique. First of all, we designed the navigation map of the as-is service. We know that the rules for designing good navigation are: Prioritize consistency, Design clear interactions, Avoid deep navigation, Design for responsive compatibility.
We decided to reduce the complexity of the project using a stepped process to help users avoid frustration and successfully complete a primary task; we also chose to limit the number of levels.
Progress trackers (or progress indicators) display progress through a sequence by breaking it up into multiple logical and numbered steps. They guide the user through a number of steps in order to complete a specified task. For us, good progress tracker should inform users about the following aspects:
- What steps (or tasks) they have completed (preferably with a proper visual response)
- The current step they are on (user’s current location within the process).
- Which and how many steps still remain (preferably with clear designation).
Design
PROPOSED EVOLUTION
We listed some proposed evolution in order to reduce the complexity of the project.
NAVIGATION MAP
We redesigned the navigation map with the proposed evolution. So we worked out the navigation by creating two macro stepped processes. The first concerning the compilation of the prospect’s information, the second concerning the purchase of the product.
WIREFRAME
After learning about user scenarios and developing an information architecture, we built the base of our UX strategy. Then, we were able to proceed with Low-Fidelity (Lo-Fi) flow development.
Lo-Fi flows are created to understand the correct sequence of the main user scenarios, which have been identified in the previous steps. They help to design and adapt actions that users have to make in order to achieve their goals.
Next, we proceeded to the development of a High-Fidelity (Hi-Fi) wireframe. Our task was to visualize the screen structure and content, considering the logic of the service and all of the previously generated UX insights.
VISUAL IDENTITY: MOOD BOARD AND MOCKUP
With the UX deliverables in mind, our UI designers composed a mood board for the service. When developing this concept, we focused on human perception as much as possible. To perform this task, it is not enough to add colors to the wireframes or follow abstract design inspiration. We take into account UX requirements, features of the digital platform, principles of interface design, the psychology of visual perception, current UI trends, technical capabilities of the system, typology of UI elements, ability to scale the concept into a high-grade Design System.
We designed two concepts: an elegant theme and an engagement theme. I designed the last one.
For the engagement concept, we studied UI trend for 2019, in particular, UX Planet and UXPin papers. We decided to approach a lively and fresh style. Points of emphasis are:
- gradient 2.0 background, which means “subtle and simple. It uses no conflicting colors. It has a clear light source” (UX Planet)
- bright gradient color for action
- deep flat design, so “adding depth and dimension to flat design without changing its main idea” (UX Planet). We point attention toward charts and buttons thanks to 3D style and deep shadows.
BEHAVIOUR
Application UI is designed both for desktop and tablet (landscape). In desktop size, menu sidebar is always visible. In tablet size, menu sidebar is hidden. User has to click on the hamburger button so that the body shifts to right and menu sidebar appears. Both sizes are designed with a 12 column grid, with an 8 pixels padding among each column.
Furthermore, we decided to count on feedback to underline the engagement theme. So the most important feedback is about the background. All the pages have a fixed background, header, page title, and right column. Only the body of the page scrolls down.
At the same time, the majority of the pages have an abstract image as background to underline the dynamism and the evolution of data entry. However, when the user has a Health Risk Score, background image changes and harmonizes with the low/medium/high level of the score. So low level has dry earth, medium level has a sprout and high level has a lawn.
Finally, Engagement theme takes into account the environment of the user, so there are a dark theme and a bright theme that switch each other based on environment light.
