DesignLab - High fidelity landing page

Given my experience, knowledge and the team I’m part of at RSA I currently get fewer opportunities to explore the higher fidelity side of design than I’d like. To help maintain and develop my skill-set, I enrolled on a DesignLab course to give me an environment where I could focus on visual hierarchy, layout, colours and typography instead of my usual day to day work of information architecture, interaction design and research.

While the process DesignLab uses didn’t reflect all of my views and approach to solving design problems, it was interesting to follow to get to the stage of exploring aesthetics. 

One of the exercises was to create a landing page for a business. I chose a business concept that I’d seen from RSA, a combined pet fitness tracker and insurance policy. DesignLab assign a 5 hour time limit to the project which created a very interesting constraint.   

Before complicating things with colour and imagery, I worked on a wireframe we had previously built to try to improve the visual hierarchy of the headings and body copy. Even though this was a fictional project, I could hear almost hear the sighs from my fellow UX writers / content designers in the way we had jumped into creating content with no validated business or customer goals! Certainly the inner IA in me winced a little as the page was being designed in isolation of the rest of a fictional site, especially as I added components like the email signup. I usually wouldn’t use wireframes to explore a grid and typography like we were asked to on DesignLab but I could see how they used it to teach students the basics of layout. 

When it came to branding, colour palettes and typography, DesignLab suggested we start with a style tile. I chose an earthy palette to try and reflect an organic, grounded look to separate it from the world of strong financial insurance companies. This was an interesting way to focus on this part of the design but from my experience in the workplace, I’ve often seen them being a little too abstract for clients to use to imagine how their site will end up. My preferred approach would be using element collages or even early style guides based off components from wireframes. 

I took the wireframe and started to introduce colours to see if the visual hierarchy was impacted by the contrast created. I dropped the rectangular 'tile / card' from around each ‘feature’ as I didn't think they were adding anything (but were useful to help me line the image & text up on the grid). 

The email signup section changed colours a few times. I wanted it to stand out from the background colour while still providing me with enough contrast to make the content easy to read. I also changed the shape of the email CTA to help it stand out from all it's surrounding rectangles.

I spent a long time (in regards to the DesignLab time limit) looking for images. I could have spent hours (or days!) looking for the right images so decided to settle with what I had to focus on layout, colours & composition (whilst being aware how much the images impact colour balance).

I quickly found I needed to increase the size and weight of the H1 heading over the hero image to give it suitable contrast. I began with the H1 centralised but moved it as I liked how it aligned to the dog's eyes to create Looking Room.

Getting suitable images for the 'features' section was painful. Any apps and UIs didn't match my colour or branding so they look out of place. I would have preferred more outdoor images but couldn't find enough.

I changed the main CTA to have rounded corners. I felt it helped connect it to the ‘features’ section whilst still being different enough to stand out. 

Aware that I hadn't really pushed the layout, I wanted to try out a different hero image to see what else I could bring to the hero section. The image leant itself to a 2 column layout, so I adjusted the H1 text to try and balance it. Even though I had increased the weight of the H1 on the previous version, the darker background meant it didn't stand out enough for me. I thought about adding a semi transparent background but didn't want to spoil the image. Instead, I added shadow to the text to help give it some better contrast. I started with a darker shadow colour, then adjusted the opacity, then settled on using the lighter colour from the palette at full opacity which I think helps. Given the time constraints I was unable to confirm if it would pass accessibility guidelines but in reality would have explored it in much greater depth.

While I was considering how best to give enough contrast to text on photographic backgrounds, I decided to (possibly!) make my problems worse by removing the top of my image mask and allowing the header to sit on the image as well.

Given the limited time for the project, I had to ignore the logo (regrettably for the design) but was very keen to make sure the menu still stood out. From an experience design perspective, the menu doesn't stand out as well but as it's a landing page, the objective is to interact with the CTA so I decided for the sake of the overall composition that the larger image works better.

I still didn't like the 'features' section. While the rectangular tiles / card for each feature didn't add anything, the resulting image and text still felt a little underwhelming to me. 

Still not satisfied with the design, I wanted to explore the number of features sat on the design. Although this is a bit of a lazy experience design hack, I justified it by focusing on the goal of the page being to get people to click the CTA to start their quote. By having less content between the hero and CTA, the page might convert more. In reality I would suggest A/B testing the two pages to see which converts higher, more info, or less content. 

By changing the layout of the features from three to four columns, I took the chance to address the small blog articles and switched them from four to three, allowing space for more content if needed.

Looking at the hero area with my UX background, I was worried about the hard horizontal line between sections and it's potential lack of an incentive for the user to scroll down the page. 

I dislike it when people start adding arrows to their designs to tell people to scroll (UI is like a joke, if you have to explain it, it's no good). I increased the height of the hero section (so as not to impact the image) and brought up the circular features to overlap and show there is more on the page. I added a border to them with the same background colour as the main page so that the feature images had enough contrast over the hero section. 

By increasing the height of the hero section, I also took the chance to line up the menu items along the yellow floral strip which helps highlight them (although this could stop working at different break points). 

Now there is less on the page, the hierarchy of the typography has started to become more balanced and consistent.

As I’ve mentioned, to get the the final version shown above I had to ignore many of my approaches to design. 

I would never usually start creating content without knowing what the (validated) business and customer goals were. I would never usually start a wireframe without knowing what content was needed. I would never usually start designing a wireframe without knowing what was on the rest of the site. Despite breaking many of these rules, this exercise proved a really useful for me. I’d still like to go back and spend time choosing suitable imagery, design a suitable logo and work on the contrast but in light of the time limit I was satisfied with the result.