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.
Storyboarding
After learning about Kattie's pain points, I came up with the story to create empathy with Kattie to lead us to design a product that works for her efficiently.
Sitemap
We noticed three main important content that users are looking for on an author's website regarding the interviews and card sortings.
User flow
I learned Kattie's needs after hearing her story. I created a user flow that we assumed would benefit us in supporting the whole user journey and covering all the relevant screens once sketching.
Potential solutions & wireframes
Summarizing information and present it visually
Following reconsidering user research outcomes, it was time to sketch different solutions and develop low-fi wireframes.
Turning scribbles to prototypes version 1.0
To match the book's cover, we kept a dark pattern to redesign the website. However, we understood that it might develop following the usability test since we remembered that we are not the end-user.
04 EVALUATION
Does it really work?
Five participating individuals did usability tests. (two out of five were potentially readers, one was a writer who gave us a perspective of an author's view when we had no access to our potential client, Suzanne Collins, and finally, the one that was a painter who gave us such a good hint about our UI and the colours we had chosen.)
Usability test version 1.0
We leveraged usability tests to validate our potential solutions. Incorporating the users' feedbacks from the usability testing, I redesigned a few elements to provide better experiences to Kattie, achieving the main tasks of the website.
Revision - prototype version 2.0
Usability test
version 2.0
Revision - prototype version 3.0
Usability test
version 3.0
Final version
Lessons learned
We could identify several obstacles we had not apprehended in the earlier steps before the usability test throughout our design process. We learned that taking a second look at the ideas is important, as we did not notice any problems with those ideas when we first thought of them. I was able to apply user experience design thinking across the site to design a useful site for users. As a team member, I learned how constant communication with the team plays an important role.
Key takeaways
The design solutions solve several problems regarding the heuristic evaluation we initially found, so the website is significantly more usable!
Next step
I want to implement additional features in future iterations we could not include due to time constraints. Such as "about" or "events" according to user preferences and more focus on UI.
Discover more works
DibaSustainable Fashion Brand | Foodie CaféFast Food Application | Suzanne Collins(You are currently here.) Author's Website Redesign |
---|