UI/UX

JD Williams VIP Web Page Design

BRIEF: Design and build a new responsive VIP Page based on a supplied Leaflet sent out to customers. The feature will entice customers to sign up to a new VIP account and gain access to rewards and perks offered by JDWilliams.

PROCESS:

  • Initial research was carried out to determine points of interest and areas of significance to highlight from the leaflet and maximise the attention of the user.
  • The wireframe outlines possible functionality that could be included to expand the content. Also consideration on how external tools such as Monetate could interact with areas to create a more personalised experience.
  • A large amount of content was provided. Without much imagery supplied the challenge was to arrange the content in a pleasing following the leaflet.

SOLUTION: Discussion on how to arrange the content and printed examples guided the initial structure. A bold colourful page where defined areas of interest were framed. The use of bold flat colours kept the design simple and easy to read.

CLIENT | NBrown PLC


BRAND | JD Williams


WEBSITE | jdwilliams.co.uk

Gift Finder Functionality & Dress Icons

BRIEF: To implement a new gift finder feature to help customers discover the perfect dress for their shape.

PROCESS: Research was carried out to identify brands with similar functionality and layouts. Each of the 4 sections aim to offer clarity and direction in a fresh format with the brand pastel on click colours and custom drawn dress illustrations.

CLIENT – NBrown PLC


BRAND – Ambrose Wilson

Style Guides for Seasonal Site Refreshes

Each season after completing a brand redesign I put together some style guides and UI packs for the design team to follow. These would usually include fonts, buttons, icons and colours. Sometimes I also include guidance on how promotions could look. Although as long as the brand follows the same fonts offer styles can follow latest trends and new ideas.

CLIENT – NBrown PLC


BRAND – JD Williams
Marisota
Simply Be
Viva La Diva

Product Window Banners

BRIEF1: Design a product window that can fit across a range of device widths whilst displaying bold photography.

PROCESS: Designing across multiple device widths is always a challenge. Instead of thinking about targeting specific devices I try to consider how the banners should work regardless of device width.

CLIENT – NBrown PLC


BRAND – JD Williams

Multivariate analysis

BRIEF2: Design some apple banners to fit various areas of the site. Create a mockup of the tech devices on sale. Ensure all content is clear.

PROCESS: When creating banners for different areas of the site consideration is taken to ensure that they are designed for the customer journey.

CLIENT – NBrown PLC


BRAND – JD Williams

Web

WEBSITE


MARISOTA.CO.UK

Marisota Site Refresh

Fully responsive refresh based on user stats from a split test of several new wireframes. Responsible for full site wireframe, design and build including product windows, landing pages, social media and cross-promotional banners. Designed to be fashion-forward and visually appealing to gain the ability attention of target audiences.

CLIENT | NBrown PLC


BRAND | Marisota

Home Trends Web Page

BRIEF: To design and develop a new fully responsive home trends page. Strengthen the use of brand photography over content.

PROCESS:

  • Research into competitors websites gave insights into better navigation functionality for browsing the different trends.
  • Wireframe designed to maximise use of photography.
  • Content minimised, but not hidden so much that the customer could not access it.

SOLUTION: The sticky nav provides easy access to the different trends on the page. Also a carousel was introduced for more lifestyle product photography on each trend. The layout was simplified to allow for each trend to be repeated. On mobile a drop down feature for the content ensured the photography took center stage.

CLIENT | NBrown PLC


BRAND |

JD Williams
Marisota
Home Essentials

WEBSITE


MARISOTA.CO.UK

Marisota Christmas Campaign

Improvements to layout based on previous designs and customer feedback. A multi-channel campaign to advertise across the brand creating commercial opportunities and maintain the interests of the target audience. Cross promotional banners included product windows, social media and homepage features. Responsible for the entire project from initial wireframe to final design and build.

CLIENT | NBrown PLC


BRAND | Marisota

WEBSITE


simplybe.co.uk

Simply Be Shapewear Campaign

Fully Responsive design and development of a new Shapewear Range showcasing a well-known TV personality. The slideshow needed to fill as much of the screen on each device size as possible. It also needed to be inclusive of a popup video. which involved sourcing two jQuery plugins that worked well together.

CLIENT | NBrown PLC


BRAND | Simply Be

WEBSITE


marisota.co.uk

Black Friday Campaign

Fully Responsive design and development for fashions most anticipated event of the year. This included the implementation of a live countdown on a landing page. Homepage sale sections were also created for each day of the week to maximize the potential income.

CLIENT | NBrown PLC


BRAND | Marisota

UI Design & Branding of Travel Websites

UI Design of leading travel websites. Creation of cutting edge package holiday interfaces, branding, logo design, copywriting and website designs passed to a team of 30 developers.

CLIENT | CSI MEDIA


BRAND |
Ninety East
Carrick Travel
I Love Travel
Flysearch
Full Circle Travel

Favourite luxury travel website

Designing an alternative travel site that promoted travel experiences rather than just holiday packages. I love travel was an especially creative brief. An inspiration tool was also implemented to assist with the customer journey. My job was to design the UI and layout of each page throughout the site and think of ideas to enhance the customer experience.

Development

Homepage Wireframe Development

Advanced fully responsive homepage developed to optimize SEO, be updated on a regular basis, change over time and offer more flexibility. The below example was also created to support designers with updates. Each element was carefully considered to allow designers to change the build almost like components. As the design changes on a weekly basis the custom framework needed to be flexible and easy.

CLIENT | NBrown PLC


BRAND | JD Williams

WEBSITE


Simplybe.co.uk

Younger Fashion Custom Video Player

