Redesigning Knowt's Homepage to Improve UX and Engagement
Optimized ease of use and user engagement by organizing information hierarchy through color, type, and sizing, unifying brand experience, and decluttering Knowt's home page.
Objective:
Enhance the user experience and
increase user engagement on the
home page (when signed in)
Scope:
1 week
2-3 Areas of Improvement
The Goal is...
to create a more intuitive and user-friendly interface that makes it easier for students to create and study flashcards or notes.
There was the choice to be logged in as a student or as a teacher, but I chose student since that is Knowt's main audience and the majority of their user base.
Here's the before/original design of the home page:
The Main Problems are...
- There's so much competing for my attention, users don't know where they're supposed to look or what they're supposed to click or do
- Users can't tell what the function of this home page is, which makes what's supposed to be the CTA, the "+" button, hard to predict
- As already stressed students, users are becoming overwhelmed and confused and are being forced to figure out yet another thing on their own
The First Area of Improvement: The Top Section
Issues to Address
These two sections at the top of the homepage compete with each other and the rest of the page since you can’t tell which is primary vs secondary and they take up a lot of space. Since the primary goal is to have users create and study flashcards and notes, these should both be secondary - they draw attention away from the “+” button at the bottom right corner.
The interface should lead the user on where to go and what to click. Information architecture isn’t just type size and thickness, it’s also hierarchy and size of the elements on the page.
Small UI note: too much extra space on the right in the “Search” button.
Additionally, when you decrease the page to a tablet-size browser, the two sections become misaligned. Main elements of a page should line up on a grid (as shown) to maintain a professional, clean, and organized look.
Proposed Redesign
What I did:
- Decrease the size of the top sections
- Make both sections the same lilac color (the secondary color)
- Remove the circled buttons and replaced them with a tertiary level, text-adjacent arrow
- Add an “x” to close these tabs
- Add a header (“My Notes”) to the main section of the homepage
How it helps:
- Helps the user understand that these are additional features available to them, but aren’t the main purpose of the home page → creating, compiling, organizing notes saved in Knowt
- Doesn’t distract from the main CTA of the home page → the “+” for creating/importing notes
- Provides users with the option to declutter their homepage even further if they are already familiar with KnowtAI and the AP Knowt Hub, are not interested, or just want to focus on the main feature of creating notes for now
- Easier to read when everything is in “light mode” vs. having one element in “dark mode”
How these changes align with the Knowt brand:
Knowt aims to make studying more efficient and effective
- The design utilizes clear, straightforward information architecture in typeface, elements on the page, and color palette to help guide users’ ability to understand what they’re looking at as fast as possible
- As a result, students are able to better navigate the home page, understand how they are supposed to use Knowt as a tool, and engage in the business goal: for students to create notes and flashcards to study
The Second Area of Improvement: The Bottom Section and CTA Pop Up
Issues to Address
Too many choices → I can’t tell what I’m supposed to click → overwhelming (which is the last thing you want your already stressed users to feel)
No grouping: “Create” and “Import” alternate → gives user extra work to figure out what they’re looking at rather than making it easily scannable
The language of similar choices don’t mirror each other which adds another layer of work by forcing the user to read, not just scan.
Extra work from having to read each circle + Too many options = A point of stress in figuring what to do and where to start.
Icons for flashcards and notes are a bit too similar, so hard to tell the difference immediately.
When the browser size is decreased, the arrow also goes on top of the button and makes it hard to see/read/know what you’re clicking.
Proposed Redesigns
What I did:
- Removed all the circle options of creating/importing and the swirly arrow
- Replaced it with a cute image representing exploration/discovery, prompt, and instructions
- Grouped the Create’s together and the Import’s together and added titles to each group
- Mirrored the syntax of the titles of the options
- Changed the icon for flashcards into a lightning bolt that has a similar look as the other icons
- The “+” hover state turns aqua instead of grey in the prototype
How it helps:
- It really declutters the homepage, but still shows the user that it’s empty and notes can be added, which helps draw more attention to that “+” button we want users to click
- Significantly decreases the mental load costs of the user by utilizing information architecture, thoughtful interaction design, and helping the user understand what they’re looking at, at a glance
- Makes the homepage fit in better with current, simple, modern UI trends
- Unifies the entire page by matching colors of elements and hover states
How these changes align with the Knowt brand:
When I first looked at the homepage, it took me quite a bit of time to take everything in and understand what I was looking at, and more, what I was supposed to do.
- Good design surreptitiously guides the user to the tasks they want to complete and where the business wants them to go
- Students are already overwhelmed, stressed, and under time pressure, so by clearing up the home page and guiding them on how to use Knowt, we are saving them time and mental energy thus enhancing their experience and helping them engage with Knowt’s services sooner
- The image also bolsters the sort of technological, space vibe I got from Knowt’s aesthetic/brand while also signifying the empty state of the home page and the potential to explore and discover through studying
