UX Designer & Developer
in Sydney, Australia 🇦🇺
Sep 2017 - Nov 2017
UX, Visual Design & Front-end Development (HTML, CSS), Back-end Development (Laravel)
D&A Photography open_in_new
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.
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.
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.
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.
The information architecture was designed to be concise, to not distract the user from the imagery. The small amount of user-facing layouts allowed me to focus on creating an effective admin and invest in new coding techniques, such as CSS grid.
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.
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.
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.
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.
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.