👁 Project 3
👩💻 ABOUT THIS PROJECT
This is WEBSITE REDESIGN work. It is an ONLINE TUTORING PLATFORM trying to build a bridge between students and tutors. For this project, I need to figure out the problems of the original websites, which contain terrible user flow, bad visual design, etc. To solve these problems, I did heuristic analyses, interviews, and even usability tests and finally made a totally different version.
🎬 DESIGN PROCESS AND TIMELINE
😎 PROBLEM & SOLUTION
THE PROBLEM
😔 An unreasonable user flow
🙁 No error prevention
😩 Users are not able to select an ideal tutor
😫 A terrible visual design
THE SOLUTION
👩💻 A more reasonable flow
✏️ Add a filter to make students have an easier selection of the major and grades.
🕓 The function of selecting a specific time
👁 A better visual design
📝 PROBLEM STATEMENT
HOW MIGHT WE
make it easier for users
to select an ideal tutor
?
👩💻 USER PERSONA
👩💻 USER JOURNEY
✏️ SKETCHES
While sketching, I was trying to figure out the problems I made above: the flow and some detailed functions. In the user flow part, when doing the sketch and low-F prototype, I found there I made some repetition and also found that what I expected is not like what users’ ideas. I figured out this problem after I did several usability tests. Their feedback makes me feel open mind and find it important that we are not designing for ourselves but for every user group. This experience recommended me to ALWAYS BE IN THE USERS’ POSITION when designing, which is really beneficial for my design after that. Also, learning about synthesis is quite valuable for me.
👩💻 SITE MAP
✏️ USER FLOW
▶️ LOW-FI PROTOTYPE 1
👩💻 USABILITY TEST (PROTOTYPE 1)
▶️ LOW-FI PROTOTYPE 2
In this idea, I was trying to make full use of the space, which can reduce the useless space, so I divided the page into the left and right two parts.
👩💻 USABILITY TEST (PROTOTYPE 2)
Because Version 2 is so crowded visually, and most users preferred Version 1, so finally I selected the 1st version.
🎨 STYLE GUIDE
✅ HIGH-FI PROTOTYPE
HOME PAGE
SIGN UP/LOGIN PAGE
TUTOR PAGE
SCHEDULE
PAYMENT & SUCCESS
VIDEO
📑 CONCLUSION
Making this project step by step, I have a better understanding of the whole flow of making the website, and find it significant to focus more on user flow, which can be basic. Also, I can master many useful functions of using Figma, and learned to make prototypes and get improvements in iterations. It’s necessary to do usability tests and synthesis, and when doing design, just consider ourselves as the user.
In the next step, I can do more tests and add more detailed functions and interactions according to their feedback and comments.
In the next step, I can do more tests and add more detailed functions and interactions according to their feedback and comments.
Thank you for reading!
