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

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.

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

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.

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.

I created a system to help users have a better navigation throughout the site.

With the design plan, we created our third prototype to run another set of user tests to see if we accomplished the goals of our design. From this, we made small changes and created our final prototype with HTML, CSS5, and Javascript. We also implemented logic to the website to save data and generate information to make the website seem up to date. With this, we ran our final user tests to confirm that we have accomplished our goals for this project. As our final step, we created a report that explains what we have improved and recommends our client for further improvements.

To access the final report, click here!

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.