About the project

Duration
  • August 2021
My role
  • UX Designer
  • UI Designer
  • Web Analyst
Team members
Tools
  • Pen and paper
  • Adobe XD
  • Google Analytics
  • Google Tag Manager
Deliverables
  • Hi-fi interactive prototype
  • Analytics report

Summary

TekSavvy is a Canadian service provider, with their portal hitting approximately 30,000 monthly with several functions to change or add new services, make payments, as well as get notification on the latest blog news and promotions.

The R&D department noticed that it was necessary to give more prominence to the notifications area, as this area was hidden among the other overview features.

Discover

— ANALYTICS

Where's the data?

From the start, the main challenge was finding enough data to be able to monitor the current state of the site and to follow possible changes to understand if the goals would be reached.

The portal had the Google Analytics Universal tool; however, it did not get much information since the website was made in angular and did not have dynamic URLs. So, my first task was to implement the new version (GA4) and create events using the Google Tag Manager Tool to be able to monitor the traffic based on the site code, instead of the URL.

I added about 50 tags and triggers to be able to collect around 1 month worth of data before deploying the new version.

— COMPETITOR ANALYSIS

Finally, got some info!

With access to data on the most requested pages and services through the portal and telephone, I was able to pinpoint the higher priority targets.

Competitors' portals were also analyzed to understand how they distribute the amount of information given to the users.

Define

— BRAINSTORM

Creating hypotheses

I was able to identify some problems regarding the current layout.

1. Slider banner

The point that drew the most attention on the site was a side banner, which did not always change; therefore, there was no need to be 100% prominent. In addition to causing problems with the page load speed

2. Lack of service's info

It only showed the information for the home internet service. If the user had a telephone or TV service, they would only be able to view the service by clicking on the side menu.

3. Hidden notifications

Notifications are displayed below the banner, making it the last thing to be noticed on the site, and it's only viewable on the overview page.

4. Support

Many people turn to the portal when they need assistance, but there is no quick menu to access self-help articles.

5. How to access e-mail?

Many people seek access to e-mail; however, they need to go through 3 pages to get to it.

6. Loading...

The site took a long time to load due to the amount of information it generated on the overview. And even after loading it didn't get any feedback from the system, which seemed to be an error.

— SKETCHES, WIREFRAMES & PROTOTYPE

Putting it all on paper

After defining some simple goals based on the presented hypotheses, it was time to start designing the structure that would achieve them.

1. Proposed layout

The brand’s guidelines were followed to keep the layout youthful and modern.

Sketch + Lo-Fi wireframe
— USABILITY TESTING

But what do our users think?

We selected some users who had previous experience using delivery applications to test the flow of the new functions.

At first, we just tested navigating through the application and noticing the user's impressions without a defined goal; however, it failed due to the lack of goal. We then ran the tests with a list of tasks and success criteria according to the doubts we had regarding the layout and flow.

There were 4 tests in total with very interesting results. We listed all the insights gathered and defined which changes carried more weight in the user experience, which required the client’s approval, and which would require more time to develop, leaving it/them for the next update. Some of the changes according to the insights:

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

2. All users had doubts about the option of a single or double burger.

Solution: Better specified what it meant below the title.

3. Users liked the favourites feature, but would rather have “order again” instead of “order”.

Solution: Changed the button.

4. Users didn't think it was important to see the bag all the time or at least have a small icon that won't get in the way.

Solution: Inserted a full bag icon at the bottom of the navigation bar.

5. The menu display mode button is confusing, and looks like a filter.

Solution: Changed button format.

6. Users did not understand the list of benefits by category.

Solution: Inserted more information about benefits to the description.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

1. Most users did not find it important to put a name on the card since most have only one card.

Solution: Placed the card name field as an option at the end of the form.

Production

— ANNOTATED WIREFRAMES

Almost at the end of the project!

After reviewing the entire document, and creating all dialog boxes and error messages, we documented all application’s screens and added details to each function to better guide the developers.

— STYLE GUIDE

Applying interface design

We also created a style guide with the best practices for user interface (UI) design, providing a more consistent and clean design in line with the branding.

Style Guide
Wireframe annotations

— REVIEW

Is it working?

A few weeks later, the developers sent us the application under development for some Quality Assurance (QA) sessions, where we audited and evaluated the entire application and made notes on improvements separated by functionality and interface, highlighting the priority of each of the listed points.

QA Review presentation

Conclusion

Though the project was delivered later than expected, it has successfully launched and has hundreds of active users. Additionally, the loyalty program proved to be a success among Cabana’s customers.

This project provided a lot of learning opportunities, especially with the usability test; we managed to find incredible insights to improve usability with just a few user testers.

You can find the app on the apple store.