Copy of 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 driving efficiencies, innovating features to 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.

ROLE

Responsible for hiring a team
Primary visual design and interaction designer
Create a design system to span across all of HYFNs future products
UX Design support

CHALLENGES

Working with 4 different APIs
No analytics to gain insights from
Build a flexible design system, Dash, to be used for future builds from scratch

HYFN8 started off as a tool to aid social community managers monitor and create compelling organic content. With listening tools, a facebook app builder and an easier way to communicate with their fans; HYFN8 was a great tool when it was launched 5 years ago. One of the sections became more valuable than the others when our clients budgets were shifting into social advertising.

When the leadership saw this shift, they quickly pivoted the intent of the tool and shifted to the strategy. Meaning, it will offer tools that our partners at Facebook, Twitter, Pinterest and Snapchat have; plus offer additional features that they lack. For example, a tool to visually represent Facebook Canvas ads performance and weather and emoji targeting for Twitter.

With the exception of the initial build of the product, UX and visual design was not a part of the team that maintained the product in its evolution. The creative team was solely resourced on agency project servicing our clients in building sites, apps and other digital builds. HYFN was then acquired by a broadcasting company to spearhead their digital offering opening up some funding to double down on the efforts in building out our product team.

At this point our users were frustrated with the workarounds that they had to perform just to use the product and would use our partners tools alongside a handful of third-party software. There were issues with cumbersome and inconsistent workflows per channel, wasted real estate and all around bad user experience practices. With my experience with building large scale projects, my ability to work with cross-functional teams and expertise in creating paid social media content as a Creative Director, I was chosen to lead the effort in bringing a Human Centered Design process to the new product.

PROCESS

The first hurdle was to prove that we should make the investment. The product managers and engineers were behind the move but some of the senior leadership needed to hear more to invest in the effort. We then proposed the benefits on what this can do for the business.

By improving the user experience we can make our users more operationally efficient by streamlining tasks and applying a Human Centered Design process to the experience.
Re-hauling the visual design will not only make it an easier UI to look at for longer periods of time but will save time and money on design and development by developing a design system to work across all of HYFNs products.
Building the product so it can work cross-platform and have it ready for SaaS when it the timing is right.
Use data to help organize the information architecture to surface the most critical tasks, speed up load times and depreciate features that are not being used.
Stop chasing parody with our the social platforms and build stand alone products that focus on corss-platform efficiencies and automated processes.

The leadership team was eager to see a vision of what could the new UI look like. I then developed an animatic with the existing features on the campaign manager to show a preliminary vision of what the product could be. With this and the reasons listed above, we got the greenlight to move forward.

Early comp to display what the interface could look like

After the acquisition, the media team grew quickly. We had a user base comprised of people that have been using the product for 4 years to newcomers. Also, we had a handful of clients that used the tool but our offering was a managed service. We wanted to find out their pain points so we sent out a survey through mailchimp to gather some initial data. Here is what we found:

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

These one-on-one user interviews will complement and augment the quantitative data we have collected through the survey. We will use the demographic information and results from the survey to put together the specific screener, as well as understand which areas need further investigation. The one-on-one interviews allow us to gain deeper qualitative insights that allow us to build robust and specific personas.

Additionally, the observations we collect will play a large role in constructing the user journeys. Those coupled with the personas will allow us to design and deliver a user experience design tailored to HYFN8’ s specific user base and their unique lives and context.

The primary goals of this portion of the user research are to identify the strengths and weaknesses of HYFN8, explore users’ journeys, including their pre-task interactions, and provide opportunities for improvement.

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

We then audited our existing information architecture and found features that could be cut and sections that we can consolidate. From that point, the UX designer started to craft a new streamlined sitemap with 7 of our users to conduct a card sorting excercise to help oragnize the content.

We created prototypes to and asked user to perform a task and talk aloud what they were thinking and expecting. The data was collected and the feedback was applied to the next iteration of wireframes and prototypes.

When then started to build out the wireframes out for Facebook Campaign Manager, it is the most complex and the other platform can be tweaked to accommodate for the APIs.

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

My plan was to hire a seasoned User Experience Designer for the research, information architecture and key wireframes and hire a mid-level user experience designer with solid visual design skills to move forward with production and testing. This approached saved money for the company and gave me the resources I need at the appropriate time.

I then started to work with development to create a living style guide for the product where front-end engineers could reference. The design system also help a great deal with quickly putting together mocks.

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

We are using a combination of Sketch and Zeplin to help coordinate with the Product Managers and development. We are planning to launch the product by the end of Q1 of this year.

HYFN8 animatic to help illustrate the component behaviors

OUTCOME

Will save the company time and money with the development of the design system
A complimentary product was release with the help of outside developers with just the design system and wireframes with little oversight
Users are excited and relieved with the new design
Will open a new revenue stream with the possibility of SaaS
Proved that design is an essential function for the HYFN product team
The redesign will set us apart from our competition when complete
Influenced the agency creative and development team to adopt a design system to speed up production by building commonly used components and modules
Earned the Best Publishing Platform by Digiday

Copy of HYFN8 – Case Study

ROLE

Responsible for hiring a team

Primary visual design and interaction designer

Create a design system to span across all of HYFNs future products

UX Design support

CHALLENGES

Working with 4 different APIs

No analytics to gain insights from

Build a flexible design system, Dash, to be used for future builds from scratch

PROCESS

The first hurdle was to prove that we should make the investment. The product managers and engineers were behind the move but some of the senior leadership needed to hear more to invest in the effort. We then proposed the benefits on what this can do for the business.

By improving the user experience we can make our users more operationally efficient by streamlining tasks and applying a Human Centered Design process to the experience.

Re-hauling the visual design will not only make it an easier UI to look at for longer periods of time but will save time and money on design and development by developing a design system to work across all of HYFNs products.

Building the product so it can work cross-platform and have it ready for SaaS when it the timing is right.

Use data to help organize the information architecture to surface the most critical tasks, speed up load times and depreciate features that are not being used.

Stop chasing parody with our the social platforms and build stand alone products that focus on corss-platform efficiencies and automated processes.

The leadership team was eager to see a vision of what could the new UI look like. I then developed an animatic with the existing features on the campaign manager to show a preliminary vision of what the product could be. With this and the reasons listed above, we got the greenlight to move forward.

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

Additionally, the observations we collect will play a large role in constructing the user journeys. Those coupled with the personas will allow us to design and deliver a user experience design tailored to HYFN8’ s specific user base and their unique lives and context.

The primary goals of this portion of the user research are to identify the strengths and weaknesses of HYFN8, explore users’ journeys, including their pre-task interactions, and provide opportunities for improvement.

We then audited our existing information architecture and found features that could be cut and sections that we can consolidate. From that point, the UX designer started to craft a new streamlined sitemap with 7 of our users to conduct a card sorting excercise to help oragnize the content.

We created prototypes to and asked user to perform a task and talk aloud what they were thinking and expecting. The data was collected and the feedback was applied to the next iteration of wireframes and prototypes.

When then started to build out the wireframes out for Facebook Campaign Manager, it is the most complex and the other platform can be tweaked to accommodate for the APIs.

I then started to work with development to create a living style guide for the product where front-end engineers could reference. The design system also help a great deal with quickly putting together mocks.

We are using a combination of Sketch and Zeplin to help coordinate with the Product Managers and development. We are planning to launch the product by the end of Q1 of this year.