Cassandra Clare Reimagined
Refreshing an author's website to build loyalty and retention for new and current readers.
↓
SCROLL
BACKGROUND
Cassandra Clare is a best-selling author in the Young Adult genre, she’s best known for her fantasy series “The Shadowhunter Chronicles”. She’s very active in her social media and enjoys interacting with fans and sharing their fanarts about her work.
While author’s are not required to have websites, it is now an extension of their brand and identity. It’s the one place they can shine and show who they are. It’s also a marketing tool to allow them to expand their brand, social media and make it more accessible to know them.
CHALLENGE
How might we improve Cassandra Clare’s website to make it more accessible, focused on her brand and easier to navigate to invite both new and current readers to visit it more?
SOLUTION
A reimagined design of her website, showing the key points and opportunities to expand her reader base and focus on showing her brand and style.
ROLE
UX/UI Designer, solo project
TIMELINE
80 hours (2021)
TOOLS
Figma, Sketch, Protopie, Zoom, Notion, GoogleDocs
SKILLS
User research, information architecture, interaction design, wireframing, prototyping, testing
*Educational project as part of DesignLab’s UX Academy, this is a conceptual project I am not affiliated with Cassandra Clare.
RESEARCH
Importance of branding for book authors
The purpose of this project was to elevate the current website of Cassandra Clare, a best-seller young adult author, with the purpose of refreshing her website to build loyalty and increase retention for new and old readers.
I set some objectives to understand more about the industry and how a website affects an author branding, considering the current world where everything is digital.
⟶ Understand people's expectations when visiting an author’s website.
⟶ Identify user demographics.
⟶ Learn about the pains, goals, needs and motivations of book readers that want to learn about books and authors.
⟶ Determine strengths and weaknesses of competitors.
⟶ How branding affects an author.
COMPREHENDING THE INDUSTRY
Realizing design patterns & expected features by studying other YA authors.
Parting with a desk research to identify the usual demographic of young adult readers, the popularity of the genre and how branding affects an author; I moved on to a competitor analysis of 4 direct competitors (other YA authors) and 2 indirect competitors (non-YA authors), to understand what was common and expected to find in an author’s website.
Most of all, I wanted to uncover:
⟶ Strengths and weaknesses of competitors.
⟶ What features/information they offer.
⟶ Design patterns.
Direct and indirect competitors.
INSIGHTS FROM READERS
Discovering the joys & pains of YA readers
The reason I chose to interview was because I wanted a closer look at the expectations of YA readers and I wanted to conduct a moderated usability test of Clare's current website.
⟶ I recruited 6 participants from ages 24-40.
⟶ Interview was done through Zoom.
⟶ The goal was to learn from their positive and negative experiences when visiting author’s websites.
⟶ Understand their joys, needs, motivations and pains regarding YA books.
⟶ Discover their expectations and wishes when visiting author's websites.
The most relevant insights from the participants in the interviews.
I concluded that readers want to know more about the lore of the books, the latest news surrounding the books they read, and find out fun facts about the authors.
The moderated short usability testing that was conducted with these 6 participants consisted of 4 short tasks encouraging to explore the website, and to see how usual readers would interact with the website and how accessible it was. This could help me prioritize the pages and information to redesign, and if it was needed.
These were the most relevant insights:
⟶ 5/6 participants found the navigation to be confusing and messy, as there are three different navigation bars and it’s hard to tell which one is the main one.
⟶ 5/6 participants agreed that the color scheme and background are very representative of the author’s brand and universe.
⟶ 4/6 participants felt there were too many things going on, and it was hard to know where to start.
JOURNEY MAP
Mapping out the hero journey & setting up expectations & needs
While a solution didn’t exist just yet, I wanted to explore more about the flow and needs that readers might have when visiting the website. To do this I created a persona: Cathy. She is the person I had in mind to do the design.
Cathy had straightforward expectations on what she wanted to find on the website:
⟶ Clear navigation to find all the information she needs.
⟶ How to start reading the books and their respective order.
⟶ Bio of the author that includes fun facts.
⟶ Friendly and not overwhelming interface.
Journey map of Cathy while interacting with the future solution.
DEFINING SECTIONS & CONTENT
Using a Sitemap to define the sections, pages & information
As I gathered from the insights from the interviews, they felt overwhelmed with the currect website because it has 3 main navigation bars and there's a considerable amount of content. Which is why the sitemap helped me define a new way to organize the existing content to be able to access to it more clearly.
I also used a task flow and user flow to see the possible scenarios and path they could take depending on their starting point and the role they were playing (new reader, curious fan or a veteran fan).
Sitemap containing the most relevant sections and content of the current website and the future solution.
CHALLENGE
Creating the first sketches to reach to the best solution
Using my favorite grid sketchbook and some pens, I did sketches of the main pages. While having in mind the insights gathered from the competitor analysis, interviews and flows. This helped me as a starting point on choosing design patterns and what features to prioritize.
MID-FIDELITY WIREFRAMES
Creating the prototype that would be used for usability testing
Once I revised the selected option of each screen, I used Sketch to create the Mid-fidelity wireframes and the prototype with Protopie to try new effects. One of my constraints was keeping the existing content, therefore I used the content and copy from the current website.
Homepage
Mid-fidelity screen of the homepage, in parallax effect.
Start Reading
Mid-fidelity of the list of books
Bio
Mid-fidelity of the bio page that leads to fun facts.
Search
Mid-fidelity of the search navigation in action.
USABILITY TESTING
Conducting usability testing to see the user's reactions & expectations.
The usability testing went better than I expected, I also learned more about what users expect and how they would interact with the pages that were part of the tasks.
Extract from some insights obtained during the usability testing.
⟶ 5 participants helped with the usability testing, from ages 25-47.
⟶ Participants were able to complete the test 100%.
⟶ On average, error-rate was 96% with 3.2 errors and 0.8 slips.
⟶ It was a success because participants felt the navigation was clear, straightforward and invited them to explore more.
⟶ It was a struggle because 4/5 participants stumbled on the first task. They were confused about the difference between "list of books" and "start reading", and identifying what was a series and what a book.
PRIORITY REVISIONS
Last step was to implement the discoveries from the usability testing to organize the flow & structure
The results found were incredibly important to understand because I had a plan on how to iterate on the problem areas and what I could do to make it more accessible for users to understand the information, since it was important that readers, new or old, could be able to identify the sections and all of the different series that the author has.
Priority revisions made after the usability testing, making sure it will be usable for the guests at the park.
HIGH-FIDELITY PROTYTPE
Time to publish the results with an interactive prototype with the final result
I used Protopie for the testing, however I went back to using figma for the high-fidelity prototype. Figma is a tool I’ve used before and I knew I would be able to accomplish the effects and design that I needed for this project.
RESPONSIVE VERSION
Mobile & tablet versions
I also focused on the responsive version for mobile and tablet, because if we know one thing is that people spend most of the time in a mobile device so they need to be able to see the same content as users that visit the desktop version.
Homepage to Shadowhunter Chronicles main page.
List of books and a selected book.
Bio of the author and tour dates.
Homepage to Shadowhunter Chronicles main page.
List of books and a selected book.
REFLECTIONS
“I have the benefit of experience which tells me that sulking solves nothing” - City of Glass, Cassandra Clare
⟶ I took the chance to learn a new tool, it worked for my needs and while it caused some issues, I want to learn more about how to use it to produce richer prototypes with fun animations and closer to the end product.
⟶ Just because it’s a passion project, it doesn’t mean it was easy or that i could do whatever came to my mind. I followed the Design Thinking process, and I made sure I iterated and kept both the client and users in mind.
⟶ Constraints are important to not go over the tangents and focus on what’s important.