Solarnest's UX Elements

Holly Suttle

14 Jan 2018

Solarnest homepage

The Brief

The founders of Solarnest approached Tilix for advice regarding their first website.

As an early stage start-up business, it was not surprising that Solarnest’s business model was still crystallising. In turn this was impacting decision making about the look and feel of the website. To be blunt, the website comprised a mish-mash of words and cute graphics. It felt like a skeleton with no meat on the bones. We could see issues in all the following areas:

  • Copywriting
  • Informtion Layout
  • Site Structure
  • Basic Functions
  • Solarnest Visual Identity
  • Clarity of Solarnest’s mission

Distilling these points down, it was agreed that two things would change:

  1. The website would communicate the Solarnest mission.
  2. The writing would serve to define the product-market fit.

The Elements Applied

Here I use the 5 planes model to help explain the rationale behind key decisions and to put Tilix’s development work into context.

Strategy

There was to be no fundamental shift in the site strategy. It was still was going to function as a digital business card.

However the development would lead to a website that clarifies the firm’s current position: Solarnest is a start-up with a mission and a vision. It aims to grow quickly and wants to deliver the right content for the primary audience of investors, partners and team members.

Importantly, it was agreed that at this stage, customers would be the secondary audience.

Scope

The scope of work was deliberately focussed on copy writing, curating imagery and making minor edits to the site structure and skeleton.

The aim was to maximise the impact of changes but to keep the volume of authors and edits to a minimum. This limited scope fitted with the resources and time available. Nevertheless, with focus and intensity, it was clear that Solarnest’s webpage could be dramatically improved.

Structure

This project did not change the basic “one page scroller” structure of the website. However, to provide valuable information about Solarnest, three new sections were added. This had several advantages:

  • It was possible to present Solarnest’s mission in a clear, structured form.
  • The information flow was more logical flow because the extra sections allowed for the additional content used to boost Solarnest’s credibility.
Before After
Navigation Navigation
Headline & Video Headline
- Who We Are & What We Do
- The NEST-i
- Why Solarnest?
Hello & Meet the Team Meet the Team
Become a Sponsor Invest in Us
Contact & Mailing List Contact & Mailing List

Skeleton

I used the wireframing tool Mock Flow to demonstrate what the structure of the page would look like with 3 additional sections.

This represents an edit rather than a redesign. The template remains fundamentally the same. However, the presentation of information has been organised to provide a more structured narrative.

Surface

All of the copy in the website was revised. Previously there were 272 words. Now we have 758 words which carry much more meaningful information.

Said statistic belies the copy writing effort that has gone into:

  • Removing unnecessary words.
  • Making the information clearer.
  • Highlighting the calls to action for visitors.

The visual design has also changed. Previously a link to a YouTube video Why We Don’t Live Smart? was the most prominent visual component. The video is visually appealing, but it does no more than provide cryptic clues as to Solarnest’s value proposition.

Therefore, the new design does not include this content. Rather, product images have been added to support the site messages and provide visual relief.

Conclusion

The founders of Solarnest are delighted with the outcome. The website been refreshed and in doing so a good deal of fog has lifted off their business model.

Going forwards Tilix will continue to support this sustainable building start-up invent, deploy and optimise its digital marketing. The projects in the pipeline are:

  • Ensuring the website functions well across different devices, displays and browsers.
  • Creating a Hubspot powered growth stack.
BOOK A CALL   STAY INFORMED