AccuRide
AccuRide is a project I did for my Human-Computer Interaction Class. AccuRide is a bus tracking application that uses user-generated location data to provide better, more accurate bus tracking for its users. The point of this project is to do hands-on HCI design for a product, from conception to final product. I created AccuRide, from need-finding and ideation to final interactive website coding.
AccuRide went through all the stages of conceiving a product from nothing. Over the course of 10 weeks, I brought AccuRide into fruition complete with need-finding, ideation, sketching, prototyping, information design, visual design, interaction design, user testing, and finally coding in HTML, CSS, and JavaScript.
AccuRide’s UI prototype
Final coded website
Processes
Processes
NEED-FINDING
I went to a few bus stations in La Jolla, and observed the behaviors of bus riders. I took notes of their behaviors and conducted brief interviews with 30 of them.
I used the data I gathered to identify three needs of La Jolla bus riders.
my notes in the field
CONCEPTION
I used three ideation methods to brainstorm ideas for a potential product that could address the needs of my users. I sketched a large number of these ideas.
Some of my sketches
From these sketches, I conceived the idea of an app that would take user-generate location data to help provide better tracking of buses, and better trip planning for the users.
I then curated a number of elements that I think should be included in this product. I put them onto cards and asked some of my potential users to arrange them in a way that makes sense to them. From these arrangements, I designed the architecture of my app.
Cards with elements on them and two arrangements done by potential users.
Architecture design based on user input.
From the architecture design, I created a low-fidelity prototype on paper.
HIGH-FIDELITY PROTOTYPE
From the low-fidelity prototype, I created an interactive high-fidelity prototype with Figma.
Before the prototyping process, I decided the color palette and brand feel of my product. I decided on a solid blue color with a yellow to red gradient on top, reminiscent of vintage motorsport style. I hope this color scheme makes my brand feel both credible and speedy.
This high-fidelity prototype of AccuRide went through at least 3 rounds of critique and updates. I also conducted usability testing on it.
The method of usability testing I conducted was moderated user testing. I gave my users three tasks to complete and noted the difficulties some of my users had with the UI. I then used these notes to simplify and improve the prototype.
Some pages from AccuRide’s high-fidelity prototype.
CODING WEBSITE
Finally, I coded an interactive website for AccuRide following the high-fidelity prototype. I used my skills in coding HTML, CSS, and JavaScript to create this website.
Some screenshots from the website.