Overview
I started this college project in 2020. The task began as a UX project of redesigning a website. I worked on this with Alejandra Vargas, who previously did the research later used in this project to define the MVP and deliverables. We chose a Costa Rican company, Telecable, dedicated to selling internet and TV services for the project. The idea was to finish redesigning their online branch, where the users pay, check for receipts, etc., plus some new services we added a year ago.
A year after the UX part, I decided to work solo on the UI (Alejandra wasn’t interested in continuing the project) by making a style guide to implement on the wireframes.
- Client: Telecable.
- Scope: Telecable's clients and employees from the customer service department.
- Project Date:UX: From May 2020 to June 2020. UI: From September 2021 to November 2021.
- Role: UX and UI.
Problem statement
Telecable was having internal problems that translated into bad customer service, terrible public image, and angry clients. The communication between departments is lacking, and they always end up with tons of calls, emails, and chat complaints. For the clients, fault reporting is total hell, and many times they ask for a technician, and they never come. So angry clients call to complain to the agents or to cancel their contracts.
Problem statement
Telecable has internal problems that translate into poor customer service, terrible public image, and angry clients. The communication between departments is lacking, and they always end up with tons of calls, emails, and chat complaints. For the clients, fault reporting is total hell, and many times they ask for a technician, and they never come. So angry clients call to complain to the agents or to cancel their contracts.
Solution
Based on the MVP, we decided to improve the online branch and help chats to enhance the customers’ service directly. Translating this project to an improved experience for clients and in exchange, the company will get a better public image and reduce their client losses.
Solution
Based on the MVP, we decided to improve the online branch and help chats to enhance the customers’ service directly. Translating this project to an improved experience for clients and in exchange, the company will get a better public image and reduce their client losses.
Roles and responsibilities
- We noticed that they do not touch the subject of breakdowns and reports that customers have made. In general, clients cannot follow up on their reports unless they are calling the call center.
- There is a lack of clarity in the accessibility of the content.
- The site is not attractive and, although the main site is outside the MVP, it is necessary to provide further visibility to a CTA that redirects to the online branch.
Insights
All the insights were based on the research results, interviews, and surveys. After completing all, my team-mates and I analyzed all the data that led us to fascinating data like:
- Millennials don't like the content the stakeholder uses for their social media (the only way they still have to reach potential new clients).
- Centennials are more receptive to the content, but just 51%. The rest of the people we interviewed also think the brand lacks professionalism.
- The logo needs a redesign. People didn't respond well to it, and also, from a design point of view, it has a lot of problems, like having so much color. So even having three sub-brands, it isn't having coherence between all.
- People didn't like the "Spanglish" content.
- They should stop using bad words in their communication (another big red flag for potential users looking for a psychologist).
- The photos need more proffesionalism.
Current online design
Here you can see some screens from the current design of the online branch, and we planned to add to improve the customer experience:
- We noticed that they do not touch the subject of breakdowns and reports that customers have made. In general, clients cannot follow up on their reports unless they are calling the call center.
- There is a lack of clarity in the accessibility of the content.
- The site is not attractive and, although the main site is outside the MVP, it is necessary to provide further visibility to a CTA that redirects to the online branch.
Current online design
Here you can see some screens from the current design of the online branch, and we planned to add to improve the costumer’s experience.
- We noticed that they do not touch the subject of breakdowns and reports that customers have made. In general, clients cannot follow up on their reports unless they are calling the call center.
- There is a lack of clarity in the accessibility of the content.
- The site is not attractive and, although the main site is outside the MVP, it is necessary to provide further visibility to a CTA that redirects to the online branch.
All deliverables are best viewed on desktop devices.
Deliverables
When we had the MVP set, the next step was to start with the UX (with Alejandra) and UI (by myself) tools that helped us recognize the best way to have a favorable outcome for the project.
Some deliverables are still in Spanish. I’m working on translating them into English soon.
All deliverables are best viewed on desktop devices.
We worked on four strategic personas for this project, divided into two types of customers, the agents who take the reports and the technicians who visit the customers’ homes.
We worked on the scope canvas to better understand what we needed to consider in the project and thus give an appropriate approach to redesigning the online branch.
The site map was divided into two sections. One is the online branch, and the other is for the redirection this branch will have to the main website.
The wireframes evolved during the project through the user testings and thus gave way to the final result. Details such as the position of elements and taking into account the ergonomics of the user’s hand, primarily right-handed because they are the majority, and also taking into account that in Costa Rica, women do not usually have large hands.
The ones in red are the first version of the wireframes, and the other ones are the changes applied after the user testings.
Before proceeding to the UI, I started working on a quick moldboard to understand what kind of image I wanted to give the online branch because the current design I think isn’t working as well as it should be.
Here’s the style guide I used after having a better idea of what I wanted to work for in the UI design. I didn’t work this as a design system because the site was tiny, and I didn’t consider it necessary.
To make this site more inclusive to most users, I checked the colors for color blind people and did the contrast check before assigning the final color palette. Next, considering the problem red and green have in alerts in forms, I added icons, so users who don’t see those colors will know something’s going on. Also, I considered some changes like not using all caps fonts, following the patterns of big companies like Apple, Microsoft, Airbnb, and many more. With this, it’s easier for users to read the texts.
We worked on four strategic personas for this project, divided into two types of customers, the agents who take the reports and the technicians who visit the customers’ homes.
We worked on the scope canvas to better understand what we needed to consider in the project and thus give an appropriate approach to redesigning the online branch.
The site map was divided into two sections. One is the online branch, and the other is for the redirection this branch will have to the main website.
The wireframes evolved during the project through the user testings and thus gave way to the final result. Details such as the position of elements and taking into account the ergonomics of the user’s hand, primarily right-handed because they are the majority, and also taking into account that in Costa Rica, women do not usually have large hands.
The ones in red are the first version of the wireframes, and the other ones are the changes applied after the user testings.
Before proceeding to the UI, I started working on a quick moldboard to understand what kind of image I wanted to give the online branch because the current design I think isn’t working as well as it should be.
Here’s the style guide I used after having a better idea of what I wanted to work for in the UI design. I didn’t work this as a design system because the site was tiny, and I didn’t consider it necessary.
To make this site more inclusive to most users, I checked the colors for color blind people and did the contrast check before assigning the final color palette. Next, considering the problem red and green have in alerts in forms, I added icons, so users who don’t see those colors will know something’s going on. Also, I considered some changes like not using all caps fonts, following the patterns of big companies like Apple, Microsoft, Airbnb, and many more. With this, it’s easier for users to read the texts.
Final results: UI Design
Here we can see the difference between the first wireframes vs. the final design after the corrections of the user testing.
Some upgrades in the design were:
- A bit of UX writing.
- After studying more accessibility, I learned that legibility shouldn't use everything in all caps.
- To the left align most texts to improve readability.
- Keep the users' mental patterns when using this kind of interface.
- Change the position of elements to adjust to the majority of hand sizes, based on small Costa Rican hands.
Watch more screens
Conclusions
Telecable needs improvement in the communication between departments. Many clients have problems when they report issues, and they fall through the cracks. That’s why redesigning the online branch is a safe way to reduce the calls and help customers make their lives easier. We managed to simplify how they get the needed information and have a backup to follow their cases. Also, improving the UX and UI of the page will make it more usable and better looking, so it’ll feel more professional and reliable. `
Lessons learned
After working on this project, I realized a lot of small details we as designers need to keep in mind like it is always better to have previous research and data to back up your design decisions. For this particular project, having Alejandra’s investigation was a big help to come quickly with the design deliverables. Also, for me is crucial as a designer to make the products accessible and usable as much as possible to most users. So, it’s imperative to do the contrast check (to see if it’s minimum in AA); use the correct font sizes to help users with vision problems; constantly learn better ways to make your design easier to use and attractive to your customers.
If you have feedback, want to collaborate, or need freelance work, feel free to contact me.