UI/UX Design

EFG Hair

Role: UI/UX Design, Development, Branding, Logo, Photography

A site designed and built for a self-employed bridal hair stylist with the majority of photographic content also being provided by myself. EFG Hair have never previously had an online presence beyond social media, they sought to branch out into a new independent online hub. This was an opportunity to double down on business goals, those of increasing client conversion and attracting a higher end wedding clientele. After analysing the local online competition, I concluded that the majority were still operating with woefully outdated sites lacking in modern design with frustrating user experiences. This was an area in which EFG Hair could really separate themselves, retain the attention of those potential clients searching for a new bridal hair specialist.

Regarding increasing client conversion, I aimed to achieve this through providing users with more detail regarding services and the attached pricing structure, something which social media made difficult. EFG Hair faced an issue of receiving an overwhelming influx of social media messages often posing the same questions about logistics; ‘How many people could you work on in a day?’, ‘Do I really need a trial before my wedding?’. I saw the need for an FAQ (frequently asked questions), social media queries could be redirected here which both increased user engagement and lead users to the new business home. Removing them from the social media template into a curated branded experience, where there are far more opportunities to convert prospective clients.

To attract a higher end clientele, I wanted to emphasise this shift through the site’s visual identity. After researching the current presence of EFG Hair, I realised there was little to no consistent brand identity making this the opportunity to lay the groundwork. We agreed that the style should continue upon the principals of simplistic design with emphasis on whitespace and studio-quality imagery. With a background in commercial studio photography, this was an ancillary service which I could also provide. I proposed an emphasis on whitespace because I considered it integral to appealing to the new target audience, reduce visual clutter and display only meaningful content, allow the site to breath, curate a more sophisticated experience.

Huel

Role: UI/UX Design

The ‘How to Use Huel’ page is a high traffic page for new customers, 75% of which come from mobile. Within the timeframe of a week, my aim was to improve the UX of the page making it easier for users to find vital information they need when deciding to try Huel, and to modernise the UI After usability testing and user interviews, I identified 4 fundamental opportunities to improve the User Experience: Improve the user’s ability to scan read the page. Reduce the density of text. Increase the visibility of the most prominent information and improve page navigation Before testing brainstormed solutions, I created a style guide from the current site inc. colour palette, assets, typography, and current spacing conventions to ensure new features adhere to the brand’s visual style. It’s integral to branding that anything new retains the feeling that it belongs on the Huel site.

The biggest issue with the current version of the page is the overwhelming length of the page combined with several text-dense sections. I created a ‘jump to section’ above the fold to improve user navigation which I was initially hesitant to include as while the page is long (which would make a mini-IA necessary), the sections are relatively brief. As a compromise, I’ve added a mini-IA within a nested toggle. While this nesting increases the interaction cost, I think it’s a great middle ground as those who would benefit from quick navigation (returning users or those hunting for specific information) have the option, while others aren’t burdened with unnecessary content. I’ve implemented an alternating background colour for each section as a visual aid to help users quickly distinguish one section from another. This is particularly relevant given that usability testing showed the site did not facilitate scan reading.

An idea which came up in the brainstorming session to circumvent the text density and make content more digestible was a tip feature. Priority info remains bold, however secondary but still highly relevant information is displayed as a pop out card with a bulb. It’s elevated from the page which heightens its place within the visual hierarchy. As so many of the issues raised in the user testing relation to the difficulty in digesting information on the page, I’ve designated highly relevant information as bold. This emphasis ensures important information in more discoverable to scanning users. On the accessibility front, the page hyperlinks were failing WCAG guidelines for colour contrast and there was a distinct lack of H3 headings which are beneficial for those who use screen readers as they will typically read out these headings to help users understand the content on the page. Both are simple fixes; alter the colour to another recognisable shade of blue which has meets contrast guidelines and repurpose headers which are currently marked as <strong> to H3.

The biggest alteration has been the redesign of the dietary example cards, which are now user cards. There were some major UX issues with the current formatting, the horizontal scrolling was awkward to navigate, and it disrupted the vertical flow of the page. Perhaps most problematic is the obscuration of information, you cannot see the entire day of meal on screen. My logic is that users will have a dietary goal in mind prior to coming to the site, either they’re looking to lose weight, gain weight or maintain weight. Those looking to lose weight will find the gain weight content irrelevant and visa versa. I thought that formatting the data as goal-oriented vs meal oriented created a better user experience. This way the user can see the information which is relevant to them fit entirely on the screen, irrelevant information is now tabbed.