With the demise of flash, JDWilliams brands Fashionworld and Simply Be were looking for a new solution to add videos to the site integrating a new ‘Shop the Ad’ feature that worked across all platforms. This required research into a variety of JQuery plugins and modifying them to work on a separate server. A merge of two plugins was developed to offer the advantage of a gallery.

CLIENT – NBrown PLC


BRAND – Simply Be

Creating Reusable Banner Components

Ongoing projects to create reusable banners for the online team to use as starting templates for fast delivery of sale banners. Below are just two examples from a folder of various banners that have different layout requirements. Main homepage sale banners and under navigation banners are the two most used on the sites. These needed multiple choice layouts that were flexible and easy for the design team to make use of.

CLIENT – NBrown PLC


BRAND – JDWilliams

Multiple css backgrounds

Development & design of new Joe Browns PW banners. Recently with new css trends it has become possible to layer backgrounds. Joe Browns was the perfect brand to test this effect on and with the dropdown effect below there was also a nice movement within the sky background.

CLIENT – NBrown PLC


BRAND – JDWilliams


Illustration

WEBSITE


vivaladiva.com

Using Illustration in Banner Design

As an Illustrator the opportunity often comes up to design something exciting that stands out over other brands. Working on Viva La Diva I created some highly graphical sale banners and backgrounds that added context to footwear brands.

CLIENT | NBrown PLC


BRAND | Viva La Diva

WEBSITE


vivaladiva.com

BRIEF: To design an eye catching promotional page of various shoe brands to be used throughout the seasons. Clear call to actions and stylist tips to assist with browsing.

Trend Shop : Enhancing Backgrounds

Many footwear images are supplied with white backgrounds in fashion. On Viva La Diva it was up to me to give the product images context. The style of a shoe, boot or bag opens up a world of conceptual visualisation. Everything from the season, the brand, the material and the quality has an influence on creative decisions.

The aim was to bring the shoes to life by creating a showcase to inspire the customer to shop and emphasise the luxury shoe brands on offer. Existing customer research as well as competitor sites were used to analyse how to give each slide a more edgy appealing look. The accordion was implemented to maintain the visibility of the trends in a fresh way whilst maintaining the large promotional area to show each unique trend.

CLIENT | NBrown PLC


BRAND | Viva La Diva

Accessorizing Photography

Sometimes backgrounds are very plain. Although it is generally advised to stick to brand guidelines occasionally there are brands which require more creativity.

  • For Crazy Clearance I used a photograph from Scotland I took of some wild flowers. I felt this complemented the patterned dress.
  • On a Schuh image for Viva La Diva I added context and visualised a yellow brick road. As the shoes are red they reminded me of The Wizard of OZ

CLIENT | NBrown PLC


BRAND | Viva La Diva

Creating Icons Style Guides

Sometimes its easy to find an icon pack for web projects, but on occasion there custom assets required for certain projects.

  • The swimwear icons were created using inspiration from live products on the sites. Each one references a particular style.
  • The Mattress Guide icons were created from a mixture of supplied low res research. Some of the concepts were there so I needed to produce high quality scalable SVG icons

CLIENT | NBrown PLC


BRAND | Viva La Diva

Print

WEBSITE


MADSTHEATRE.org

Designing posters for seasonal local plays

MADs Theatre is a wonderful local community and reminder of Macclesfield’s colourful past. I have been proud to design many posters. Apart from poster design I have also helped to design the website, support backstage, work behind a bar, steward and serve tea and coffee on play nights.

CLIENT


Mads Theatre

Photography

WEBSITE


Simplybe.co.uk

Simply Be Model Competition

BRIEF: To design and engaging page showcasing the Model Competition and the Winner. Needs to be bold and sparkly.

PROCESS: I was invited to a Simply Be Model Competition and decided to take my camera along. Although there were filmography crew available shooting the models it later emerged that I was the only person with a camera taking still photography. When I designed the web page I was asked if they could use my photography on the page.

CLIENT – NBrown PLC


BRAND – Simply Be

[metaslider id=2594 cssclass=””]

Email Design

Responsive email design has been a part of my job even before much of the industry adopted it. Some brands have completely scrapped the need for a desktop option. Occasionally live text is used, but the majority of emails are sliced images which switch between desktop and mobile. Occasionally animation is used for the top of emails and hero banners.

CLIENT – NBrown PLC


BRAND – JDWilliams

WordPress

WordPress Theme Development

As a longtime user of WordPress, I’ve designed and developed many websites on the platform. After using other people’s themes and discovering the many limitations of using them I decided to teach myself how to develop the PHP side. I drafted up a list of functions I wanted to learn and collected research to help me achieve these functions. Over the space of a year in my spare time, I created 14 WordPress themes.

Supporting 14 themes has been both challenging and rewarding. I am currently developing a new theme, which will be released soon on https://brightmist.co.uk.

WEBSITE

Madstheatre.org


BRIEF: Complete redesign of MADs Theatre website. Identify areas of improvement, promote the theatres plays and sense of community to encourage people to join.

MADs Theatre WordPress Design

PROCESS: MADs website was out of date and lacked the responsive code expected from mobile devices. Some important details for promoting the theatre were hidden within the main pages of the site. The task was to develop a totally new concept that make the theatre look a more engaging and inviting place to visit.

SOLUTION: A list of user research was collected from members of the theatre to understand areas of importance. The insights helped to form a hierarchy of which sections of the theatre needed to be more prominent than others on the site. The final solution helped to promote the theatre with strong photography, visible call to action for buying tickets, easy to see posters of each play, a history reference and a strong social media presence.