Wise Wallet
An e-wallet application that can act as both a secure bank account and transactional card for payments and transfers.
By examining competitors in the digital wallet space, I was able to identify underserved opportunities in the market, weaknesses in competitors’ user experience and to make better-informed decisions on the overall design of my solution. To do this I produced a SWOT profile of two competitors to Wise Wallet as well as an UX analysis of their mobile apps.
Gaining a significant market share will be difficult due to the lack of brand recognition, although there are areas in which current solutions can be improved.
I conducted surveys and user interviews to learn more about the users’ general attitudes towards digital wallets and understand how they use them. I gathered a wide range of participants, with varying levels of technical know-how, as the app has a number of potential use-cases. Participants were aged from 21 to 53 years old.
Digital wallets have widely been trusted and adopted by users but most do not partake in any form of budgeting.
In order to organise the results and better identify insights, an affinity mapping exercise was performed. The following insights were found:
Opportunity: Allow users to store and track multiple bank accounts and cards in one application.
Opportunity: Aim to have a simple and intuitive user interface that allows users to send a payment, easily and quickly.
Opportunity: All users felt they would be more likely to save money and budget appropriately if there was a feature within an app to help provide budgeting goals and track money saved.
By synthesising the data from our user research methods, I was able to create insights which were then used to capture the essence of our target users, in the form of personas.
To view the competitor analysis, user surveys and user interviews in more detail, click the button below.
Creating user personas helped to establish empathy with our target users and ensure that future design decisions would be based on real data from real users. By keeping our personas in mind, I could then make sure that our users’ needs and goals are the top priority when trying to prioritise the key functionalities of our solution.
Three personas were created to cover the wide range of different types of users that partake in online banking.
Each persona created has distinct motivations, needs and goals required from our solution, to represent each target audience.
Using the research conducted previously, I was able to create goals and expectations that each persona may require from the Wise Wallet app. Then, to help visualise the processes a user goes through in order to accomplish a goal, user journey maps were developed.
By using journey maps we could tell a memorable story about a user’s goals, helping to get a better understanding of each process the user go through to accomplish one of these goals.
Similar to the user journey maps, the user flows helped me to better understand each step the user has to take to achieve a goal. By walking through the user’s flow through the persona’s point of view, I could visually see what tasks could be completed at each page of the web app.
User flows helped to discover how many screens will be required for a user to complete a goal and assisted in finding any glaring errors in our journey maps.
To view the competitor analysis, user surveys and user interviews in more detail, click the button below.
After creating the user flows, I was able to produce a sitemap of the Wise Wallet web app. To validate the assumptions I used to create the sitemap and refine the sitemap further, I conducted a closed card sorting exercise with 20 participants via Optimal Workshop.
The card sorting exercise provided a clear indication that 15/18 of the cards were in a definitive category for the participants. However, this still led to some changes to the sitemap.
Creating the low fidelity wireframes allowed me to show the high-level functionality of some of my design solutions. To ensure that I wasn’t adding excessive detail to each wireframe, I decided to set a 10 minute timer for each screen and aimed to complete each wireframe within the allotted time.
After completing the initial sketches, I received actionable feedback and tips to improve the designs in specific areas.
To learn more about the card sorting exercise and to view the low fidelity sketches in more depth, click the button below.
Creating the prototypes was an iterative process. At each stage of fidelity, feedback was received from more experienced designers which helped me to build upon the previous iteration and develop a more well-rounded solution.
To learn more about the changes made through prototyping view the refinement section or click the button below.
The main aims of the usability tests were to observe how easy it is for the user to navigate through the app and to discover friction points for users as they attempt to complete three key tasks. From this, I could then improve the designs by creating solutions to these issues.
The main goal of this usability test is to gain an insight in how the user will navigate through the app and how hard it will be to complete three key tasks.
Another affinity mapping exercise was implemented to discover any patterns from the results of the test. After this, a rainbow spreadsheet was created to organise the information and Jakob Nielsen’s error severity rating scale was used to sort the findings.
Proposed change: Redesign filtering system for recent transactions. A Filter By button could be used instead of a drop down. This button could lead to a modal where the user can choose the appropriate filters.
Proposed change: Display an error notification for the appropriate field if it has not been filled.
Proposed change: Include a more interactive onboarding which helps to move users along each step and allows them to use some of the features of the app.
Proposed change: Allow for a larger pressing area for text buttons and drop down menu items on mobile devices.
Proposed change: Include a section in the introduction page or onboarding that explains Saving Spaces.
The usability tests uncovered a few problems with the current designs and areas in which changes could be made. To validate some of these changes, preference testing was used.
To learn more about the usability tests, click the button below.
Based on the findings and insights from the usability tests and preference tests, there were a number of refinements and improvements made to the design solutions.
Four out of six participants clicked on the wrong drop down menu when trying to filter the transactions. Two participants also couldn’t find the appropriate filter settings even after clicking the Filter By drop down.
Four out of six participants said they were expecting the onboarding to be more interactive.
Three out of six participants were unsure what the Saving Spaces option in the navigation bar would lead to. Whilst saying this, they were able to understand what to do after visiting the Saving Space section.
The transaction image and title has been grouped together for each transaction to help users distinguish each incoming and outgoing.
The different text sizes and levels of boldness places emphasis on specific areas, helping to guide users. For example, the first thing users should see is the large ‘Transactions’ header which should tell them what page they are on. Next they should be able to see the transaction names and the transaction amount.
Wise Wallet has a very limited colour palette for areas such as the background, text colour, icon colour and buttons. The default settings of the app will be a “dark mode” design as this should be less straining to the eyes of the user.
When colour is used, it should stand out from the rest of items on the screen. Therefore, colour will be used to help differentiate different cards, accounts and Saving Spaces throughout the app.
To learn more about my UI design decisions and to view the full Wise Wallet style guide click the button below.
Below you can view the interactive prototype of the Wise Wallet app created in Figma.
One of the main things that I have learnt during this project is that to truly understand the problem we are trying to solve and who we are solving it for requires a strong base of research and understanding. From this, we can start thinking of solutions and developing our design ideas.
As this was a conceptual project for educational purposes, I missed some of the cross-collaboration aspects that are involved in a working environment. Therefore, it can be hard to know which elements and features may not be technically feasible. Also, as this industry already contains so many tried-and-trusted names ranging from Apple and Google to traditional banks, the business viability of creating another digital wallet app is questionable.
I have found the iterative nature of the design process extremely important to creating a well-functioning, user-friendly design that helps to solves our users’ problems. Through iterating we can refine and improve our designs as we gain more knowledge of what is required.
This links to my previous point as the main source of information through iteration is from collaborating with others, whether it be more senior designers (my tutor and mentor) or potential users when testing. The feedback received from others helped to improve the designs in more ways than I imagined and led to an overall stronger solution.
Through my meetings with my mentor and research conducted online, I understand that the design process in a real-world project would not usually be as linear and straightforward as this educational project. However, I have improved my problem solving, empathy-building and project management skills as well as my technical know-how of wire-framing and prototyping.
