Case Study - 4M Express | UX Design | Graphic Design | AI

4M Express

- End to End UX Process to Avoid Drop Off Rates and Improve the Experience on Road -

UX / UI / Graphic Design / Systems

Regional Travel Tours on Bus in Peru

Arequipa, Chivay, Puno Cuzco the land of Incas and its marvelous culture, gastronomic adventures and beautiful landscapes can be enjoyed on a bus trip with previous stops in destinations full of nature, magic and splendor where the soul connects with the life of the place.

Date

April 2019 – February 2020

Role

Lead UX Designer / Art Direction / Lead System Project

Responsabilities

User Research, Sketching, Wireframing, prototyping

Audience

Tourist from USA and Europe over 18 years old.

Overview

The Problem

The company has been in the market for 10 years, new companies in the sector have gained ground with innovations in design, branding and positioning. Company sales are getting lower, their drop-off rates to the payment system are high, their customers complain about working in an unfriendly way with the environment and their business infrastructure is declining.

The Goal

Renew the brand to have a better communication, speeding up the payment process, bring them closer to technologies and ways of working friendly to the environment and design systems to improve the business infrastructure and processes.

Before the Redesign

Understanding the User

User Research
Persona
Problem Statement
User Journey Map
Competitive Audit
Main Focus

Due to a budget issue, a conventional User Research could not be carried out, for this reason the User research was carried out based on the emails of the users or customers along 3 years and identifying patterns through an affinity system, 2 main user groups were separated.

The first group is young Europeans who like green technology and healthy eating on a low budget. The second group is American adults who have a large budget and seek personalized attention.

The investigation of the first group revealed the need to opt for green technologies due to the continuous use of paper, while the second group revealed that the payment system was confusing and therefore they preferred to pay with cash.

The research also revealed a need for better commuting activities while others preferred fewer commuting stops.

User Research: Pain Points

1 Payment

Payment process through web is confusing and isn’t faster for recurring customers.

2 Green Tech

little variety of specialized family trips

3 Organization

Most of the sites do not have a profile system that helps parents and vloggers to save their preferences and have benefits

Persona: 1

Problem Statement

Emma Stone is an accountant who needs to go on a trip because she quickly stresses due to the lack of organization in her work.

EMMA STONE

”When a trip is perfect I feel truly full and grateful.”

Age: 52 years old
Education: Master Degree
Hometown: California, USA
Status: Married, two kids
Occupation: Accountant
Year Income Level: 30k yearly
Tech: Medium
Personality: Organized, Impatient,

Goals

Achieve de-stress from work and travel relaxed without worries.
Find trips where everyone can enjoy the experience.
Have photo or video memories of interesting places.

Frustrations

Lack of clarity about the characteristics of the tour.
A confusing reservation system.
When the tour is not what you expected
Lack of organization when families travel and must be in separate seats.
Little personalized assistance to passengers when they are on board.

Bio

Emma Stone is an accountant from the city of California who loves to go on trips with her life partner, and children. She loves it when the trip goes according to plan with her family. She gets frustrated when the payment system is confusing or the travel package is not as expected.

Pain Points

Confusing payment process
Lack of organization and customer service

Persona: 2

Problem Statement

Hans Jensen is a young man concerned for the environment who needs to find cheap and fast bus trips because he travels on a low budget.

HANS JENSEN

”Using so much paper in modern times of technology is a shame”

Age: 23 years old
Education: Bachelor’s Degree
Hometown: Dinamarca
Status: Single
Occupation: Seller
Year Income Level: 12k yearly
Tech Skills: High
Personality: Righteous, Funny, ”Green”, healthy, active

Goals

Enjoy a fast and reliable trip
Live new or different experiences and show it on their networks.
Get in touch with nature and the culture of the area.

Frustrations

Companies that do not care about caring for the environment, or use green technology.
When they make too many stops along the way.
No activities with technology or in social networks.
Boring and slow tourism

Bio

Hans Jensen is a young seller from the suburbs of Denmark who loves to travel light and cheap. He loves to show his travels through Instagram. He feels frustrated when he has no choice but to travel in a company that does not have a tendency to care for the environment, when they do not have much to offer and even worse if they make more than two stops along the way because he considers it boring and you want to get there fast.

