logo

Compass Card

User Experience, User Interface DesignWireframes | PS | AI

  • Working in a team of 4, we were asked to find the user-experience related issues on the current compass card website and redesign the site.
  • The project was separated in two parts Content Strategy and Prototype. The content strategy was developed in a collaborative effort of four team members. The individual component consisted of creating a functioning prototype, style guide and style tile.
  • Project Length: 2 Weeks
  • Summary

    The goal of this project was to redesign the existing website for Compass, the public transit company in Vancouver BC. The focus of the project was addressing the UPASS for studentsin the current website. The system lacks a painless method for student to load UPASS onto their tap card. Based on the goals of Compass, my final product attempted to enhance the user experience of the existing site.

    VIEW THE STRATEGY PDF

    Content Strategy

    For the strategy, we first began with a design sprint to generate as many ideas as possible in order to understand, define and decide on the direction of our design. From there, we established goals, target audiences and interviewed users to develop fact based personas and empathy maps. The strategy also includes an information architecture and competitive gap analysis about the current Compass website

    Proposal

    The proposal brings together key elements to redesign the current Compass Card website with a focus on the “Include U-Pass” section.The proposed redesign would focus on a clean, modern approach and would include the change of colors and layout of the overall site.

    Process of Compass Card Website

    The crucial step in building a successful product was identifying the goals of Compass, and what they hoped to achieve with the card system. With this new proposal the audience will be increased when students load their monthly UPass on the same Compass card's website instead of going Upasstranslink.ca.I decided that creating an mobile prototype would be the best way to achieve these goals. The target audience of Compass ridership is students between the ages of 20-30. Given that most of these people have smartphones, a simple responsive mobile site would easily allow the target ridership to load Upass onto their tap card.

    Wireframes

    After reaching the decision and targeting the problem, I began to organize the content to figure out the most easy way to move through each process. I wanted to offer the user a easy experience about any necessary task.To achieve this target, I made wireframes for the new design which can take user along with them. User can experience the most friendly atmosphere.

    home signin upasslogin linkupass upass signout

    Style-Tile

    The style-tile and style-guide was part of prototype which brings the visual reference of the site and also convey the voice and tone of site to its users.

    style-tile

    Style-Guide

    style-guide

    Responsive-Prototype

    Because majority of people use their phone for surfing the things online, prototype for mobile was necessary part of project.

    responsive-prototype