Web dashboard design for an SEO auditing platform Haystack

The UI and UX made it difficult for sales teams to generate and understand reports quickly. This project aimed to improve report accessibility and speed.

My input: I was involved in the process unifying already collected information from the existing team and narrowing down the scope of creating the UI and UX.

Project info

The project took 4 months to complete (UX and UI design)

The team on this project included:

Jessica Chambers (Customer Success)
Andrew Waite (PM)
Lee Percox (Front end)
Doug Nelson (Back end)

Methods

UI Design

Research

User Testing

Prototyping

Brand guidelines

Web design

Tools

Balsamiq

Sketch App

InVision

Project background

Haystack (currently ‘Insites’) is an online platform that provides automated marketing analysis of any business. Haystack was created to help identify what a business is missing in their online marketing, and offer solutions to their problems, might it help with SEO, social media or local presence.

Website: insites.com

Measuring success

The primary metric we agreed to use to measure success was the number of reports created by each user over time.

After analysing the information shared with me by the time, we concluded that the right needs the product could meet were:

Make finding and testing a business quick and easy.
Make information about business relevant and easy to grasp.
Make it easier to run multiple business reports simultaneously.

Competitor analysis

To evaluate our competitors’ strengths and weaknesses I conducted a competitor analysis. I looked at three applications that offer a similar service to Haystack and I created the SWOT Analysis of them:

Some of the strengths (S) each competitor had, was their large customer base. Some were also quoted in renowned publications. The ease of use (based on their customer reviews) was also reported to be excellent (on average 4.5 / 5).
One competitor had a couple of strong weaknesses (W): as described by one of my participant who did some usability testing for me on this app, they “didn’t know where to look” when they landed on the dashboard screen. There was all the information there; Just not well organised. A couple of participants were also unsure if a search box was a search box. Most importantly, neither of the competitors tested had their application work well on a mobile device (mobile vs desktop device use in 2016 was 55.79% to 44.21% respectively).
This was a great opportunity (O) for me to use. Firstly, I decided to use a mobile-first approach in this project, therefore, making sure the information architecture of this new app is easy to navigate and pleasant to use on a mobile. Then, I moved onto tablet devices (which was a major tool used for viewing these apps).
Due to our competition existing for much longer in this market than the product I was creating, some major threats (T) occurred. I needed to answer two questions: what can we do to ensure our product is discovered by new clients and, once discovered, what can be done to sustain user retention.

Persona

The app is primarily used by digital sales teams. The majority of users are male, middle-aged and have low technical knowledge. They are not expert computer users.

Contribution: I was responsible for creating personas and eventually finalising our main persona. This was to help the stakeholders identify and speak about our target audience more effectively.

Sales representative persona

Sketches

I started sketching out the UI structure on paper. The sketches helped me outline the visual and typographic hierarchy and organise the general interface of the app.

They also helped me narrow down the features we absolutely needed in the first product launch. The screens I focused on: Signup > Business search > Business overview > Business detail > Proposal screen.

Sketches

Low-fidelity wireframes

When the wireframes were finalised, I moved onto creating Balsamiq prototypes. This helped me finalise microcopy for the app, e.g. the labelling of the buttons.