Online university Note taking Website
Website Revamp Project
Migui Camedecy University is an online university that offers lots of courses . The typical user is between 17-35 years old, and most users are university students or early career professionals. MU goal is to make note-taking flow fast, and easy for all types of users.
Project Type
Personal Project
My Role
Product Designer
UX Researcher
Timeline
Apr 2022 - May 2022
Tools
Figma, Illustrator
Project Overview
The Problem
Student is confusing on downloading or jotting notes during the lessons, inefficient systems for downloading notes, and confusing note- taking processes.
The Goal
Design a note taking flow website to be user friendly by providing clear navigation and offering a fast note-taking process
My role
UX designer leading the note taking flow website design
Responsibilities
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design
User research: Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online note-taking flow as a functional and convenient way when they get into the course. We want to allow the students to focus their time and attention to absorbing content from lectures and not on overcoming cumbersome app impairments
Pain points
1. Experiece
Students will take a lot of notes during lessons. Managing those notes can become very difficult if one is not careful and very organised.
2. Interaction
Existing websites make item selection difficult, which sometimes leads users to make mistakes
Concept Sketches
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Paper wireframes
Digital wireframe screen size variation(s)
Lo-Fi Wireframes
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Mockups
Based on the insights from the usability study, I made changes to improve the site’s searching flow. One of the changes I made was adding the option to let user search the course by filter. This allowed users more freedom to search their own course.
To make navigation more easily, a button which can sent to create not book page directly was added to let users more easily to get into the create notebook page.
Mockups: Original screen size
Mockups: Screen size variations
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users jot notes from a variety of devices, I felt it was important to optimize the using experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
