Compass Card Website

UX Research Project

Download Presentation Compass Card UX Project

The Project

In this hypothetical UX Project, a team of us were tasked in analyzing the current Compass Card website, and determining what could be improved in terms of user experience. The content strategy included four steps:

  1. 1. Research and Goals
  2. 2. Personas and Empathy Maps
  3. 3. Quantative content audit, analysis, and content maps
  4. 4. Information architecture, scenarios, and content models

The Proposal

Talking to people about the Compass card website, and from personal experience, the number one reason people visit the website is to add a value to their card. Whether the user has already made purchases on the site before, or someone is joining the system for the very first time, our ultimate goal has always been to make each and every process as simple and effortless as possible. For an experienced user, an example of convenient design that is helpful is for customers to use “Quick Add” and select a preset payment amount that will lead them directly to payment options. On the other hand, the addition of an “Add Custom Value” field allows less frequent or new customers add a specific amount of money to their Compass card.

Regarding the design aspect of the form our main goal was to make it mobile first. Through our surveys we also discovered that over 60% of users only access the website through their phone, and while they are actively on the go. Therefore the design of the website had to be clear, large enough to navigate using fingers, and comfortable to interact with using only one hand. In order to achieve this we changed the colour scheme to be brighter, more colourful, and organized in a way that allows the eye to move naturally around the web page in order to allow better understanding of the process.

For example, by making buttons and links orange and label text dark blue, initial attention is drawn to the areas that need to be filled out rather than to the text, and thus users automatically understand what steps need to be taken to complete each form. Also, by increasing the size of links and buttons their purpose became more obvious for users, and they were easier for users to click on with thumbs.

Overall, through minor styling changes and additions to the form process we were able to increase the speed and efficiency of completing the reload process on the compass card website. By creating a colourful, clear, and calming visual design, we were able to give users a sense of friendliness rather than stress or irritation, as they would rather more commonly experience when filling the form out. To download full presentation click here.