Knowt is an AI-powered learning platform that helps students learn and study more effectively. It offers a variety of features, including flashcards, notes, quizzes, and assignments. Knowt also has a community forum where students can share notes, ask questions, and collaborate on assignments. The platform is available on both desktop and mobile devices, making it easy for students to study on the go.
I redesigned an existing web platform as part of a job interview design challenge. In one week, I demonstrated my research, problem-solving, and design skills.
• Make Knowt website more intuitive and user-friendly
• Make the overall website design looks more organized
CURRENT WEBSITE SCREENS
POSITIVE
• The overall design looks simple, modern, and sleek
• The design creates a positive and inviting impression
NEGATIVE
• It was a bit hard to get familiar with the contents
• I found that there are some unnecessary icons and functions
• There is quite a bit of empty space
1. MAIN PAGE
The highlighted areas all have the same function, which makes it difficult for users to navigate.
2. FLASHCARDS & NOTES
Overall, the card design is too small and lacks information. I could improve the card design by making the cards bigger and adding more text. I could also use the empty space to add more relevant information, such as top experts and top-rated flashcards & notes.
PROBLEM
Based on user feedback, the most common problems with the website are difficulty in navigating and an unorganized design system.
SOLUTION
1. COLOSO
Users can swipe back and forth to see different courses using carousel arrows. Red is used throughout the page to indicate action buttons. The card design is clean and digestible, with relevant images and well-ordered information hierarchy.
2. DUOLINGO
The onboarding journey is simple and easy to follow, with clear and concise icons that indicate the next step. The Continue button is disabled until the user has made a selection, and the progress bar provides clear visibility into the progress of the onboarding process.
3. QUIZLET
The website has a clean and consistent design. The website makes great use of space, the with texts and boxes. The website provides clear user direction, with arrow, labels, and focal color that indicate how to interact with the button and bar. The flashcards have a preview button that allows users to see a brief overview of the contents, which can help users to decide if they want to learn more about the topic.
BEFORE
AFTER
• I placed a "Create New" button in the top right corner and created a dropdown menu
• I placed the fixed navigation on the left so that users can easily understand the main contents of the service.
• I used only one emphasizing color (mint) for the overall design, with changing opacity.
BEFORE
AFTER
• I removed the search bar from the top bar and placed it in the explore area
• Other than that, I kept the design the same as the existing design
• I removed some unnecessary contents from the existing design and focused on improving the card design with a better visual hierarchy
• I added "Top experts" feature to give users more trust in the service
• I also added a carousel arrow to allow users to see more experts
• I created a separate area called "My Library" for users to save notes and flashcards from other users
• I also added a "Recently Viewed" feature to track users' history
BEFORE
AFTER
• I made the card bigger to show more keywords to the users.
• I also added a "preview" button so that users can see the contents briefly before they click the main course.
• In terms of design, I added borders to allow visual hierarchy and better readability.
BEFORE
AFTER
• I removed the keywords and replaced the live flashcard preview with a static preview so that users can take a look before they click.
I really enjoyed the website redesign challenge. The most challenging part was working within a limited timeline. However, I was able to follow the design process from research to final design, and I am happy with the results. If I had more time, I would have liked to work on the details and prototype further.
