HYFN8_Cover.jpg

HYFN8 – Case Study

  

The goal for HYFN8 is to make social marketers more efficient at delivering meaningful results for their business by bringing value to marketers along each step of their advertising journey, by creating unique solutions, improving efficiencies and innovating features set HYFN apart from the competition and be a true cross-channel platform.

A much needed re-boot for the product was inevitable; bloated and obsolete features, changing needs in the market and workflow inefficiencies required an investment to re-imagine the product. This prompted an organization shift where I would lead the newly created design team for our product division. Our task was to revamp the tool to focus more on the user needs of today and innovate the features that they will find useful tomorrow.

HYFN8_CaseStudy_UI.png

TEAM

The core design team was made up of myself and a senior level user experience designer. We worked closely with our product managers and Vice President of tech to bring the product to life. Our approach was to use a Human Centered Design process and keep our users at the forefront of our decision making.

I am responsible for the design vision & user experience for the product as well as hiring and managing the team. My role also included creating a workflow and process to help the design team collaborate with each other and with our other teams.

Previous User Interface

Previous User Interface

Early mockup to display what the interface could look to get buy-in from the stakeholders

Early mockup to display what the interface could look to get buy-in from the stakeholders

RESEARCH

Our research started with taking a look at the landscape and it gave us a better understanding of  the current state of the industry. We also interviewed and observed our current users to see what their main tasks and pain points were. In addition, we ran a survey on various topics to gather data that will help us in the design process.

KEY INSIGHTS

  • Our competitors mostly focused on Facebook only

  • 46.30% of users found the product somewhat satisfying, while only 12.80% found it very satisfying

  • 25% of users felt that the HYFN8 was unreliable

  • The most frustrating issues were: loading issues, slowness, lack of features, buggy and the UI is dark & clunky

  • 64.3% would like to access the tool with mobile devices to check on how campaigns are performing

 

THE USERS

We interviewed three main job functions. Client Services, Media Buyer (Ad Trafficker) and Analyst. Each used HYFN8 in a different way and we gathered a deeper understanding of their day-to-day relationship with the product. We received feedback on what is frustrating with the product as well as ideas to improve the product.

Example of the finding from the survey

Example of the finding from the survey

PRIMARY PERSONAS

Goals

  • Get accurate information to report to the client

  • Optimize spend by managing campaign budgets

  • Offer the clients insights based on campaign performance

Frustrations

  • HYFN8 is hard to navigate

  • Load times and bugs

  • Not being able to get data quickly and easily

 

SECONDARY PERSONAS

Goals

  • Explain to clients why they should use our managed service

  • Accessing metrics for sales materials

Frustrations

  • HYFN8 doesn't leave a great first impression

  • Pulling information is slow

  • Interface is intimidating

An example of one of the personas

CREATING A PLAN

Armed with user feedback and data, we started by streamlining the information architecture. The current structure was hard to navigate and cumbersome to use. To help us organize the information, we conducted a card sort to help us group features as well as audit the current IA. Our findings helped us structure the sitemap. Since the navigation issues of the site was one of the most common frustrations, we needed to get this right.

Katie_Sitemap_Short.jpg

Once we developed a sitemap we had a series of whiteboard sessions to mold the basic structure of the site. I then tasked the team to create versions of the campaign manager, which is the most used section of the app. We regrouped and discussed the pros and cons of the mockups. Then I created wireframes based on the strongest ideas in Sketch then took the wireframes and created a prototype with InVision.

Proposed Sitemap

Testing the prototype gave us insight in what the users expected to see based on experience with other products. It also showed any weakness in our thinking. After a couple rounds of iterations, we moved forward with developing wireframes for the rest of the site and testing along the way.

A collection of documentation from the personas, card sort test result, survey findings and user flows

Wireframe examples

Annotated wireframes

Annotated wireframes

 

VISUAL DESIGN

The current state of the visual design was in need of an overhaul. Our data uncovered that the users had a hard time with the dark interface. The sales team also noted that clients had feedback that the tool was unattractive.

Our approach to visual design was to build a system that makes design and development quicker to execute. The ability to execute quickly gives HYFN an edge in the marketplace. The design system, DASH, is now a standard for all of HYFN’s products.

We work with our engineering team to keep a living style guide. All of our products share the same library of components. It also provides value when working with contract development teams. The effort has affected the bottom line by saving HYFN time and money.

Example of how components from Dash can be reused for different HYFN products

Example of how components from Dash can be reused for different HYFN products

HYFN8 animatic to help illustrate the component behaviors

RECAP

A large investment was made to redesign HYFN8. It’s goal was to make our users more operationally efficient as well as develop cross-platform features to differentiate us in the market. We heavily leaned on our users to help us define the tool. Currently the redesign is in the development phase and we plan to do user testing to improve the product throughout its lifecycle.

The effort has impacted the business in the following ways:

  • Users are excited and relieved with the new design

  • The feedback from sales of the tool being unattractive is addressed with the more modern look

  • It will open a possible new revenue stream with the option of selling the product as a SaaS tool

  • Proved that product design is an essential function of the HYFN product team

  • By improving efficiencies and cross-platform nature of the product, it will set HYFN apart from its competition

  • It has saved the company time and money with the development of the design system for any future product builds

  • Earned the Best Publishing Platform by Digiday