UX/UI Case Study – Local Altcoin App
Local Altcoin is new app for a fictional alt-coin project which aims to allow users to pay for goods and services in local business through the app using a city/community alternative currency, to impulse local commerce and improve the local economy.
The iterative Process:
1
Empathise
2
Define
3
Ideate
4
Prototype
5
Test
1. Project Overview
Project Duration
March 2021 – August 2021
The Product
Local Altcoin is new app for a fictional alt-coin project which aims to allow users to pay for goods and services in local business through the app using a city/community alternative currency, to impulse local commerce and improve the local economy.
The Problem
Some local business face a very aggressive online competition like Amazon, which has a big negative economic impact in the local economy of certain cities. Alternatives are needed.
The Goal
Design and app for a Local Altcoin that will allow users to easily pay in local business with this new local currency. The goal is to become an alternative for merchants and shoppers in small cities and villages to impulse the local economy
My Role
UX designer designing an app for this Local Altcoin project from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs
2. Understanding the User
User Research: summary
I conducted interviews and created empathy maps to undestand the users I’m designing for and their needs. A primary user group identified through research was young socially aware individuals who are into crypto and want to make a positive impact in their communities. Another group is less concerned about local issues and just basically want comfort and a direct monetary benefit while buying goods and services.
This user group confirmed initial assumptions about the Local Altcoin idea, but research also revealed that civism and commitment with local business werent the only factors motivating users, but other users also wanted an easy way to spend crypto benefiting from good prices, special offers, quick and cheap delivery, etc..
User Research: pain points
1
Lack of Options
Finding shops that accept crypto is hard nowadays. Inability to find shops to pay directly with crypto
2
Privacy & Legal Concerns
Paying with Crypto Visa Cards can be privacy issues. Bureaucracy and lack of legal clarity when using crypto to buy stuff is a problem.
3
Amazon Effect
Witnessing the damage of ecommerce and Amazon to local business and economy
4
Outdated Stores
Some local shops and business are expensive and old fashioned. They offer less for more
User Research: Personas
PERSONA: FRANCISCO
Problem statement:
Francisco is a socially aware P.E. professor who owns crypto who needs an easy way to spend his cryptos in nearby stores and business because he wants to contribute with local economy since companies like Amazon are very harmful
PERSONA: DAVID
Problem statement:
David is a Digital entrepreneur who needs a smart and convenient solution to spend his cryptos arround him because he thinks local business are usually expensive and anachronic
User Journey Map
PERSONA: FRANCISCO
Goal: Buy stuff in local business with crypto to support local economy
PERSONA: DAVID
Goal: Buy stuff with crypto easily, privately, convenient and with the best price/service
3. Starting the design
Big Picture Storyboard
Francisco’s journey to buy locally with crypto using the app and help his neighbourhood thrive.
Close-up Storyboard
This storyboard shows how the app actually works
User Journey
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the homepage i prioritized a quick and easy access to the main areas of the app
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation and access to funds from every screen, was a key user need to address in the designs.
Low Fidelity Prototype
The low fidelity prototype connected the primary user flow of paying with good and services with the local altcoin through the app, so the prototype could be used in a usability study with users. I created it using FIGMA
View the Local Altcoin App:
Usability Study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining
Round 1 findings:
1
Users want to pay quickly (QR reader)
2
Some users need initial guidance to use the app
3
Users want a delivery option
Round 2 findings:
1
Add “confirm payment” extra step in the qr reader payment feature
2
Font weights must be rebalanced
3
Colour contrast adjustment
4. Refining the design
Mockups
After usability study, I added an offer section within the local store screen in order to facilitate navigation
Mockups
Added an initial tutorial in the main screen of the app in order to help new “confused” users to understand better how to use the app at the beginning
Mockups
Adjusted colours and contrast of elements- Texts of the map weren't readable in the previous version
1st High-fidelity Prototype (Old Iteration)
The first high-fidelity prototype presented cleaner user flows for paying with local crypto and checkout. It also met user need for pickup or delivery option as well as more options. It was also created with Figma
View the Local Altcoin
2nd High-fidelity Prototype (New Iteration)
In this second iteration of the design, a more polished and cleaner version of the prototype was created.
All the content was redesigned in 360x767px and adapted to the XS – 4 columns – Grid in order to adapt to more modern devices with larger screens
To achieve that new upgrade, all the components used were redesigned entirely, updating all their states, using a more balanced type family and color palette, as well as more consistent sizes of elements and distribution of spaces.
New connections and interactions between the main screens of the app were created
View the New Local Altcoin Design
5. Going Forward
Takeaways
Impact:
The app offers a straightforward process to purchase goods and services with this alternative local currency. The app makes users feel the app really thinks about how to meet theri needs
One quote from peer feedback:
“The app makes everything easy. It is a great idea. It can definitely become a solution for many local business”.
What I learned:
While designing the Local Altcoin app, I learned that the first ideas for the app are only the begining of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next Steps
1
Conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed.
2
Conduct more user research to determine any new areas of need.
3
Keep iterating and polishing the design accordingly. Constant improvement.