The Challenge (Empathize)
We were tasked with implementing a new feature within an existing mobile app over the course of an 8 week class via Google Ventures Design Sprint. This wasn't prompted by a preference for Coinbase but rather a realization during my own trading activities.
While I manage investments on Robinhood and trade futures on TradingView, Coinbase caught my attention due to a noticeable usability gap. The crux of the matter? Constantly searching for asset names felt cumbersome, especially when compared to the seamless experience on other platforms like Robinhood and TradingView, where charts are always at hand.
Process
To ensure that I approached the problem from a holistic standpoint, I utilized a 5 step problem solving process that allowed me to move forward strategically. I repeat steps 3-5 to polish the product.
Empathize: During this step, I seek solely to put myself in the user's shoes and understand their current journey, thoughts, actions, motivations, and any points of contention.
Define: Here, my goal is to clarify exactly what problems I'm trying to solve and what goals / KPI's I'm trying to reach.
Ideate: Ideation is where we try to solve the problems defined in the previous step through the use of clever visual design, proper UX strategy, and data-informed decision making.
Prototype: Throughout this step, we bring to life the solutions that we thought up during the last step through thoughtful interaction design. It's important to remain as detailed as possible when prototyping to remove any ambiguity during development.
Test: Testing is crucial to any successful product because collecting real-data on the effectiveness of your decisions is paramount to continuously improving your strategy and refining the product. I repeat steps 3-5 as much as time allows.
Let's get specific (Define)
With a gap identified, it was time to begin problem framing by translating the issue to a subjective question that we can ideate upon to ensure that all design decisions are made with an objective in mind because… the details are important!
How might we help traders dynamically and quickly view their markets so that their overall productivity & profitability increase?
Additionally, I created 2 user stories. 1 to match each of the proto-personas(2) I built. I would've loved to perform user interviews to ascertain what the user's current experience is, however; the time constraints for this project didn't allow for such research.
As a trader, I want to be able to more efficiently and dynamically view the blockchain while on my phone so that I can more comfortably place trades on the go.
As an investor, I want to quickly see an overview of my portfolio so that I can spend more time with my family so that my happiness increases and therefore, my productivity.
Meet Marco.
Biography
Marco is a 28 year old entrepreneur who makes a living managing his own Web3 SaaS company in Portland, Oregon. He supplements his income by trading & investing in crypto. Eventually, Marco aims to create his own coin & launch a crypto-based clothing line.
Goals
Profitably trade crypto-currencies, create his own coin, launch crypto clothing brand, place profitable trades on the way to meetings.
Motivations
Send money to family abroad, move to NYC, build something for his children, connect with other Web3 fanatics.
Pain points
Seeing your positions on the go is time-consuming, often on the go for meetings
Meet Silas.
Goals
Spend as much time with his granddaughter as possible, make money off crypto to go to his granddaughter's college fund.
Motivations
Providing for his family, pursuing his passions, exploring what the world has to offer, enjoying retirement.
Pain points
Viewing the market is tedious, charts aren’t customizable.
Building a solution
Now that our audience and conflict have been identified, it was time for me to figure out an inventive way to solve for our problem. I developed a couple of user flows to address each of our persona's pain points and then sketched each flow including all screens involved.
Take a look (Ideate & prototype)
Connecting the dots
Finally, our infrastructure was built to begin the latter (my favorite) part of the process: the ideation through testing loop. Due to time constraints, I had to work as agile as possible. I developed a low-fidelity prototype based on the user flows built with POP by Marvel and my own sketches.
Survey says… (Test)
From February 4th, 2024 - Feb 13th, 2024, 5 remote, moderated, usability tests were conducted to measure the efficacy of the proposed features in allowing users to more efficiently view and interact with the market. All participants had prior experience either investing or trading.
"I would've expected a gear or something, but since it was the only other icon, I figured it out pretty quick."
"I couldn't tell if the right one (layout) was selected at first, but I saw the checkmark and just assumed."
The design language
Unfortunately, Coinbase's design system isn't public and their font is paid. I substituted their system font with "Public Sans" as it's easily scannable as paragraph text as well as a title. Additionally, it remains readable across font weights. I also translated the elements found in the sketches into high-fidelity components that are styled to match Coinbases UI design.
Background
#090B0C
Primary
#090B0C
Secondary
#3069F3
Low contrast
#32363E
Denotive Red
#F36D44
Denotive Green
#25B773
High Contrast
#EAEEF2
Round 2
Insights from the previous round in hand, I was ready to jump back into the ring for a second round of ideating/testing.
Take another look (Ideate)
What was tested (Prototype)
It was clear that participants struggled when navigating to the settings with some noting that the placement was intuitive but the iconography was not. Last round, 60% of participants commented on their confusion. Since, the assignment was to adhere to Coinbase's existing design language, I decided to test the existing iconography again in a higher fidelity.
40% of participants also expressed confusion in system clarity when choosing their layouts. As such, I emphasized clarity of selection with a primary blue border to denote an active state and a radio checkbox for visual confirmation.
The results are in (Test)
From March 1st, 2024 - March 6th, 2024, 5 usability tests were conducted once again to measure any change of efficacy of the proposed features.
"Confirmation screens would've helped, I can see the change on the screen but it took me a minute to realize that I'd done what you asked."
"I'm not sure what each graph respresents. Is this the asset I just added?"
Looking through a new lens
Now fully equipped with user-feedback, I'm ready to ideate and test once more.
3rd time's the charm (Ideate & prototype)
Our audience expressed frustrations in graph readability and association. As our goal is to make viewing the markets as dynamic and efficient as possible, it's important that the user always understands what they're looking at. To combat this, I increased the fidelity of the graphs by better color coordinating them and I've also included the respective blockchain's logo beneath each graph.
Additionally, concerns were raised regarding the user's ability to determine if a system system task has been completed, such as: placing a buy order. In response, a respective confirmation screen has been added to each internal task and prototype functionality was improved as to always keep the user abreast of the system's status and to encourage exploration of all the app's capabilities.
These changed
It's lookin' good! (Test)
From March 1st, 2024 - March 6th, 2024, 5 usability tests were conducted once again to measure any change of efficacy of the proposed features.
"My one concern would be how easily people can see my portfolio information. I'd be more comfortable if I had to unlock my phone first."
Future roadmap
Perform user interviews
As mentioned previously, I'd like to perform user interviews to inform UX deliverables such as a journey map. This will allow me to truly understand the user's pain points and objectives and therefore; a more user-centered design.
Implement user feedback
Collecting quantitative research data is crucial for optimizing the design further. This can be achieved by using analytics tools to track user behavior and interactions within the app. This data can be used to identify pain points and areas of improvement that were not apparent during the design/testing process.
Evaluate app performance
Regularly evaluating app performance can help identify any technical issues that may arise. This can be done by monitoring app crashes, response times, and other performance metrics. Addressing these issues promptly can help maintain user satisfaction and prevent any negative impact on the app's reputation.
Continuously iterate
Finally, it is important to remember that the design process is never truly finished. Continuously iterating and refining the app can help keep it relevant and competitive in the market. This can be done by using feedback, conducting research, and staying up to date with the latest design trends and technologies.
Final thoughts
Testing for the class complete, I'm proud to say that the original goal of enabling traders to both view and interact with their markets quickly and dynamically is a massive success!