This case study aims at explaining my role in this project and the design process i followed in achieving my goal which was to create a responsive web design for a cryptocurrency exchange transfer flow website.
PROJECT OVERVIEW
Stacks is a Cryptocurrency exchange website with a modern feel that attempts to make buying, selling, and exchanging crypto coins easy for users with little to no knowledge about crypto nuance. Stacks offer the users the chance to:
- know which coins are gaining tract
- familiarize themselves with crypto terms and have a better understanding of what it does
- study the market as it provides life charts of crypto flow
- buy, sell and exchange cryptocurrencies.
PROJECT DURATION
DEC 2021 — JAN 2022
ROLE
Chief UX Designer responsible for the designing of the responsive website of Stacks from Conception to the final product.
RESPONSIBILITIES
Creating user-centered designs by understanding business requirements, User research, conducting interviews, and user feedback. Creating user flows, wireframes, Low and High fidelity, Usability testing and studies, prototypes, and factoring accessibility in my design and mockups. Translating requirements into style guides, design systems, design patterns, and attractive user interfaces.
MY DESIGN THINKING PROCESS
Design process
STEP 1: USER RESEARCH
It was a new learning experience for me as I chose this project because I wanted to know what cryptocurrencies entail and what problems users were facing. So I conducted user research to understand what pain points they had and empathize with them to understand exactly how they feel. I interviewed 5 adults who are coffee lovers ranging from 19–60.
User pain point
Major pain points highlighted in the research phase
Competitive analysis
I had to do this as it was new terrain for me, I researched extensively on my competitors i.e Direct and Indirect competitors so as to know what they were doing right and the avenue for improvement. I had to create accounts with Binance, Luno, and Roqqu just to name a few so as to understand how it feels navigating on their platform. It reinforced my understanding of the crypto space, the likely problems users could face, and how to build a better product and overall user experience.
User persona
I created a user persona to perfectly depict who the target audience are
Site map
The goal was to make the journey seamless for users and so, i came up with an information architecture that would make the user experience a beautiful experience.
Site map
User journey map
This showed how potential users could interact with the app to ensure they have a good user experience.
User journey map
STEP2: DESIGN PROCESS
This was when I started sketching out the carcass of what the app could look like, the features, and whatever innovations I intend to bring to life.
Paper sketch
I noted down the different screens the users would likely interact with from the onboarding screen to when they have achieved their aim which was to have a seamless journey when making their orders or booking a seat reservation. The goal was to solve users’ pain points with the least clicks possible to ensure a solid user experience.
Digital wireframe
After I was done with my sketch and picking up what designs are key, decided to take it one step better by doing a digital wireframe and ensured i followed design best practices.
Digital Wireframe
USABILITY TEST (Low fidelity prototype)
I did a low-fidelity prototype, and linked all screens together right from the landing page to the end of the user flow which is the transaction successful page.
I did a round of usability testing afterward to know what works and what doesn’t work, which key buttons weren’t linked properly, and what corrections needed to make. I made use of the feedback and head back to my canvas to effect correction so as to address user pain points,
Lo-fi Prototype
Mockup design
I did a design for two viewports i.e mobile and desktop view as a lot of users made use of their mobile phones more often.
Cryptocurrency dashboard section
Log in screen
Log in screen
mobile view
Transaction successful widget page
Cryptocurrency exchange widget page
Desktop view
HIGH FIDELITY PROTOTYPE
After my mockup was ready, i came up with my hi-fi prototype and i ensured all vital points were linked together to ensure a seamless user flow for users till transaction has been completed.
Hi-fi Prototype
ACCESSIBILITY
I ensured my design was user centred irrespective of race or age. i highlighted a few key things to note which are shown below
Problems faced
- It was a daunting task at first as i had to do extensive research on how a typical crypto platform looks like and it wasn’t a smooth experience.
- i also had issues with selecting the right icons as it wasn’t accessible. this made me appreciate iconographers as having the right icon to pass across a message is key for accessibility sake.
- selecting the right color mix was a problem as i spent over a day trying to do justice on what the color combination should look like.
TAKEAWAYS:
What i learned
I learnt what it meant to understand the problem of a user irrespective of what project it is even if it means doing extensive research on that field, what the commonalities found in them and how they operate. i came to appreciate the crypto space more and even found time to research on NFTs and web 3.0. It was a beautiful learning experience for me.
Next steps:
- Look out for areas of improvement by actively doing usability studies to understand what friction still exists when users engage in the app and how it could be solved.
- Bring the design to life and host the webapp on Netlify.
Tools used:
- Adobe XD
- Google Slides
- Google Docs
- Miro
- Google Spreadsheet
- Zoom
Thank you for taking the time out to read my piece.
0 Comments