Website redesign
Author website
UX Case study
Summer - 2020
Project description
Goal
My responsibilities
A self-Initiated project to redesign Suzanne Collins' website to improve the overall user experience. Used the Double Diamond into this project through a four-week sprint.
Identifying key UX issues, outline potential solutions, improving the website's usability and overall user experience for end-users.
-
User Research & Analysis
-
Information Architecture
-
Wireframing & Prototyping
-
User Testing
-
Iteration
Duration
Three weeks UX
One week UI
​
THE TEAM
3X User researchers/Testers
1X UX designer
TOOLS USED
Figma
Sketch
MY ROLE
UX designer
Project lead
The problem
Applying heuristic evaluation and competitor analysis where we measured the website's usability in independent walkthroughs and report issues. Our initial impression was that the website appeared outdated, lacked useful organization, and was missing key features. These main issues may drive away current and potential users. They would be addressed:
CTAs, consistency and content hierarchy.
Proposed solutions
Regarding our user interviews, it became clear that the existing solutions lack the ability to get a proper list of the author's books. Information architecture organized better access information on the website. Planning to redesign the website will help fans and people find the most important information in terms of the author's works fast and easily, plus ensuring that the users find it enjoyable to visit.
Before / After
After user research and exposing the hypothetical solution, I worked on the IA of the website, then came up with ideations, designed sketches, wireframing and prototyping. The usability test provided us with a helping hand to reveal insights that could enhance our product usability in revision.
The process
Defining our process was important before we started to dive into the features and the overall user experience. Our 4-week design sprint consisted of four phases which were executed using agile methodology.
01 IDEATION
Brainstorming with a rough sketch
Heuristic evaluation
First, we tried to perform the brainstorming, to start by laying out the problem based on the main website of Suzanne Collins to solve and identify the objectives of a possible solution. Then, we tried to generate solutions.
02 RESEARCH & ANALYSIS
Heuristic evaluation
Heuristic evaluation
Aesthetic
The site includes large amounts of text that users are not likely to be looking for.
​
Recognition
The site doesn’t provide enough context for much of the content and structure of the navigation.
​
Consistency
Menu links don’t look any different than the bold text on the site, so it’s not clear what’s actually clickable at first glance.
​
User control
It’s difficult for users to recognize where they are on the site, where they navigated from, and how to navigate back.
​
The key insight from the user card sortings
Heuristic evaluation
Interviews and card sortings were done with nine users. Four out of nine were actively readers and curious about writers. Luckily, one of them was a writer whose opinion brought more extra value to our research to understand the problems and recognize hypothetical solutions from her insight.
03 DESIGN
Kattie was born
We wanted a true representation of the users. Interviews and surveys were helpful to gather the demographics and psychographics of the users. Although It would be easy to hypothesize about the users, given that most of Suzanne Collins' works fall in the teen and young fiction category. Inferential data analysis provided me with the necessary guidance for persona creation and narratives for scenarios.
Understand her paint points
We conducted interviews with three users to distinguish user's pain points while using the current website. I noticed some patterns in user's thoughts. Later I aggregated our findings in Kattie's journey map.
