My goal was to implement new company corporate colours, implementing UX design principles and to ensure an overall pleasant user experience to users.
Stake holders were unhappy with certain UX and UI elements and the app was due for a much needed upgrade and roll-out of new company colours.
UX/UI designer, logo designer, front-end developer
Creating a design system, compiling documentation as a guide to implement my changes later, making front-end UI changes.
October 2024 – February 2025 (Ongoing)
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.
Users felt that there weren't enough ways in which to customise their notes and make it their own as one would on paper.
Some users had trouble syncing their notes across their devices to keep working on them as they need to.
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.
Some users are nervous that their notes aren't completely private and that someone else could easily access them without permission and cause chaos.
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.
Gloria's user journey map revealed that users would benefit greatly from features that would assist in collaboration and sharing notes.
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.
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.
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.
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.
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.
Unmoderated usability study (2 participants) & Moderated usability study (3 participants)
5 participants
South Africa, Cape Town (some remote)
10-15 mins/ participant
Half of the participants were confused about where to access their saved notes, therefore, accessing saved notes should be made more intuitive and clear.
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.
Half of the participants thought that buttons’ sizes should be increased, therefore, these buttons should be made more prominent through colour and size.
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.
I made use of colour combinations with sufficient contrast to make content readable for users with low vision or colour blindness.
Designing for mobile accessibility targets a broader audience, since the next million users will most likely access the internet via a smartphone connection
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.
“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
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.