Haystack
A web app for efficiently selling digital services
UI DESIGN
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 (Project Manager)
Lee Percox (Development)
Doug Nelson (Development)
Methods
UI Design
Research
User Testing
Prototyping
Brand guidelines
Web design
Tools used
Balsamiq
Sketch App
InVision
Background
Haystack (currently ‘Insites’) 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: insites.com
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.
Sales representative persona
Sketches
I started creating the product’s structure by sketching out some designs. 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 or icon-naming.
Login screen
Business search screen
Business overview screen
Business detail screen
