Redesign
Compass card Website
Figma, Canva, Slack, Zoom, Excel
Jan.29, 2024 - Feb.9, 2024
Juyeong, Kyra
Case Study
Overview
-
Analyze website and find improvements
-
Build wireframes and prototype
-
Redesign Home page of this website
Redesign Process
Create a site map of current
home page
Analyze
the home page
Create a site map of redesign website
Wireframes
Prototyping
We've decided to redesign the home page at this time because the home page is one of the most important page of the website and we put priority on Sign in/Register, and purchasing a card which is the main action of users.
Create a site map for
current home page
We figured out the information on the home page and what kind of information is important for users.
Analyze the home page
We shared some findings and ideas of improvements by comments on Figma, in-person meeting, and Zoom.
-
Cramped Information on the header
-
Redundant Sign in CTA
-
It is better to more highlight the features of the compass card since it would be beneficial for users to register the compass card
-
Redundant Register CTA
-
Increase cognitive load
-
Redundant Refund section
-
Lack of visual elements in the refund section
-
Cramped information and small text size
Create a site map for redesign website
Throughout this process, we ensured that what kind of information should we put in our redesign website.
Low & Mid & High Fid. Wireframes
We built wireframes based on our research.
Prototyping
-
Accessible Vision feature, Language option
-
Accessible Help button (This CTA can now follow you throughout the page)
-
Catchy Hero Screen (with smart animate)
-
Kept the “Continue as Guest” Feature
-
Moved the purchase and retailer and gave it its own section from Header
-
Remove the Refund section, Easier to see everything all at once
-
Easier to see everything all at once with visual elements
-
Organized information in 3 categories, Enlarged to make it easier to read
Retrospect
-
Working with teammates in person allows for more direct communication and collaboration.
-
We can share our ideas and improve our design skills and creativity.
-
Balanced decision-making process is the key to working as a team.
-
It is easy to gather ideas together in brainstorming and make a decision process using.
-
The commenting feature in Figma and Figjam allows teammates to communicate in a free environment without the constraints of time and space.