Pain Points

Little commitment of companies to the environment and healthy food.
When a trip has too many stops it’s boring, unless there’s something more entertaining for everyone, you need to get there fast.

User Journey Map: EMMA

My Goal

My goal is to define how the travel ticket purchase process is usually done on the 4M Express website in this way to find opportunities and improvements.

Emma Stone, 52
Accountant
Scenario: Emma is on her holiday she has bought her ticket to travel to Cuzco, Peru and wants to travel by bus from Cuzco to Puno with a bus service.

Purchase

User Actions

Task Lists

Feeling Adjective

Improvement & Opportunities

Search

Search on website about a bus service

Browse on Website between Travel tours with bus services or just bus service.

Stressing

They should be in top list

Choose

Choose the routes

Get into the bus site.
Click on routes.

Boring

The route page should be shown first instead homepage.

Features

Look for the features of the travel

Choose between routes
Read route description.
Click on See More.
Scroll down while reading the features of the travel route.

Excited

There should be more space between lines.

Buy

Buy the ticket in the website

Re-read the features.
Add quantity.
Click on Add to cart.
Wait for the third party the payment system.
Add Personal info and click next.
Add Payment Info and click next.
Read Terms and Conditions and click next.
Re Read the chosen product and click next.
Click on Buy.

Frustrated, Tired, Unsecure

Here I get lost, this step should be easier

Confirmation

Confirm the purchasing

Wait for a response on mail.
Wait for a second confirmation response by mail, WhatsApp or phone.

Expectant, Relieved

it’s take too long until the bus service confirm the ticket.

User Journey Map: HANS

My Goal

My goal is to define how the passenger’s travel experience is organized when they have already purchased the product in this way to find opportunities and improvement.

Hans Jensen, 23
Seller / Influencer
Scenario: Hans has already bought his ticket to travel from Cuzco to Chivay expecting to arrive quickly.

On Board

User Actions

Task Lists

Feeling Adjective

Improvement & Opportunities

Wait

Wait until the bus arrive

Avoid carrying weapons or drugs in suitcases.
Be on time on the depart place.
Wait on the passenger line.

Inpatient, Nervous

There is not enough staff so the waiting feels longer.

Checking

Check the lugage and the travel features

While waiting the customer service check the luggage.
Once is checked the driver helps arranging all the luggages on the bus.

Boring, Tired

The route page should be shown first instead homepage.

Take a seat

Look for the features of the travel

sit in any seat.

Frustrated, Uncomfortable

Should be nice to choose my sit on the website.

Instruction

Guide about how the travel will be

Introduction to the team on the bus.
Survey on the bus.
Guidance about how to use all the features on the bus.
Guidance about the stops and the arrival time.

Angry, frustrated, Sad.

They should avoid the use of paper for the surveys.

Ride

Experience on the bus

A guide person who explains some of the places of the cities on the ride.
Stops along the way to see some nature and historical places.
Arriving to Chivay.

Boring, Happy

They should have a faster way to arrive to the location.

Competitive Audit

Main Focus

These actions were only part of a more complete audit in which I analyzed customer service in the store, through social networks, as well as other communications and an SEO analysis.
After these investigations, carry out a Project Management where I indicate the process.
Starting with the direction of Graphic Art, then the redesign with direction to the user experience in its purchase flow, complementation systems and a second post-improvement analysis.

Starting the Design

Sitemap
Paper Wireframes
Digital Wireframes
Low Fidelity Prototype
Usability Studies

Sitemap

The main goal was to define the services and avoid having pages without information or unnecessary, as well as highlighting their potential so that the objective is more quickly achieved.

Paper Wireframes

This is just a sample of a section “Home Page” where I made 4 sketches plus one pre-final refining design, marking the important sectors of each one with a star sign to define a single sample in a final sketch. Doing this same action for each important page (Trips, Services, Experience and Contact ).

Home Photoshop
Sketch

Due to the short time I decided to make a more visual sketch that almost looked like a final product in Photoshop. The important thing was to show the structure of the information and the color tones that the other pages would have in terms of structure and color.

