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.

Desktop Image of Website Project
Cellphone After


April 2019 – February 2020


Lead UX Designer / Art Direction / Lead System Project


User Research, Sketching, Wireframing, prototyping


Tourist from USA and Europe  over 18 years old.


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

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



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


Green Tech

little variety of specialized family trips



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.


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

Persona - Emma image ropped

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, 


  • 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.


  • 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.


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.


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

Persona - Pierre-cropped

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


  • 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.


  • 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


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.

Persona - Emma image ropped

Emma Stone, 52 
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.


User Actions
Task Lists
Feeling Adjective
Improvement & Opportunities

Search on website about a bus service

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


They should be in top list


Choose the routes

  • Get into the bus site.
  • Click on routes.


The route page should be shown first instead homepage.


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.


There should be more space between lines.


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


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.

Persona - Pierre-cropped

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 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.


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.


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. 


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

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


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 ).

All paper Home Sketches
Home Sketches
Home - Final Design-a

Home Photoshop

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.


Busperu 4M Digital Sketch with payment system
Header and Body 1 - Especification
Body 2 - Especification
Body 3 Especification
Body 4 Especification
Footer - Especification

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.







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


4 Participants


Arequipa, Peru


10 – 15 minutes per participant

Usability Study: Findings


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


delete this section since its confusing


put all routes from the beginning with dynamic layout


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.


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.

Favorite Routes in Peru 1

Before Usability Study

After Usability Study

Here I added WhatsApp function


Before Usability Study


Before Usability Study

Mockups: Original Screen Size

here you can see  other important for this site

Routes and Tours

Routes and Tours









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.


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

Going Forward

  • Takeaways
  • Next Steps



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

UX Designer- Ruben Angeles

UX Projects

Fondo-4m Exoress Turismo Regional
Portada - Euroamerican Assitance

65% – Next Updated ( June 30, 2022)

Design 2U

Update Soon ( July 15, 2022)

Albina Salon Spa

Update Soon ( Aug 15, 2022)


International calls
+51 987295478

National Calls only on Whatsapp

[email protected]

Ir al contenido