Hello!

My name’s Lewis, I'm a UX Designer, Developer, Dog lover, Gymnast, Fitness enthusiast & Metric lover.

Located in Sydney, Australia
menu

Lewis Healey

UX Designer & Developer
in Sydney, Australia 🇦🇺

hello@lewi.sh

arrow_back
Date

Sep 2017 - Nov 2017

My role

UX, Visual Design & Front-end Development (HTML, CSS), Back-end Development (Laravel)

Client

D&A Photography open_in_new

Project Summary

  • Aligned direction with marketing personas, user stories and IA
  • Integrated technologies to increase site speed
  • Designed and developed a mobile-first solution
  • Designed and developed internal tools to improve efficiency
  • Improved brand experience

Research

The Problem

D&A Photography’s site was originally built back in 2015 using Wordpress and was now due a refresh. As well as enhancing the overall brand experience and quality, loading speed for needed to be improved in order to increase conversion rates. Taken together, the task was to increase speed and efficiency, whilst upgrading the brand quality.

Gaining Insight

To gain insight for personas, user stories and flows, I set up Hotjar, the screen recording tool, which enabled me to collect both quantitative and qualitative data.

Using Hotjar, I ran a two question poll on the current site:

  1. “What is your purpose on the site today?” and
  2. “What do you want to know when viewing a wedding?”

Having collected only two responses after two weeks using an open text field, I reviewed this with the client to come up with four answer choices, based on the types of enquiries he receives. This led to a significant increase in responses and provided a rich source of user insight.

I discovered that users would like to see couple testimonials, how the photographer approaches the shots, and a quick video slideshow.

Our client testimonials were right at the bottom of the page, where a tiny percentage scrolled to (according to our scroll maps).

Defining an accurate persona

Using Google Analytics to identify the site’s demographics demonstrated that 90% of users were female, aged 25-34 and from either London or Essex. To ensure the personas were accurate, the client cross-referenced this with his last 100 enquiries, which validated GA’s response.

Persona: Kia

This insight led to the birth of “Lisa”. Like D&A’s most common users, Lisa frequently visited sites such as Pinterest and ASOS - sites with a high female demographic - which led to the suggestion that D&A should consider Pinterest advertising.

Design

Design approach

Noting that 70% of users access the site through a mobile phone, a “mobile-first” design needed to be implemented - a consideration the previous site had not accounted for.

Designs

Based on the gender-specific colour theory, blue is the most popular colour for both males and females. This, combined with the client’s office royal blue theme, made for a cohesive branding, and led to the use of a palette of varying saturated blues, blended with secondary CTAs to add depth and character to the site.

Snapshot

As each page contained over 500 images, Guerrilla usability testing demonstrated that few users actually scrolled through right to the end. To remedy this, the concept of using a “snapshot” emerged, using the best photos formatted in a CSS grid to capture the essence of the wedding, giving the users the option to then go on and view the full collection.

Pinterest inspired tags

Taking inspiration from one of the leading female-majority sites, Pinterest, I created a way to internally tag images. Taking shoes as an example, if the user was to click on that tag, they would then be directed to a page containing all other “shoe” tagged photos that D&A had taken. This interactive feature provides users with inspiration for their own special day and allows them to add their favourite images to their respective Pinterest boards.

A visual admin

Taking inspiration from the recent trend in chatbots, I designed the admin like a conversation. The user can create a story by editing a sentence and use their keypad to rearrange uploaded photos, reducing time spent on adding a story.

Development

CSS Grid

Traditionally to achieve a layout like ‘the snapshot’ you would have to use a Javascript plugin. Using the new technology of CSS grid allowed me to create versatile CSS only grids that could easily be arranged by an admin.

Image optimisation

Using Amazon S3 to create a Lambda function that would generate resize images on request, meant that responsive image attribute srcset could be used more effectively. Furthermore, by integrating informant lazy loading, the initial page load was optimised, which was particularly important for mobile viewing.

Current results

  • Improving internal efficiencies with a simple visual tool and Amazon S3
  • Designed and developed a mobile-first solution
  • Built features to improve interaction and utilise growth hacks with social channels like Pinterest
Current results