Low Fidelity Prototype and Screen size variation(s)

After the initial design, several changes were made with the manager in terms of texts and platforms.
* Even when this is already code, it is not a final work.
At the time that this project was developed, the low fidelity prototype was in a hidden file in the hosting from where they could enter the other pages.

– The menu names were changed because they wanted to prevent people over 40 or 50 from getting confused.
– The basic logo was changed to the official logo.
– The number of years was changed, (initially they wanted to look younger) for the actual number of years in operation.
– The space for the payment platform was momentarily eliminated because it would be developed later when the entire stage of web design, positioning, definition of color and graphic art is finished.
– They decided to use designs recently acquired from Trip Advisor.
-The management decided to remove some of the dynamic designs that were shown in Favorite Routes
– The management considered that there would be no staff to develop the blog but that they wanted that section, so I decided to add a blog section exported from another page that would be updated automatically, noting that this would only help partially until they manage to have their own posts.
– Changed some footer sections to add Trip Advisor features.

Desktop

Tablet

Mobile

Usability Study: Parameters

The sales and the management team participated in the usability study, which was not in real time, for which I obtained the conclusions of the test the next day.

Study Type:

Unmoderated Usability Study

Participants:

4 Participants

Location

Arequipa, Peru

Length:

10 – 15 minutes per participant

Usability Study: Findings

Assistance

add a whatsapp icon to differentiate customer service from the main center

Blog

delete this section since its confusing

Location

put all routes from the beginning with dynamic layout

Landscapes

add landscapes instead of photos of the bus in the main slide

Refining the Design

Logo
High Fidelity Prototype
Accessibility

Returning to the Main Design

After defining the logo design, colors on different surfaces sizes, and media (I will update this info on March 30, 2022), I move on to the stage of coordinating the development of the payment system. Once its development was completed, the management coordinated that an additional payment system would be added, for which it had to change its design a bit, making a simple and clean format where two payment platforms could be observed from a single access.

Mockups

Based on the knowledge of the usability study, I made changes in the home section

Before Usability Study

After Usability Study

In this case, I eliminate tthe blog section and add again the dynamic design, while I was doing this managers wanted to add payment functions too.

Before Usability Study

After Usability Study

Here I added WhatsApp function

Before Usability Study

Mockups: Original Screen Size

here you can see other important for this site

Routes and Tours

Services

Gallery

Contact

Sitemap

Accessibility Considerations

I use heading with different sized text for clear visual hierarchy

I use color validated with WCAG which also helps to different buttons and in the checkout process

The design is focused on being responsive so the user can navigate on different kinds of screens

Update all the alt images and adjust all the SEO parameter so it helps to optimization on Google and also can fit screen readers.

Final Details

To provide greater speed to the site and make it look more secure, I moved the web page to a hosting that will provide better speed, positioning and make it more secure.

The improvements for the passenger in terms of working in a friendly way and reaching the destination faster were the following:

Digital Surveys

The paper surveys were changed for a survey in digital format on the web from which they could access from their mobiles.

Ecological Bus

In addition, an ecological bus was acquired, being from that moment the first in the tourist bus market with the aim of acquiring 3 more.

Ecological Wrappers

Ecological wrappers were implemented for food packaging.

Non-Stops

As for customers looking for faster trips without stops, a non-stop service was brought out.

Going Forward

Takeaways
Next Steps

Takeaways

Impact:

Complaints due to problems during payment were reduced by 100%, and the identification of the brand as a whole was improved.

What I learned:

That as long as there is a well-defined project management on the steps to follow, the variability with which some medium-sized companies handle tasks ceases to matter.

Next Steps

Design a system so that passengers can choose their seat on the bus.

Design a system to transfer passengers from one bus to another.

Design access for registered users.

Let's Connect

Thank you for reviewing my work on the 4M Express Website!
If you’d like to see more or would like to get in touch, my contact information is provided below:

Phone: +51 987 295 478
Email: [email protected]
website: www.svenangeles.com
Behance: https://www.behance.net/svenangeles
https://www.linkedin.com/in/ruben-angeles-85b26359/