Young man using web app

Designing useful experiences that support sales process

Colombia, 2018

Tags: Contextual interviews, Observation, Sketching, Google Analytics, CSS3, HTML5, Bootstrap4, Responsive design, Web, Usability testing



Sales consultants frequently receive the same case’s type (80%). Meanwhile, clients wait for assistance for a long time.


Young people visit service points, open to self service and new experiences with products and services.
114 32” Touch screens ELO ET3201L avalilable at service points around the country.


Design useful experiences, that support sales process at services points.


User research, User experience design, User Interface design and front end developer: Yoanna Centeno.
User research, User experience design and User Interface design: Minerva Lorenzo.

Project timeline: 3 months

4 weeks


2 weeks



2 weeks


3 weeks



How we did it?
– Observation at service points.
– Contextual interviews.
– Surveys.

We found that users…

– Can visit service points to know the news (60%), do payments (90%) and replace simcards (30%).
– They like to try out the exhibition smartphones and devices, because they want to know trends, and they feel curiosity about it, but many of them (85%) also didn’t know if they can interact with it.
– Want a personal experience when they visit the service points.
And sales consultants
– More than a half didn’t use touch screens to support sales process.
– Almost all of them don’t know how to use touch screens.

Based on research, we identified three key people involved in the experience

Andres sales consultant

Sales consultant


Andrés is a proactive sales consultant who needs up to date sales tools, because he wants to offer better experiences to his customers.

Natalia customer



Natalia is a tech student and worker who needs interactive tools to experience new products and services at service points, because they wasn’t to wait for personal assistance.

Carla B2B consultant

Customer B2B


Carla is a shopping analyst who needs intuitive navigation tool with complete information because they want to know the offer of services and corporate solutions quickly.

The solution

Ideation process
Visual experimentation
Working solution

Design and developing

– Paper sketching and wireframing.
– Adobe Photoshop and Adobe XD for prototyping.
– Testing XD prototypes with users.
– We iterated on designs to fit them to users needs.

Frontend developing
– HTML 5.
– Bootstrap 4.
– CSS3.
– JavaScript.

After launch, we observed the Google Analytics data to continue improving the solution.

We try to inspire the experience of the solution on mobile phones, taking advantage of the screens design.

– Animated hamburguer menu.
– Also, we made a responsive solution, because screens already was at service points around the country, some in portrait mode and others landscape mode.
– We made the solution responsive using web technology as Bootstrap 4 and CSS 3.

Product in portrait and landscape version

Challenge: Data may vary according to the area of the country or time.

Info changes we used variables

We insert variables in the web layout from an existing module, to a remote administrator could change data without affecting the design.

We used scripts to segment content according to the area, with other technologies as JavaScript, PostgreSQL and JSon.

Challenge: We find basic and savvy users, referring to technical knowledge about mobile phones.

Web app menu

– We made a main section about mobile phones, because on 65% of their visits, users are looking for what’s new about mobile phones and devices.

Interaction with the product

– Users can explore by brand,
– And see basic characteristics like screen size and storage, but savvy users also can see technical details, enough to make a comparison or buy

Interactive menu

Testing and iteration

– We thought that implementing interactive software on screens might not be obvious to users and sales consultants.
– In fact that it was. Based on data from Google Analytics, we were able to see low interaction in the first implementation phase.
– The best solution in that moment was to suggest interaction to users through reels and animated buttons, so the interaction increased by 35%.

Testing results

What’s next

A digital product never be complete or finished, because users needs, technology or even business needs may change, so it’s necessary
– On this solution we could to know valuable interaction data, as the most visited pages, time on sessions, quantity of interactions, and more, so we can continue observing data from Google Analytics to analize the users behavior and keep adjusting the solution.
– Include search buttons for products and services.
– Conduct studies to consider new functionalities integration as payments, user account access or purchase buttons for plans and services.