Scarlett Land & Development

The prototype and design creation of a startup company website.

The background

Scarlett Land and Development are a new company, specialising in offering consultancy advice in relation to the acquisition and sale of land and development assets across Scotland. They required a web presence where they could list the sites and developments that they had for sale, as well as somewhere they could explain what they did, and to build a rapport with their new customers.

I helped with the prototype creation and front end design of the interface.

Getting started

There was no existing website or material to start from with this project as the client was setting up the business entirely from scratch. Fortunately, he gave a good enough brief to work from and make a start on the wireframes and prototypes. The downside that was realised pretty quickly was that content would probably be a problem in the early days.

There was a high likelihood that pages could appear sparse, with a few sentences on each. Due to this, we decided fairly early on in the process to go with a split screen approach whereby the left side of the screen would be the content area, and the right reserved for supporting image assets or map locations. Sketch prototypes were created and from there, I began to develop the wireframes in Axure.

Prototyping

The sitemap was relatively small, with around 10 pages to start with. There would be five menu items, with a few subpages beneath a few of them. This allowed the information to be consistently organised and structured throughout. A news section would appear in a few months once content had been generated, as would case studies of work carried out, but for launch, the pages required would be:

  • About
  • For Sale
  • Clients
  • Contact

In essence then, a fairly simple site, but there were still a few elements that we needed to get right in order for them to work as intended for the end user.

Rather than using a hamburger menu, we kept all items on the screen at all times, increasing engagement rates and allowing the user to see what content was on the site, and to prevent pages becoming too long with blocks of text content, we made use of the ‘Read more’ functionality often seen when reading news articles.

The wireframes went through a few rounds of amends, but on the whole, the client was pleased with the vision that we had in mind and was happy for the design phase to start.

Design concepts

Again, due to Scarlett L&D being a start up company, there weren’t the supporting brand assets or images that you’d get with a larger organisation. I had 2 colours to work with (grey and red) and a plain text logo. The agency that had done the brand work suggested a few fonts to us, some of which weren’t available as web alternatives, so I offered suggestions for suitable alternatives.

The concept stage didn’t take too long, but it was important to get right. Upon the completion of designing key pages and interface elements, I placed the designs into Invision to be shared with the client. As it often the case, they had some questions about how the interface would work, as flat visuals are difficult to imagine working as a ‘real thing’. Originally we’d proposed a split screen homepage to match the rest of the content pages, but he wasn’t convinced by this, so the design reverted back to a single column layout.

Once the client was happy, the designs were signed off and build could begin by another developer. I provided him with a style guide of all elements used in the designs which allowed for a relatively pain free build from his perspective. I checked the UI once a development site was live and following a few minor tweaks, the site was launched in September 2017.

Were there any problems?

The hardest part of this project for me was the design stage working with no assets or guidelines. I felt as though I was taking a guess as to what the client was after to a certain extent, but in the end, he liked what was presented to him. The structure of the site lent itself to being self explanatory to a certain extent, so the information architecture took care of itself really.

Conclusion

Scarlett L&D was a good project to work on. It’s fun to work with a smaller client who’s open to new ideas. Tackling the problem around the potential lack of content was interesting, and the split screen solution allowed for a pleasing design solution to be reached.

When compared with other websites in the sector, Scarlett L&D stands out for the right reasons, and marks them apart. The client is happy with the end result and enquiries are already coming in through the site, so his investment is paying off already.