Digit Bionics

Role: UI Design

Initiated by reason of a daily design challenge - in this instance to create a login page - I chose to develop a fictional prosthetic company due to my personal intrigue in the matter. After some precursory research, I found that many online retailers were adopting a ‘traditional’ and somewhat dated approach to site design, quite the juxtaposition considering the bleeding edge technology in these solution products. My challenge here was to create the web interface of a fictional bionic prosthetics company, attempting more accurately, to befit the revitalisation provided by limb replacement devices.

My initial design inspiration stemmed from the image of the prosthetic and human hand overlaid upon one another (seen in the first screen), apt in its communication yet with a simple presentation. Which, combined with a blue colour scheme and simplicity, speaks of modernity and competency. Blue being conventionally synonymous with confidence/trustworthiness, traits especially important to a company providing limb replacements.

Typeface and layout are dictated by necessity for legibility and adherence to the aforementioned company tone. To specifically mention typeface, Poppins was chosen because it’s a sans serif font that is modern yet not overtly playful which is a boundary I’m careful not to overstep given the underlying serious tonality of the subject. However, I wanted to persist in communicating the idea of these products being at the forefront in terms of technological advancement. After finishing the login page and feeling a draw to continue pulling upon this delightful thread, I followed up with a checkout screen.

Temperature Converter

Role: UI Design, Web Development

As part of my progression in learning to code, I built a program which converts user input temperature from Fahrenheit to Celsius and visa versa. The priority was a fully functioning program, but why must the interface be a bore? A cursory glance at the first page of sites listed on Google for ‘temperature converter’ reveals only the most successful in terms of SEO, pages with great functionality which you would expect, but minimal attention to interface beyond the minimum.          

The intent with this design is to preserve the core functionality of conversion but with a more appealing design underpinned by an omission of all unnecessary clutter. It was in this spirit that the program was written to remove the need for the user to click a button to process the conversion. Instead, the program runs automatically when user input is detected.

The interface is incredibly lean with a single central glassmorphism inspired container enveloping the inputs, paired with the site title. A design choice to compliment the transitioning background gradient from red to blue; hot and cold respectively.

Sample Portfolio Page

Role: UI Design, Web Development

To work on creating pixel-perfect builds of interface designs, I created a template portfolio page for a junior web developer. The aspect which differentiates this design from the rest of those on this page is the heavy incorporation of background geometric illustration. This raises a significant issue; how can I make sure these illustrations work across multiple screen dimensions? It would be a mistake to design for a single viewport size, the assets must be more versatile and responsive to change. The solution was to create the background assets much larger than originally required so screens above the typical 1920x1080 were catered for. As for smaller viewports, this was circumvented through strategically aligning and positioning those backgrounds in the development stage.

I had initially planned to create the background assets in Illustrator but found Adobe XD (the tool I had been using to prototype these designs) to be more than capable of creating workable vector-based illustrations of this complexity. Why inflate the number of tools in the workflow unnecessarily? You can compare the design and implementation via the ‘Open Site’ button.

League Of Legends Champion Filter

Role: UI Design, Web Development

Being greatly impressed with the design of the official League of Legends site, most notably the implementation of micro-interactions and illustrative content, I wanted to use this as a basis for another development project I was experimenting with at the time. This function being some JavaScript code written to selectively display elements dictated by their relevant tags, a.k.a filter champions by role. I wanted to incorporate some of their dominant visual markers so users could recognise the affiliation with the game without it being stated explicitly. The most noticeable being the dominant gold/blues found throughout the branding on both the site and in-game UI. The intent is not to create a carbon copy, but to facilitate recognition in those who are familiar with the product.

Boulder Yoga

Role: UI Design, Web Development

When I first began learning to code up web pages, one fundamental skill involved manipulating content within the DOM by means other than directly dictating those changes within the HTML. In this instance, those changes were the times of the classes, which as I’m sure you can understand are subject to change and thus require flexibility. My approach to the design was to keep visual clutter to a minimum and foster a web experience similar to that found in the practice of yoga; clear and devoid of noise.

The primary purple was chosen in no small part due to its connoted tranquillity and spirituality, something which paired harmoniously with pink accentuation. A small detail which might be overlooked is that the background of the ‘Boulder Yoga Classes‘ section is not a solid colour, but is instead broken with several low-opacity pink radial gradients. Something to break up the uniformity of the class cards, especially considering these are not completely opaque.