![](https://freight.cargo.site/t/original/i/0969a92d91f9f0daa704cd639509d51fe947a1baa5be19b350275e834fe45629/wide.png)
TUTOR ORIEL
Ux Ui Product Branding
Solo Project 8 Weeks 09/2022
Tutor Oriel is an online tutoring service for high school students. They were suffering from low engagement and account creation rates due to a confusing onboarding process and poor design. I devised a new layout strategy and rebrand.
I cleaned up the sign-up flow so that it was easy to follow. I designed it so that the users could explore the product before being asked to commit financially.
Cle
What is wrong with the site?
I used Nielson Norman Group’s 10 Usability Heuristics for User Interface Design to assess the state of the current site and break down the usability problems.
![](https://freight.cargo.site/t/original/i/dd2b9a6394a671f5c9de7215483289f129d110dd19ecd1ebc641567728c6d31b/Frame-85.png)
![](https://freight.cargo.site/t/original/i/a058040f5a1bf4e53cfe62686e11f69828578c3c4b1a413aa3996f616acbb0a1/Frame-86.png)
![](https://freight.cargo.site/t/original/i/bd595e0b60509c528a5ad5f1a90d40cc1868d7237bd91f160b27f9e8ccf84df9/Frame-89.png)
![](https://freight.cargo.site/t/original/i/7d29018ff8721556eb8526a35c931db576efc07b5331a1ea1ef67bd35d1c86f3/Frame-88.png)
![](https://freight.cargo.site/t/original/i/cb19ae86acd0d5eb4c97f64783e24e651cd8482843332e58a4459008e7d80340/Screenshot-2023-04-22-at-13.47.12.png)
I assigned scores to each of the 10 heuristics. Visibility of system status, user control and freedom and aesthetic and minimalist design scored worst.
![](https://freight.cargo.site/t/original/i/c848e11a538df788601af507c32af623c00816992d615892e289a1660c8b2c43/Frame-90.png)
I looked at competitors UX processes in my key issue areas to understand how other companies were tackling these issues. This research informed my system design.
![](https://freight.cargo.site/t/original/i/38d53ae076b3e26c77cb9c128fcfc61aa6656d8edf21b0d3bef1ed73b91ca7fe/ADJACENT.png)
How can it be fixed?
I began by loosely sketching potential UI layouts and system maps that would improve on the current model
![](https://freight.cargo.site/t/original/i/4f35f13a10e2f0e5795ff55b7f00736452efaa505b2059e10dca607f391d9c75/Frame-82.png)
I moved on to sketching on-screen and testing my designs and flows with users.
![](https://freight.cargo.site/t/original/i/cd21150f19117f97d0dc5dc1bae90e911d1110a39a757d4acd1edef1292b0e30/Frame-81.png)
![](https://freight.cargo.site/t/original/i/ac24bdd159dfbcfcf52c438bdd3c97737b3099af62e37599e16f3f47fc1aac80/Frame-79.png)
![](https://freight.cargo.site/t/original/i/5861027b6c3d027c1eae1eec33cbfcfc35ee1b426e15b854e2c06cefaa70d8c9/Frame-78.png)
![](https://freight.cargo.site/t/original/i/9dbec3b51e1521dbf4d0d9c801b03348e1dd71c224cc34e466da3efe2936b89b/Frame-80.png)
I user personas and journey maps to deepen my understanding of the problem and what would be required in the solution.
![](https://freight.cargo.site/t/original/i/3ea7e579f5a1cc77e2ef35103457e8a0f20f0a6156caa452fb1810adb38e5f33/Student-User-Journey.png)
Testing:
Which solution will work?
Which solution will work?
I tested on users who are in high school, college or work in the education field. I chose a range of ages, nationalities and backgrounds.
![](https://freight.cargo.site/t/original/i/e5b397d561fe8272f42b8e0f9b5b4fc2343467ba0ff1cf7bd436ff1d3359e058/Frame-97.png)
I recorded and transcribed my interviews. I then analysed the content and synthesised it. I annotated my prototype with the relevant sketches.
![](https://freight.cargo.site/t/original/i/b738d23f3549a922bc2083f5dfec3a29cec2ac81a5262aef7cf924e400e4dfd7/tut11.png)
Prototype:
What is the solution?
What is the solution?
I used a palette of bright colours and friendly copy as the majority of my target audience is highschool students. I tried to give the brand a scholastic feel by useing horizontal lines throughout the design to emulate copy books.
![](https://freight.cargo.site/t/original/i/b4f49dbad2a6fe01c16321d98324d766176a470d3e5b276d831cbd0ad0108ae8/Frame-104.png)
![](https://freight.cargo.site/t/original/i/94c859c169f84e4d017ead31859d9febcf053cffb4c78ad45ab4b8c375b3cd72/Frame-109.png)
![](https://freight.cargo.site/t/original/i/825d77f985bb7e2567f17ba872c4ad4b7673d560fa52a96f33fa21c6c543fd91/Frame-108.png)