Carton Rerouting

This is a note-taking sequence created for a hypothetical online university. We live in a time where online education is increasing, therefore I tried to create an interactive website with collaboration features and easy cross-platform features.

Goal

This note-talking flow is created for a hypothetical university as an aid for online students in an increasingly online education system. This project tries to find ways to make creating notes as interactive as possible with many useful features, all in one easy-to-use online note-taking flow.

Problem

Online note-taking platforms often have little room for personalization or aren’t the easiest to export or share.

Role & Responsibilities

UX Researcher, Visual Designer, Interaction Designer, Motion Designer, UX/UI Designer, Project Manager - For the purposes of this project, I fulfilled all of the necessary roles.

User research, wireframing, prototyping, iterating, story boarding, creating personas, affinity diagramming, user testing, applying visual design principles, conduct competitive audits

Duration

June 2023 – August 2023

Design System

Empathize

User Research - Summary

I assumed that most users’ needs pertaining to a note-taking flow would mainly include customization. Upon conducting research (I did this by means of a screener survey and by doing a competitive audit), I realized that users want more. Users want easy cloud sharing, collaboration with peers and colleagues and access to their own course material through a note-taking app/ flow or website.

User pain points

Limited customization features

Users felt that there weren't enough ways in which to customise their notes and make it their own as one would on paper.

Cross computing and cloud sharing

Some users had trouble syncing their notes across their devices to keep working on them as they need to.

Collaboration

Not all notes are easy to share or work on together, like in Google Docs, for example. Especially since education is getting more and more online elements, this was a great concern for users.

Security concerns

Some users are nervous that their notes aren't completely private and that someone else could easily access them without permission and cause chaos.

Define

Problem statement:

Gloria is a medical student who needs to create and share notes as time-efficiently as possible, because she wants to save time on studying notes and collaborating with peers.

User journey map:

Gloria's user journey map revealed that users would benefit greatly from features that would assist in collaboration and sharing notes.

Ideate

Sitemap

I set up a landing page for security and personalisation purposes, which directs you to the home page. Here the user can access all of the website's different features via the navigation banner or by scrolling down.

Paper wireframes

I thought it would be a good idea to make the user journey starting point extremely prominent through a bright button. However, later I thought it would be helpful to have some kind of avatar who guides the user in the beginning, like a tutorial. This changed again after the first usability study, though.

Paper wireframe screen size variation(s): I wasn't quite sure how to approach the screen size variations, but ended up simply enlarging the existing elements and displaying more information on the screen at once, to optimally use the larger space on the desktop vs the mobile screen.

Digital wireframes

My goal was to make sure that everything is easy to find, and that the website would have a page where students can download and access templates to create notes from, as well as a community page where students can easily share notes, ask questions and collaborate.

Digital wireframe screen size variation(s): I took advantage of the larger screen size by having prominent search bars, filters and an obvious navigation bar at the top. The logo in the footer section is also larger with links to the site's social media pages and t's & c's and so on next to it.

Prototype

Low Fidelity Prototype

View desktop prototype: https://xd.adobe.com/view/6617cea0-b8c2-412b-b8a0-e3e1d83dc35a-3344/?fullscreen

View mobile prototype: https://xd.adobe.com/view/731c8c47-0868-4734-ae55-3db9a47f5a13-264f/?fullscreen

The basic user journey for this note-taking flow is scroll down/ new note/ save note. From there the user will be redirected to their other folders and notes and can go back to the home page or one of the other pages from here.

Mockups

Before usability study

After usability study

Screen variations

I realized that my design was too basic after conducting my first usability study, and became concerned that user drop-off rates might be high for this website, so I added some animations and transitions - and I received a lot of positive feedback from my second usability study. Users felt that they would make use of the flow and were even disappointed that they could not use it immediately. I made use of blue as my main colour, because students tend to be stressed and studies show that blue has a calming effect on the brain.

Test

Usability Study

Study Type:

Unmoderated usability study (2 participants) & Moderated usability study (3 participants)

Participants:

5 participants

Location:

South Africa, Cape Town (some remote)

Duration:

10-15 mins/ participant

Usability studies findings

Confusion about where to access saved notes

Half of the participants were confused about where to access their saved notes, therefore, accessing saved notes should be made more intuitive and clear.

Lack of access to saved templates

Half of the participants noticed that saved templates cannot be accessed from anywhere, therefore, a “saved templates” page should be added somewhere and be made accessible via the menu.

Buttons not intuitive enough

Half of the participants thought that buttons’ sizes should be increased, therefore, these buttons should be made more prominent through colour and size.

High Fidelity Prototype

View desktop prototype: https://xd.adobe.com/view/9862ff26-e50a-4cb0-bcb7-27c98e7935df-cd31/?fullscreen

View mobile prototype: https://xd.adobe.com/view/e87e247a-e9fd-418f-a0e0-6f56e0fd337e-bd2d/?fullscreen

I changed up the design quite a bit after the first usability study. The home page now has an animated flow through all of the features of the website that can be viewed by tapping anywhere on the screen. From there, the user is directed to were they would create a new note via a noticeable button at the end of the first flow.

Accessibility Considerations

1. High contrast

I made use of colour combinations with sufficient contrast to make content readable for users with low vision or colour blindness.

2. Mobile responsiveness

Designing for mobile accessibility targets a broader audience, since the next million users will most likely access the internet via a smartphone connection

Going Forward

What I learned:

Less is more
There is no such thing as a bad idea
Different users will benefit more from ifferent features
Not everything is as obvious as one might think
A simple animation can make a massive difference
Experiment as much as your timeframe and budget allows before deciding on a final design with the best user experience.

Impact:

“I think the navigation in this thing is easy enough for people with a variety of ages and levels of tech savvy to be able to use it without problems.” - Participant

"It is easy to understand and use, without overwhelming the user with a lot of unnecessary information.” – Participant

Next steps:

I would like to iterate based on reviews after the launch of this website to make sure that users' needs are met as much as possible and to iron out any pain points the team may have missed.
After launch, it would be cool to design an additional user experience, made specifically for sharing notes and discussions.

Page updated

Google Sites

Report abuse