Ads Dashboard Redesign

Overview

To a digital ads agency, daily and monthly ads performance is quite crucial to the account managers, who need to prepare daily performance report to the B2B clients, like e-commerce, media, or real estate companies. The clients usually expect to know whether the ads they bought are positive to their online stores or product sales. Therefore, not only the agency but also the B2B clients would like to obtain the up-to-date information efficiently.

The platform originally exists for agency use only, without well-designed user flow and interface. For example, if you first login, you may not know how to find the information you want, since there is no clear landing user flow and guideline. However, this year the organization plans to expand the market to the B2B users as well. Accordingly, I was responsible for clarifying the user needs and redesigning the product based on user research and usability test.

Design Role 

  • User Experience Research and Design
  • User Interface Design (UI)
  • Product Management

Timeline

Jan. 2017~April. 2017

Background

As one of the major digital ads agency in Taiwan, providing an easy-to-use B2B platform to the clients is quite crucial. The experience of using the dashboard would influence the businesses’ intention to buy ads from the company. To understand the businesses’ user needs, I conducted online questionnaires and face-to-face interviews with the target users. It was amazing that only seldom users were satisfied with the original platform. Around 70% users thought there was still big space to improve.

I was responsible for the user experience research and UI design, and co-worked with 1 front-end and 2 back-end developers. The MVP (Minimum Viable Product) was expected to be delivered in 3 months.

Brand Identity

Since this product would be B2B-oriented, it is expected to deliver a professional image to the users with a clear roadmap. The complicated information on the dashboard also needs to be presented logically and simplified to be easily understood. The style is set to be smart and fresh, so I collected materials which can deliver the image.

 

Brand Design

2

1.png

Brand Design

User Behaviors

Based on user interviews and usability test with the current users, There is a number of user behaviors we found as below:

  1. It is quite hard for first users to start use the dashboard, since there is no obvious guidelines and user flow.
  2. The wording and main features are too complicated for users to understand.
  3. Actually the account managers only use some of the main features but seldom notice the others.
  4. There are many layers for users to go into the main pages.

Above all are major behaviors we found after user testing. After discussion and market analysis, the team decided to improve and redesign the product as below:

  • Rebranding the website with smart and professional characters.
  • Simplifying the login flow and give clear instructions for first users.
  • Redesigning wording and user flows to be easily understood.
  • Simplifying the dashboard structure by eliminating heavy layers.

Based on the direction, the product is redesigned as the following sitemap and wireframe. The layers are narrowed down to three major layers: home, list, and detail.

sitemap.png

Sitemap

 

As mentioned above, we focused on three areas of redesign, home dashboard, list view, and detail pages to simplify the website’s structure. We used low-fidelity prototypes to collect user feedbacks, which are helpful in enabling early visualization of alternative design solutions and provoke innovation and improvement.

Based on the rough sketches, our business users felt free to give feedbacks and recommendations. They were  more willing to speak out their ideas during the brainstorming stage. For instance, the most useful features of the website were data tracking, orders and performance report. Before user testing, we assumed that they used most of the functions, but actually they only focused on some of them.

Moreover, originally there are more than 3 steps to find the major pages, which is time-consuming for the account manager to compile data and demonstrate to the clients. The original design is without intuition and affordance, which means that the product is hard to be understood without manual instructions. Therefore, the structure are reconstructed as below to highlight the major features.

user_flow.png

Low-fidelity Wireframes

Interface Design

The product is expected to deliver smart, bright, and professional images, and also needs to follow the corporate identity system. Therefore, I utilized the company’s original system and try to make it lighter and brighter as the following interface design. As you can see, I only kept the most important information on the home page by eliminating heavy layers and simplifying user flow.

The interface design is based on the low-fidelity prototypes in the early stage. The high-fidelity prototypes are more realistic with true representation of the user interface, which can be more effective to demonstrate the product concept to the management team. You can see the interface design of login, home, and list view of the platform, with the redesigned icons especially for the professional dashboard.

4

High-fidelity Mockup

Achievement & Reflection 

The design of a B2B product is somewhat different from the B2C one. Since the users were more business-oriented, we, as the designer, needed to understand their professional needs and backgrounds before going directly into the design process.

As mentioned above, we were uncertain about the features that were crucial to the users before interviewing with them. Moreover, the design process was also new to the organization since they did not apply any design process into software development before. As a result, I had to take charge of the whole design process from user interview and research, interface design, to product management. The communication with different teams to define the product scope was usually tiring but crucial, and my suggestions would influence the team’s major direction.

To conclude, the redesign project solves these issues:
  • Collecting major business users’ preference and feedbacks.
  • Simplifying and highlighting the major features of the product.
  • Enhancing the professional image of the platform.
  • Decreasing time spent on data collection.

This project is still ongoing and will go into the development stage by the engineer team. Above all were the first stage UI concept and UX improvement, and the platform will evolve with time and user feedbacks in the next iteration.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s