Roles played
I created this UX/UI project after my Digital Design training at Endava, where I acquired some high level information about planning, creating and working further with the developers. For this project I too my time and studied alone different techniques, trends, and scaling criteria, and I experimented more with the prototyping options.
Challenges
Along the way I encountered some challenges and these are the main ones:
1. Making everything easy for the "developers"
One of the most important things things I learnt from my training was that I always have to keep in mind that my finished work, and maybe even more will be forwarded to a developer. Because we are a team I should try to make their work easier and stay consistent with the scales I use and tried to make numbers be multiples of 8.
2. Working with more complex prototyping options
All the time I had in mind how to prototype should look like. At first I couldn't wrap my head around it, but after doing more research and watching tutorials I figured it out.
3. Making everything clearer for the user
As this app has two main parts, the common wallet and the personal wallet, I had to find a way to help the user make the distinction between them while keeping everything aesthetically pleasing. I took into consideration that the users could have eyesight problems so the writing and the icon from the top of the page might not be enough. Thus, I changed the background to a different color order.
Activities performed
-
Research
-
Survey
-
Personas
-
User Journeys
-
User flow
-
Sketches
-
Wireframes
-
Prototyping
-
User testing
Research
For the research I gathered information for save sources, created surveys and interviews with real potential users, created personas. user journeys and user flows.
You can find all of these in the following Miro link: https://miro.com/app/board/uXjVOIQKUFc=/?share_link_id=481198578365
Style Guide
I tried to adopt a more stylish approach using gradients and transparent components to give the effect of space. For the font I used Alata Regular, and Roboto multiple sizes.
Building the interface
After creating the user flow and sketching the pages I created the frames you can see below. I was inspired by other apps such as Revolut and BT Pay, and also I mixed all the ideas with the Insights I got from the research and user flow.
User testing
In this part I had a short interaction with two of the potential users, in which I explained them the purpose of the app and asked them to imagine the are using the app. They didn't have any complains and worked smoothly with the prototype. I choose to ask a web developer to take a look on my work and give me their feedback both as a user and from a coding point of view. They gave me a plenty of recommendations, such as changing some shades to be easier for the users to spot element on the interface and integrating more buttons in the main screen for less taps for the user and less code for the developer.
Flows and Prototype
I created two flows to show how the app works and you can see them in the videos below or try the prototype yourself.
Flow 1
In this flow you can see the log in page, and the interface for the personal virtual wallet.
Flow 2
In this flow you can see the interface for the common virtual wallet.