Haystack

Haystack is a platform for efficiently selling digital services, such as websites, local directories, online advertising and SEO.

This tool gathers all the significant information about a particular business in one place and helps reps save their time researching their potential prospects.

Delighten helped design the Haystack app from the ground up. We made sure the app looks friendly, professional and is easy to use to all users.

haystack-ui

Creating the brand

The aim was to create a fun and colourful brand concept that communicates Haystack’s main purpose: selling digital services.

The client was presented with a dozen different logo concepts. In the end we decided to stick with a simple font and a “wheat” icon. It was to represent: “finding and figuring out quickly what can be improved in a business” (or, really, finding a needle in a haystack).

Once the logo was done, we created a document with Haystack’s Brand Guidelines (so Silktide would have no problems remembering what colours and fonts were used in their product’s website). To make the tool more readable, we used the Open Sans font and, to keep the tool fun, friendly and professional, we also used light and vibrant colours.

Designing the interface

The user interface was designed to follow the most common interface design patterns. We wanted any user, no matter their experience, to know how to navigate through our web app.

Once we’ve confirmed with the client that their target audience are marketing companies, we knew where to start our research. We’d spoken to a few marketers in the area to find out what they find the most difficult in finding the companies that need help with their business development. The biggest problem they all encountered was the time they needed to spend researching what their prospects don’t do effectively and how they can be helped (e.g. improving their AdWords strategy, helping them understand their websites are not optimised for mobile, etc.).

With this in mind, we created multiple iterations of sketches and wireframes that demonstrated the functionality of the tool. This included sections such as: overview, detail, competitors and proposal.

User interface – function

To simplify user flow, the sections we created were turned into tabs:

  • Overview tab. This page gathers the most important information about the business’ website, for instance, whether their website uses alt text or not? Is it mobile friendly? How quickly does it load?
  • Detail tab. This explains in more detail what needs to be done to improve the business’ website. i.e. if a marketer sees there is a problem with website speed, she uses information provided by Haystack to find out more about an issue and presents it to a prospect.
  • Competitor tab. Allows a marketer to compare their prospect’s website against their competitors’ websites. This is a very powerful feature, if a marketer wants to get a broader understanding of what some business are most successful than others. Also, any useful information that can be presented to a prospect about their competitor is impressive.
  • Proposal tab. This helps a marketer create proposals. It can be customised and emailed to a client if needed.

Creating additional resources

Delighten also helped Silktide with design PDFs.