Here comes to my third project at Ironhack. This is an individual project and the goal is to incorporate a new feature to an existing App based on user needs. For this project we’re being told to focus more on the UI part and the duration is only 5 days so we have to really be good at time management and in the meantime to choose smartly the tools for the project.
I choose to incorporate a money transfer feature to WhatsApp.
UX process
Market research
To begin with, I did some market research on WhatsApp and found out that apparently it’s the most popular messaging app worldwide and it’s being used in 180 countries and it’s also available in 53 languages.
Feature comparison analysis
Then, to get a better understanding of what the current market offers, I’ve done a feature comparison table to analyze WhatsApp and its competitors’ features. As you can see below, WhatsApp is really powerful and have more potentials among all these apps on the global market.
User research
Followed by the market research I also conducted a quick user interviews on 7 active WhatsApp users to validate this feature. I got 6 positive feedbacks out of 7 interviews and which is really a good news for me. Most of the interviewees told me that they would definitely use this feature and it could be really useful.
App analysis
I also conducted a deep App analysis on WhatsApp to get to know the app better.
Proto Persona
Based on my research I then created my proto persona Steve Lee - a sociable and forgetful freelance designer. From his goals & pain points I’ll be able to see how might we help him to improve his experience on WhatsApp. As he’s a freelance designer, he’s always got a lot of bills. It’s tiresome to switch into different apps to do transactions and add bank account informations. Also he enjoys to hang out with friends he wants to have a simpler way to share the bills and be able to pay them back while chatting on the app.
Problem statement
Based on Steve’s needs, I came up with this problem statement.
User flow
As it’s getting clearer and clearer in my mind, I created a happy path for users to do money transfer on WhatsApp. Once they’re on WhatsApp chat page, a simple click on the +button will lead them to do the operation. They can edit the amount and also add description for the transaction. When the operation is done, a confirmation message will be sent automatically in the chat which ensures both party to be aware of the money transfer.
UI process
Atomic design
Here’s the atomic design I used to do my UI design.
Colors & typography
Low-fi sketches
Mid-fi wireframes 2nd version after 5 user testings
High-fi wireframes
Hi-fi prototype
Next steps & takeaways…
This is my first individual project during the bootcamp, I really enjoyed the whole process of working alone and achieve daily goals. As the duration is pretty short, it’s really important to set daily goals and make modifications quickly. I also enjoyed the presentation part when we shared with each other our individual project and received peer feedbacks. There’s always a lot of new things that I can learn from other designers and also to discover my own abilities through the UX/UI design process.
Thanks for reading and any comments are welcomed!
