A New Era
Leading the design and UI development of a new website for sydney-based ux agency, blueegg.
Client
blueegg
Role
UI Designer
Timeline
8 Sprints
Team
Design
Overview
blueegg was founded in 2014 in response to a lack of clear-cut user research methodologies in market at the time. Since then, blueegg has matured in both its approach and headcount, but the website experience remained the same since the time of its inception. The objective was to redesign the company website to align with the modern blueegg era, which meant defining what the agency stood for, as well as where it wants to be in the future.
“Scientific methodology formed the foundation of blueegg, but the craft of design will help define its future.”
Role
I served as the sole UX and design lead, with 16 weeks (8 sprints) to deliver a 6-page MVP website accommodating for all major viewports. The design work was completed by myself, project facilitated by the Chief Operating Officer, and build handled by a single offshore, San Francisco-based developer.
Objective
Build and launch a new agency website which catered for desktop, tablet and mobile platforms. The new design needed to be modern, concise and indicative of where blueegg wanted to be in the future.
This project began with three primary objectives in mind:
The website was to be built around the theme of ‘Scientific Discovery, in whichever way shape or form that may take.
1
Colour was to be used sparingly and deliberately in order to allow the agency methodology to exist harmoniously with a pared-back aesthetic.
2
The website was to be managed in Hubspot, so ease of future upkeep was to remain front-of-mind from both a design and build perspective.
3
Constraints
Hubspot was defined as the CMS early in the project scope, so the UI design and front-end functionality had to adhere to strict Hubspot frameworks. This meant coming up with creative UI solutions, especially for sections which contained long blocks of copy. Working asynchronously with a San Francisco based developer also meant that the feedback cycle and needed to be concise and timely, as go-live date was non-negotiable.
What once was..
Our starting point
I began by consulting with the Design Lead and blueegg’s founder and CEO in regards to their vision for direction of the site’s visual language. The blueegg Sydney HQ had just been renovated at the time, and a suggestion was made to translate the aesthetic of this visual space in digital realm:
From the above images I deduced that the website would incorporate clean lines, a bold contrasting motif and deliberate hits of colour.
From it’s inception, the blueeggs foundations were tied to the medical and scientific fields. From here it was a process of putting two and two together.
It was time to get to work.
Design exploration
I began by creating lean, mid-fidelity wireframes which leveraged both bold contrasting and hits of colour in order to get a feel for how I would compartmentalise the required information. Initial concepts focused on colour theory and visual cohesion i.e shapes, typography, iconography etc. At this stage, it was important to balance the project requirement for something new and exciting, with the feasibility of build in relation to the Hubspot constraints.
Sharpening the sword
I went through a process of iteration and reduction, constantly searching for the balance between ‘minimalist’ and unfinished. It was through this process that I began to lean more heavily into shape and form. A suggestion was made to utilise ‘dots’ as a visual motif, and to link the aesthetic language closely to the realms of science and mathematics:
I decided to take this theme and run with it, eventually developing a complete visual language and suite of icons for use across the website, affectionately earning the moniker ‘Bricon’ in the process.
The early days…
Though the initial icons were on the right track in terms of weight, colour and balance, the overall aesthetic was still slightly too complex, and lacked a distinct character. These icons were also quite time-consuming to create.
Disco.
After many iterations and internal stakeholder chats, I’d found a balance of simplicity and character, effectively forging the new blueegg visual language for the website and all outward-facing communications to come.
The build
Working on a tight deadline with an offshore San Francisco-based developer brought with it many hurdles, of which a few key learnings emerged:
1
An asynchronous feedback loop meant that communication and design handovers had to be nothing less than clear and concise
2
File hygiene was of the utmost importance. The value of annotations and foundational design systems was learnt by process of repetition
3
Maintaining a healthy working relationship with the Developer went a long way, especially when it came to delivering certain artefacts in a less than ideal timeframe.