top of page

Role

UI/UX Designer

Team

2 Designer
8 Developers

Tools

Adobe Photoshop
Adobe Illustrator
InVision 
Figma

Overview

Over the summer of 2017, I was part of a team of two designers and eight developers that restructured a B2B platform, which connects businesses with their customers. In response to the increasing complaints from platform users, it was determined that the entire system had to be redesigned to create a seamless user experience. 


In line with my non-disclosure agreement, confidential information has been withheld.

My Contributions

User Interviews 
Research
User Experience  
System design
Visual Design
Prototyping
Testing
Implementation

4.jpg

Problem Statement

The first beta release did not undergo usability testing. As a result, along with some technical difficulties, some of the features of the product were not understood by the customers, which resulted in low traffic and negative feedback. 

 

Our Goal: to identify the usability issues with the current beta release and determine what features should be prioritized for the next iteration of the product.

The Process

Process.png
Screen Shot 2021-12-24 at 11.40.05 PM.png

User Research

I conducted interviews with our primary users (account managers) to determine the challenges they encountered with the current beta release as well as to dig deeper into their needs and to evaluate the effectiveness of the testing measures.

Gaining insights

After collecting the recordings from the user interviews, I conducted affinity mapping with my teammate to synthesize the identified pain points. We categorized these issues by common themes and platforms' features.

Screen Shot 2022-01-03 at 11.17.29 PM.png

The usability issues were prioritized using a data-driven approach called the severity framework. Using the framework, we determined the severity score of a usability issue based on the three variables listed below:

 

Task criticality x impact x frequency = severity

  • Task criticality - how important is the task to the user? (1 = low, 5 = critical)

  • Impact - how much of an impact does this issue have on the user's task? (1 = suggestion, 5 = blocker)

  • Frequency (%) - how many times does this come up out of total participants?

Task Prioritization

In order to provide visibility into the key areas of the platform that need to be improved from a usability perspective, I classified these issues as broader epics. The insight was useful in prioritizing usability issues and determining the product roadmap. We decided that the first Epic we would prioritize would be Audience Wizard due to its severity, UX, and engineering effort required to rebuild it.

11 copy.jpg

Narrowing the Scope

The following concerns are derived from the interviews conducted with seven users of the current Audience wizard:

57% of users report difficulty using the configuration wizard

29% of users complained about the disabled Next button and the fact that the required fields were not highlighted.

29% of users missed field inputs due to a lack of visual hierarchy

 

I came up with the following potential solutions based on the problems identified:

  • Reducing the number of steps to minimize completion time

  • Making mandatory fields more visible and displaying error validation on the Next button. 

  • Establishing a clearer visual form hierarchy by grouping related fields together.

  • Standardizing the design and UI components for future wizards.

4.jpg
5.jpg

Wireframing the Solution 

Wireframe 2.jpg
Wireframe2.jpg
Wireframe3.png

Usability Testing

My work included conducting usability testing sessions with our primary users to evaluate whether the new designs would improve their experience. A script was written to include a scenario that asked the user to create a new Audience targeting females of all ages on mobile devices with manual bidding enabled.

As a result of the grouping of related fields, the usability session revealed that setting up a new Audience was significantly easier. It was now easier for the user to identify which forms they needed to complete since advanced settings were hidden under a collapsible toggle.

9.jpg
7.jpg
8.jpg

Developing the designs

Working closely with the Front End team, I spec'd out any missing interactions that were not depicted in the high-fidelity mockups. Upon implementation, I conducted a UX review of each front-end ticket to ensure it aligned with the designs.

Results & Impact

Since the implementation of the new rebuild of the Audience Wizard, we have seen a significant increase in customer satisfaction and positive feedback as well as a decline in the number of complaints lodged through the service desk.

 

Lesson Learned

  • Exploring the broader user journey through user interviews and surveys was a game-changer. As a result, I gained insight into the real motivation and mental model of our users, as well as the value most information and layout companies provide to them. 

  • Each user has a unique way of understanding information. Their level of familiarity with the company and its products will vary. Because of this, It is imperative that we understand the intended audience through user research and testing, as well as by offering multiple navigational routes.

  • Developing a strategic plan for launching an MVP makes it easier to deal with out-of-scope requests which may hinder the progress of the project.

  • Bringing engineering into the process as early as possible helps to reduce any rework later on as an understanding of the technical limitations upfront will help to info the design strategy.

bottom of page