‍

Project Overview

This project was independently developed as a proposal to improve the transport service provided by Incofer, after identifying a communication gap between the service and its users. To address this, I propose the development of an architecture and graphic interface for a digital totem at the Incofer train station in Cartago.

‍

• Team: individual project
  
• My role: UX UI Designer.
• Date: Jan 2020 - Jun 2020.

‍

‍

‍

1. Research and interviews

To better understand the context where the product will be implemented, I conducted an observational study at the train station to examine user behavior and the environment. Additionally, for the interviews, I targeted individuals who are actively using the train services or have used them at least once in their lifetime.

‍

Observations:

• The information available at the station lacks a cohesive visual language and is presented on printed letter sheets, which is not an effective medium for conveying essential information.
• There is an absence of clear signage to guide users within the train station.
• Users seeking information tend to approach surrounding people or the station manager for assistance.

‍

‍

‍

‍

‍

2. Benchmarking

For benchmarking, I divided the research into two parts: totems and cell phone applications. For totems, I examined various functional designs and used the New York metro totem as a reference, as there is no similar tool in our country. For cell phone applications, I researched international examples with functionalities comparable to the one being developed.

‍

‍

‍

‍

3. Personas

The research revealed two distinct user types: the occasional user, comprising 35.4% of the total, and the recurrent user, making up 64.6%. These distinctions are based on their goals, tasks, and lifestyles.

‍

‍

‍

4. Analysis

A customer journey map was created to study the user experience during the service use. This experience is analyzed in two use cases based on the most prominent user types, highlighting the problems encountered during the process. Through this analysis, I established the initial information architecture based on the Pareto principle (80/20 rule).

‍

‍

‍

‍

‍

‍

3. Wireframes

Once the initial architecture is established, low-fidelity wireframes will be developed for testing.

‍

‍

‍

‍

5. Testing

The testing process revealed several issues:

• The information on the ticket page was not clear enough to understand the service. Correction: The content was changed to include more visual and concise information.
• Users were uncertain about the information on the "Tourist Areas and Services" page. Correction: I divided the information into two categories and updated the icons in the menu.

‍

‍

‍

6. Information architecture

After testing and refining the alpha architecture based on the findings, I was able to establish the final architecture.

‍

8. Look and feel

For this project, I sought a typeface that is both simple and highly legible, adaptable to various digital sizes. I selected Spartan typography, characterized by its geometric simplicity—based on circles, triangles, and rectangles. Its low contrast and uniform stroke widths ensure clarity and maintain a contemporary aesthetic across different digital platforms.

‍

7. Accessibility and color blindness study

At this point in the process, I developed an accessibility study to ensure the platform meets Level AA accessibility standards. Some key aspects considered are:

• Subtitles are provided for all content.
• Color is not the sole indicator used to identify functions.
• No content blinks more than three times per second.
• Titles clearly describe the subject of the content.
• Pages have focal points that are read in hierarchical order.
• Labels for names or icons are presented visibly.
• The language can be changed.
• High color contrast is maintained.
• The chromatic was analyzed to make sure it keeps the high levels of contrast in the different color blindness types.

‍

‍

‍

‍

‍

‍

‍

Improvements

One of the main improvements for this project is adjusting the use of yellow text. Instead of using yellow for body text, it is now reserved solely for branding purposes. Although the color contrast is initially checked for accessibility, it is equally important to ensure legibility against various backgrounds. Also, is recommended to apply usability testings once the platform is implemented.

‍