UX Design project

Compass is Vancouver BC’s current transit fare system which involves a card that you can register or load to use on all transit. This prototype is a re-design of Compass Vancouver’s current website. It was created with the main goal: to eliminate confusion, and that students would only require using one website for the process of adding/loading UPass to their Compass card instead of using two different websites. For this project we were only supposed to come up with a prototype rather than making a website.

html icon css icon


For this project we developed a content strategy as a team, upon which I created the wireframes, style guide, style tile, and finally a functioning prototype. The new design is created for students who are looking to incorporate the U-Pass to their Compass card. Through this new design they possess the option to simply add and load their UPass from the Compass card website. This would mean they would only require using one website for this process instead of using two different websites, compasscard.ca and upass.ca. It is designed to emphasis simplicity, organization, and a warm greeting. Each section of the process is divided into a clear hierarchy and visual blocks. A newly introduced tab for UPass is used to provide a separate option for "UPass" when students sign into their account on compsscard.ca. To simplify the entire process for all users, I focused on using simple English language. All these changes were applied after completing a survey from students who use public transportation and the Compass card. About 50% of these students were finding the current process of adding the U-Pass to their card confusing. Although, this process will eventually become an easy routine through the passage of time, our mission was making the process for all existing and future students less complicated and more straight forward.

a screenshot of the wireframes and explanation of each box a screenshot of the wireframes and explanation of each box
a prototype of the final website wireframe styletile of the website, representing the color combination, typography, image use and buttons







a desktop mockup of the website
a screenshot showing the whole main page of the website in one glance