iRIS Website Design
Sammy Wong
Project overview
The product:
iRIS is a cryptocurrency exchange platform
that offers safe and smooth balance
transfers. The typical user is between 18-34
years old, and most users are college
students or early career professionals.
Project duration:
July 2022 to August 2022
Project overview
The problem: The goal:
Some existing cryptocurrency exchange Design an iRIS user-friendly website
websites have cluttered designs, by providing an easy way to
inefficient systems for ordering exchange exchange cryptocurrency at the
at a preferred price, and a confusing user’s preferred price.
balance transfer process.
Project overview
My role: Responsibilities:
UX designer leading the iRIS Conducting interviews, paper and digital
responsive website design. wireframing, low and high-fidelity
prototyping, conducting usability studies,
accounting for accessibility, iterating on
designs, and responsive design.
● User research
Understanding ● Persona
the user ● Problem statement
● User journey map
User research: summary
I conducted user interviews, which I then turned into empathy maps to understand
the target user and their needs. I discovered that many users are new to crypto and
only trade when they have free time from college or work. Many websites are too
confusing to navigate, which frustrates many target users, thus causing the crypto
exchange experience challenging for them.
User research: pain points
1 2 3
Navigation Interaction Experience
Crypto website designs The buy, sell, deposit and Some crypto websites
are often busy, which withdraw buttons on don’t provide stop-limit
results in confusing some crypto websites order for those who wants
navigation, especially for are hard to locate, which to buy cryptocurrency at a
those who are new to confuses users and leads preferred price.
cryptocurrency exchange. them to make mistakes.
Persona: Shawn
Problem statement:
Shawn is a busy accountant
who needs intuitive website
navigation and the option to
make stop-limit orders
because he wants to exchange
cryptocurrency at the preferred
price when he is busy at work.
User journey map
I created a user journey map
of Shawn’s experience using
the site to help identify
possible pain points and
improvement opportunities.
● Sitemap
Starting ● Paper wireframes
the design ● Digital wireframes
● Low-fidelity prototype
● Usability studies
Sitemap
Difficulty with website navigation
was a primary pain point for users,
so I used that knowledge to create
a sitemap.
My goal here was to make strategic
information architecture decisions
that would improve overall website
navigation. This structure focused
to simplify things.
Paper wireframes
Next, I sketched paper
wireframes for each
screen in my app,
keeping the user's pain
points about overview,
navigation and
exchange flow in mind.
The home-screen
paper wireframes
focus on optimizing the
cryptocurrency
exchange experience Red diamonds were used to mark the elements of each sketch
for users. that would be used in the initial digital wireframes. Refined paper wireframe
Easy access to
crypto exchange
Digital wireframes
Moving from paper to digital
wireframes made it easy to
understand how the redesign could
help address user pain points and
improve the user experience.
Prioritizing useful button locations
and visual element placement on
the home page was a key part of
my strategy.
Simplified cryptocurrency
market price overview for
easy reference
Digital wireframe
screen size variations
Low-fidelity prototype
To create a low-fidelity prototype,
I connected all of the screens
involved in the primary user flow
of making an order and reviewing
the cryptocurrency market price.
At this point, I received feedback
on my designs about the buttons,
page organization, etc.
iRIS low-fidelity prototype
Usability study: parameters
Study type: Location:
Unmoderated usability study Malaysia, remote
Participants: Length:
5 participants 20-30 minutes
Usability study: findings
1 2 3
Exchange Peer-to-peer Account
Once at the exchange Users weren’t sure The sign-out button
page, users didn’t have which field to fill in for looks too similar to the
options to choose the cryptocurrency send-message button,
which cryptocurrency exchange at first. which causes users to
to exchange. click the wrong button.
Refining ● Mockups
● High-fidelity prototype
the design ● Accessibility
Mockups
One of the changes I made was adding the cryptocurrency option for users to choose
which to exchange.
Before usability study After usability study
Mockups
I removed an extra column to avoid confusion, leaving only the Buy and Sell buttons for
users to decide.
Before usability study After usability study
Mockups
I changed the sign-out button into a different style to avoid users clicking the sign-out
button by mistake.
Before usability study After usability study
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for
additional screen sizes in my
mockups based on my earlier
wireframes.
Because users exchange from
different devices, I felt it was
crucial to optimize the browsing
experience for several device
sizes, such as mobile and tablet,
for users to have the smoothest
experience possible.
High-fidelity prototype
My hi-fi prototype followed the
same user flow as the lo-fi
prototype and included the
design changes made after the
usability study.
iRIS high-fidelity prototype
Accessibility considerations
1 2 3
I used headings with I used landmarks to I designed the site with
different sized text for help users navigate the alt text available on
clear visual hierarchy site, including users who each page for smooth
rely on assistive screen reader access
technologies
● Takeaways
Going forward
● Next steps
Takeaways
Impact: What I learned:
Our target users shared that the I learned that even minor revisions have an
design was intuitive to navigate and impact on the user experience. The most
demonstrated a clear visual hierarchy. crucial key takeaway is to focus on the
user's needs when developing design ideas
and solutions.
Next steps
1 2
Conduct follow-up Identify any additional
usability testing on the areas of need and
new website ideate on new features
Let’s connect!
Thank you for your time reviewing the iRIS responsive website!
If you’d like to see more of my work or get in touch, you can reach me at
[Link]@[Link]
Thank you!
