User research, UI&UX Design, Branding
The goal of the project was to redesign the math tutoring website, Helpster, for our client, Arizona State University. The purpose of the website was to connect high school students to math tutors through a forum. The constraints were focusing on our limited target users, which were high school students. We designed and conducted multiple user tests and analyzed competing websites. I also took charge of the graphic design aspect of this project, making sure that the aesthetics of the website targeted high school students. Overall, this project was successful in improving the aesthetics and usability of the website, proven by the user tests. The final outcome was a hi-fidelity redesigned prototype with implemented logic. My role was to conduct user tests, analyze data, redesign the user experience of Helpster, create and implement wireframes, and design a visual system. This was a 3 months long project working with a partner, Brian Xu.
Forum style community. --- * Access all questions right away * Tag system
Simple login process. --- * friendly instructions
Problem analyzing process
Heuristic evaluations: Completed using Nielson's 10 usability heuristics as our factors and CMU HCII's heuristic evaluation form as guidance User tests: Conducted usability tests with 5 high school students to understand how a typical user may use the site and what other problems may occur with a typical user Competitive analysis: Completed 3 competitive analysis to find features that are working on other sites that the current site does not have
This is an affinity digram exercise that we created to organize problems and prioritize imminent ones.
Problem: Difficult navigation Poor organization system Lack of instructions To access the usability aspect report, click here!
Navigation bar: Only consists of very important features of the site to give the users an easy access at all times(all questions, my questions, help center, and user profile) Tag system: To organize the posts with different categories, and available as the first thing on the all questions page Instructions: Explanation of what each function does and what the user should do
Iterate, iterate, iterate.
With these solutions, created a low fidelity prototype with a prototyping application called Axure. With the prototype, we conducted a set of user tests with five high school students. From this, we found a number of ways to improve the prototype. After some changes, we conducted another set of user tests to make sure we cover all of the usability problems that were found in the beginning. We made around 3 different iterative processes.
User-friendly visual system
Things I considered: Target audience: In order to appeal to high school students, I used DinPro as my font because it communicated "modern" and "friendly" in the user research. Readability: I wanted to make sure the readers access information in a clear way. I used a non-white color as the background color to give more comfort to the eyes. Hierarchy: I created a system to help users have a better navigation throughout the site.
After completing the project, I went back and tried to find places I could improve on. One of the aspects I found was the homepage design. I felt that while it describes the websites purpose and how it works, it still did not fully invite the high school students to use the website. I feel that improving the homepage will really bring the high school students to feel welcomed and comfortable to use the site.