The Challenge
This student project challenged us to assess the user experience on the Toronto Transit Commission (TTC) website.
Based on our research and findings, we were tasked with reorganizing the website's information architecture and deliver a high fidelity minimal viable prototype (MVP) with the following functionalities: (1) pricing information (2) trip planner (3) service alerts (4) schedules (5) tourism info.
Our goal is to deliver an intuitive UI, and allow our users to organically navigate through informational tasks.
The Research
The study consisted of eight participants, each representing a different user group. Participants tasked with taking part in card sorting activities that allowed them to share their thoughts on the information architecture of the website, particularly information hierarchy and organization. Our team also engaged in task observations, in which we observed users carry out various tasks on the website, followed by a semi-structured interview where users were encouraged to share their opinions and recommendations.
We converged the data from our user research using affinity diagrams. The information was then categorized thematically, allowing us to isolate main use pain points and concerns with the current TTC website.
The Design (Lo-Fidelity)
We began the design process by sorting through our previous user research using affinity diagrams. Information provided to us by users was then categorized thematically, allowing us to isolate main user pain points and concerns with the current TTC website.
Based on the results of the card sorting activity and affinity diagram, we created sketches of the new UI's functions and asked users to provide feedback. The recommendations were then incorporated into our low fidelity prototype, which underwent extensive usability testing.
The Design (Hi-Fidelity)
Following the lo-fidelity wireframes, functions were tested and adjusted in iteration prior to beginning the design of the high fidelity prototype.
The high fidelity prototype design was based on the final iteration of the low fidelity wireframe, and incorporated feedback from various stages of usability testing. The high fidelity prototype included the relevant UI functions, polished information architecture, and a mockup of final graphical designs (consistent with TTC colors). The high fidelity prototype was sent for usability testing in order to make final adjustments, and feedback was recorded for future changes.
