Haystack

A web app for efficiently selling digital services
Company project UI / UX Design
Single document

Intro

Project length

Jan -May 2016

Skills

UI Design
Research
User Testing
Prototyping
Brand guidelines
Web design

Tools

Balsamiq
Sketch App
InVision

Project team

Jessica Chambers (Customer Success)
Andrew Waite (Project Manager)
Lee Percox (Development)
Doug Nelson (Development)

Background

Haystack (currently β€˜Prospect’) is an online platform that provides automated marketing analysis of any business. Prospect 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: silktide.com/products/prospect

Project overview: Competitor Analysis > Personas > Wireframes > Low and High-fidelity prototypes > Brand guidelines.

Problem Statement

The current user interface does not make it easy for sales teams to run and understand business reports quickly. Sales teams need reports on their prospects so they can sell more effectively.

This project aims to improve the ease and speed with which sales teams can run business reports.

We will know this has been achieved if the number of reports created by each user increased over time.

Contribution: I was involved in the process unifying already collected information from the above project team and narrowing down the scope of this project. I proposed the following solutions to our problem.

Solutions

  • 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.

Personas

The app is mostly 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.

Persona 1

Name: Leon Parks
Age: 43
Job: Sales representative

β€œI find it hard to stand out from other sales representatives and to know how to sell websites to my prospects.”

Pain points

  • Current solutions are very slow
  • Comparing businesses against one another is time consuming
  • Presenting reports to prospects requires printing out too many pages to content

Needs & Goals

  • Quick view of a website
  • Compare websites against one another
  • Run and print reports on a business

Wireframes

I started creating the product’s structure by sketching out some wireframes. The wireframes 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.

 

 

Low-fidelity prototypes

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 or icon-naming.

High-fidelity prototypes

Colours and typography

Haystack typography