Knowt Website Redesign Challenge

OVERVIEW

Challenge

The Knowt website needs to highlight itself in the market of note taking apps. However, any design changes need to be ones that the business can easily adopt but, in the same breath, the changes can’t lower the experience of the people who are already customers in the name of gaining new ones.

Goal

The goals of this project are to:

• Understand why their users chose their brand.
• Research the other notetaking apps on the market that they are in direct competition with.
• Ensure that all the changes suggested would be ones that the company could adopt easily.

Role

This is a solo design project for Knowt company. My role in this was to research their largest competitors, identify issues with the current website and how they can be improved and then update the visual look and feel of the Home screen so the company could appeal to its audience more effectively while making it so that they were able to compete with the other notetaking apps on the market.

⁰¹ Research & Empathise

Market Research

Firstly, I took a look at Knowt to become familiar with how it operates. Then, I looked at its competitors. The main competitors I chose came from the Knowt landing page. When I signed up they said they were “like Quizlet + Notion”. That is where I started, but another competitor to note would be Google Drive. I looked at what makes them successful from a design and user experience standpoint.

Notion Pro:

• Notion has a very simple look.
• Notion can work as a notetaking app, a Kanban board and a database (to name a few) – it’s multi-faceted.
• Notion uses AI to make note-taking easier.

Notion Con:

• Notion can be hard to learn for newcomers.

User Goals

The users of Knowt are interested in one thing when they use the website – passing their exams. The students use Knowt to assist them by:

• Making notes, flashcards and folders for the classes they take in school.
• Being able to pull them up easily.

Currently, Knowt has 500,000 users and it is clear that they get relief from using this website.

“You guys don’t understand how much you saved me for AP exams. I was so scared cause I barely studied but now I feel pretty optimistic I’ll get a 4 or 5.” -@krissy

⁰² Define the Problem

Pain Points

The current website has three ways it could be improved. These are the main pain point that I saw when working on this project:

• The design of the website lacked uniformity.
• There are accessibility issues on the current website.
• The wording and layout of the site needed reformatting.

Wireframes

Knowt Exploration

Knowt Website Wireframes

⁰³ Ideation

Uniformity in the Design

Uniformity in your design would make your website easier to use because the design of the website varies in a few places:

• On the login page, buttons were rounded but when I opened the homepage it changed to a rounded square shape. That was jarring initially because it broke continuity.
• On the home screen you have rounded search bars, filters and other buttons but upgrade button is square.
• This is also the case with the icons. The website supports changing icons, but even without doing that, the icons were different from each other based on what I saw for no obvious reason.

Solution and Rationale: The solution to this is simply to have one design for buttons and icons that is constantly referred to and updated as needed. This creates a theme for the website that will help users navigate the site. I opted for the slightly rounded, square buttons. I chose that because Knowt is a digital version of paper and flashcards – all rectangular objects. For the icons, I made them outlined for headings and menus while folders, notes and flashcards were solid. This is so that the titles would seemingly fade into the background. Using the ‘Upgrade’ button and search bar as the main examples (seen below), these elements both have square shapes and it is continued throughout the design.

Uniformity in the Design Example

Accessibility

In order for Knowt to increase the number of users they have, their website needs to be accessible in order to help a wider range of people.

• The brand colour for the logo and ‘Upgrade’ button is a light blue and they are placed on a white background. Note: I am not asking you to change your brand colour.
• The card for people taking AP exams fades into the background since it is a light purple on a white background.
• On mobile versions of the website, when I open the menu I could not see the ‘Close’ icon. It was after being on the site for multiple hours that I realised it was there.

Solution and Rationale: My solution was to increase contrast when I could and create a range from the light blue brand colour. This gave me many options that paired well with your brand colour. I also used darker strokes in places where changing the colour wasn’t an option. The reason for this is that it makes seeing your site easier for people with sight disabilities and focusing easier for some neurodiverse people who have trouble keeping their attention in one place. Using the ‘Taking APs?’ card as the main example (seen below), light colours with darker strokes and vice versa would aid in reducing eye strain for the viewer.

Accessibility Example

Wording and Layout

The Knowt website is, essentially, an online notebook for thousands of people. That is why I believe the wording and the layout of the website has to be clear and unique to the user.

• The buttons in the filter were hard to understand. I would open a tab expecting to find one thing but seeing something else. For example, The ‘Saved’ filter made me think that the documents I had made before were not actually saved even though they appeared in the home menu.
•  I also found that using Bw Modelica, the brand font, for all the copy (especially when it was smaller) was not helping visitors read what is on your site easily.
• The mobile versions of the website looked like squashed versions of the desktop in some places and some elements on the desktop looked like overstretched versions of their mobile counterpart.

Solution and Rationale: I think clearer, more concise language is the way to go. As for fonts, use Bw Modelica in larger text, like headers. This allows users to take notice of it better when it shows up sparingly. I paired it with a simpler font. This is so that when people read it for extended periods of time they will still be able to focus on what is on the screen. Using the section headers bar as the main example (seen below), things that are worded more clearly so that the site can be navigated more easily.

Wording and Layout Example

Visual Design

Knowt High Fidelity Desktop Website Screens

Knowt High Fidelity Tablet Website Screens

Knowt High Fidelity Phone Website Screens

CONCLUSION

Summary

Outcome & Lessons Learned
The final product is the redesign of a notetaking and studying app along with a design proposal for the changes. Through this process, I learned more about accessibility on the web and what that means for various groups of people.

Final Thoughts
Designing the app has been challenging, but rewarding. It gave me experience working on a real website.