Novelly

Revamping Novelly's website for students, teachers, and supporters to understand what Novelly is and its benefits

Project

Website Revamp

Role

UX Designer

Timeframe

July 2023 - August 2023

Focus

Information Architecture
Interaction Design
Visual Design

Overview

BACKGROUND

Novelly is a nonprofit organization on a mission to inspire students by what they read in school. They do this by publishing literature written by students and getting these pieces taught in 8th to 12th grade classrooms.

THE PROBLEM

Novelly is looking to revamp their website. They found from user interviews that users found their website confusing and hard to navigate. Thus, Novelly wants to better communicate what their organization does and simplify their website to enhance user experience.

Prior to joining the team, Novelly conducted student interviews. I synthesized their user interviews and turned them into insights through affinity mapping.

MAIN TAKEAWAYS

Participants were not certain about what Novelly does
Participants were unclear about how work gets published
Participants questioned how their literature gets integrated into the school’s curriculum.

Overall, it seemed that students were not understanding what the organization does and had a lot of questions around how things worked. Thus for the website revamp, we want to focus on making the website quick and easy to understand and get information.

IDENTIFYING OUR USERS

Before we started to make decisions about the structure of the website, I asked the client who their target audience was as well as what information they wanted to show each user group. They told me:

Students → goal: have students join their organization
Teachers → goal: have teachers go to their Teacher Community
Supporters → goal: have them support their organization

CREATING A NEW INFORMATION ARCHITECTURE

With our users clearly defined, it was time to see how we can enhance Novelly’s information architecture. I created sitemaps of their current website as well as proposed a new sitemap that better aligns with their users and user goals.

Current Sitemap

Improved Sitemap

The Project Manager had mentioned that they were looking to make their landing page into something similar to Linktree, where there's a list of links on one page. This led me to craft this new structure where Novelly’s various resources are grouped by distinct user groups. Creating dedicated sections for Students, Teachers, and Supporters achieves a clear and intuitive pathway for each user depending on their goals.

SKETCHES

The team gave me an outline of the content they wanted to include on the landing page. While I still created a sketch of how their idea would look like, I proposed a different layout that made more sense and reflected the new information architecture.

MID-FIs

After reviewing the sketches, the team liked my proposed layout so I proceeded to create mid-fi wireframes.

THE REVAMP

Once we agreed on the general sense of how everything should be laid out, I developed hi-fidelity wireframes. As for the revamp, the team gave me creative freedom and liked what I had come up with. I wanted to create something that was fun, inviting, yet still maintaining an educational vibe.

USABILITY TESTING

To test whether the new website’s structure was more efficient and easier for users to understand, I recruited 5 participants to go through the new wireframes.

Task 1 - Apply to Join the RVC

Task 2 - Locate Teacher Community

Task 3 - Learn More About the Different Ways to Support Novelly

Results Summary

5/5

Successfully completed all task flows

5/5

Quickly located specific sections

5/5

Expressed Landing Page was easy to understand

2/5

Hesitated when asked what Novelly was

Compared to the original feedback, users were not overwhelmed by the various resources offered by Novelly due to the improved information architecture.

Users were able to find information 50% faster
Users were able to answer what Novelly did as an organization

Final Thoughts

There were no further iterations made as we successfully achieved our target success metrics.

For next steps, I would focus on making sure the website is responsive to tablet and mobile platforms. As for something that I would have done differently, I would have gathered participants from each user group and conducted usability testing that way to ensure even more accurate results.