UX Design
I have been designing and coding websites for over twenty years and this has enabled me to build up an extensive knowledge of web design, UI and UX. My skills include enhancing the user experience through research, prototyping and testing then coding approved designs using html, css and jQuery. I can also further improve the user experience with animated web advertising, illustrations, micro interactions and video.
Please scroll down to view a selection of my recent work.
Esquire Records Exhibition Space
A new collaborative project between Serious, EFG Private Bank and the artist Stefano Lugano showcasing album cover artwork on the Esquire Records label from US and UK releases.
The Brief
Allow visitors to see this fantastic collection of curated album covers and learn more about the remarkable differences between the UK and US releases. In addition, the brief indicated a requirement to include audio and video content, a live streaming video, and interviews with the artists and producers involved with Esquire records. Another function of the site would be to have a way presenting of mediated contributions from the public - inviting people to send in their reminisces which led us to create ‘The Memories of Esquire’ page design.
My Solution
I thought it would be interesting for the landing page of the site to open up as if a door were opening to ‘The Cover Club’ a fictitious jazz club with an entrance and various rooms dedicated to different sections of the exhibition. The viewer would be able to take a journey through the ‘Photo Room, “Art Room’, 'Gallery Room' etc. whilst listening to audio and video interviews, Spotify playlists and viewing images carousels containing cover artwork for both the UK and US versions.
The cover artists include Val Wilmer (a renowned jazz journalist and photographer) and Ralph Steadman (an artist whose work includes the famous cover for Fear and Loathing in Las Vegas by Hunter S Thompson and Pink Floyd’s, The Wall).
KEY SKILLS : ui / ux / Interaction Design / Conceptual skills
Advertising awards UX wireframes and flowcharts
// JUNE 2020
Currently I am working on designing user journeys and wireframes for a prominent recruitment advertising awards site. After user testing I will be perfecting the UI design with a high resolution protoype built on the evesssio awards platform.
KEY SKILLS : xd / ux / ui
Vivid Associates
This is a website design and build for Vivid Associates – an award-winning design agency with a proven track record in website design, graphic design, advertising and print design offering creative graphic design solutions for major clients in the UK, America and Europe.
KEY SKILLS : graphic design / uX / css / xhtml / photoshop / illustrator
VIEW UX PROCESS
Interaction design
Animated panels for evessio virtual event software coded using css.
KEY SKILLS : uX / css / html
evessio
evessio animated feature panels
1. Goals
The client requested a solution for highlighting their virtual event guide panels in a manner that will interest and delight the customer and be mobile responsive.
2. Research
We researched various panel animations online as well as the latest animation techniques using css and javascript. We decided that a css based animation would meet the client's requirements and also reduce load time on the page.
3. Design
After a few initial drawn visuals we decided to use this animated panel format with additional information triggered on mouse over. We sourced vector based illustrations and redrew them into two svg frames of animation.
4. Build
The animation effects are achieved using only html, css and svg files (for clarity as these are vector graphics). A combination of the css transition property in sass format negated the use of javascript. The animation stacks for mobile and the hover over effect removed with the additional information set to visible.
5. Feedback
There was an excellent response noted from site users via analytics with higher click through rates and key clients responded positively to the animation, function and style and when contacted for their opinion via email and phonecalls.
The Pent Awards
The Pent Awards are a leading package design awards website dedicated to sharing and bringing exposure to global packaging design. These visuals won the initial design pitch. The user experience for entering the awards categories was improved with some lateral thinking and bespoke jQuery tabbed panels. You can view the UX process we used by clicking on the button below.
KEY SKILLS : ux / xd / illustrator / css / xhtml
VIEW UX PROCESSThe Pent Awards
The Pent Awards UX Process
1. The User
The initial brief and subsequent research indicated that key users of the site will include:
- Packaging designers who have been entered for the awards.
- An international panel of judges who will vote and judge online.
- Sponsors who will manage their own profile information.
- Packaging design companies who will be entering the awards and buying tables.
- Anyone interested in packaging design including journalists will also be visiting the site.
The UX and user journey will be different for each of these users.
For example: sponsors will need to update their profiles via the cms which would then be displayed on the sponsors pages; judges will need to be comfortable with creating their own accounts and profiles whilst also understanding the online judging process; award nominees would be required to provide supporting information for their nominations.
The Pent Award has a strong brand and a dedicated online following with leading global packaging designers and companies. The site should adhere to brand guidelines whilst showcasing the award winning designs.
2. Research
From past experience and analytics the client has informed us that most of their users are comfortable with modern technology and browsers and over 80% of users interact with the awards via a pc interface rather than mobile.
Research via customer feedback from previous awards has discovered that The Pent Awards users have found the award category process confusing and awkward to use.
This was addressed at the initial design stage using a hand drawn sketch then incorporated into the prototype stage with a redesign of the category panels using bespoke javascript tabs. Both the client, focus groups and users much preferred using the new design.
Usability testing was conducted of sample users before making the site live.
3. Analysis
User personas were supplied by the client and used to influence the design and functionality.
User journey diagrams were constructed for each user type to reduce pain points and reduce time spent entering the awards and judging the winners.
4. Design
Wireframes were used clarify the site structure and content saving time in the design and development process.
5. Build
The evessio events cms was used to create a high-fidelity prototype, when approved the site was built and styled using a theme with bespoke css and javascript.
6. Improve
Frequent client feedback is improving the site UX and design, adapations have been made to the image slider for ease of use and the news page has been simplified as requested by the client.
Further development work on the entry process is in progress.
L'Oréal and Wella email designs
L'Oréal and Wella marketing email designs and coding in html.
KEY SKILLS : graphic design / css / xhtml
SZ&W Kitchens
Using hand drawn wireframes and Adobe XD prototypes was able to successfully redsign the UI for this global retail company showcasing their two main products for high end fridges and kitchens. A differention between the products was acheieved via colour coding and icons, making the user journey easier to navigate. The client required a more 'lifestyle' approach to the overall look of the site which was achieved with a change in the layout and photography
KEY SKILLS : ux / FIGMA
evessio
Evessio is a software platform that hosts, manages and runs awards, conferences and exhibitions. Evessio delivers all the functionality required to run these type of events in one environment. I was initially asked to design the logo and branding which was successful – this lead to web designs, email designs, animation and social media promotional projects. I was also asked to redesign and simplify the booking process UI/UX.
KEY SKILLS : ux / graphic design / BRANDING / conceptual skills / animation
