Scribd
Upload
208 views30 pages

Iris Case-Study

The document summarizes Sammy Wong's work designing the website for the cryptocurrency exchange platform iRIS. Sammy conducted user research through interviews and persona development to understand pain points. Key issues were cluttered navigation and lack of stop-limit order options. Wireframing and prototyping led to design refinements addressing these. Usability testing informed further changes. The high-fidelity prototype optimized the exchange experience across devices for intuitive, accessible use.

Uploaded by

api-630620365
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
208 views30 pages

Iris Case-Study

The document summarizes Sammy Wong's work designing the website for the cryptocurrency exchange platform iRIS. Sammy conducted user research through interviews and persona development to understand pain points. Key issues were cluttered navigation and lack of stop-limit order options. Wireframing and prototyping led to design refinements addressing these. Usability testing informed further changes. The high-fidelity prototype optimized the exchange experience across devices for intuitive, accessible use.

Uploaded by

api-630620365
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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
[email protected]
Thank you!

You might also like