Geoff Goode

Business 3.0
UX/UI Design & Development

Business 3.0

Social App | UX & UI Design

Brief

The purpose of this product was to enable large businesses to undergo significant strategic change and maintain productive momentum. The aim was to create a tool that would allow various different businesses to communicate change to it's employees and also teach the employees to communicate and train eachother.

Method

The main problem faced in designing this product was to create something that could be re-branded and re-used for multiple clients while adapting the UX to suit each company's individual needs. For each iteration of the product that was later named 'Fuel' rigorous user research was conducted by interviewing the client's employees and also industry experts to gain a greater understading of how to solve the problem. The seondary problem was to create a 'hook' within the app that users would return to time and again despite the fact that the content within the app itself may not be of the upmost interest to them. We tried to solve this using various gamification methods as well as captivating UI and interaction design.

Outcome

My resposibilities within this small agile team were to conduct user research and design the user experience, layout and UI and also help with the front-end development of the product. The final outcome was a beautifully designed, cross-platform and responsive app with a suit of features that could be iterated and adapted for both new and existing clients and used on a range of devices from mobile to tablet and desktop.

Debenhams
UX/UI Design

Debenhams

Website Rebrand | UX & UI Design

Brief

To develop and research the UX and UI for the header, primary navigation and shopping bag of the Debenhams website to fall inline with the companies recent rebrand.

Method

We researched and created updated personas for the various people who would use the site. Using Axure I created a layout, sitemap and information architecture for the contents of the site. When this was approved I applied the newly designed UI elements to the new header layout to create the final product.

Outcome

The result was a new and improved header, primary navigation and shopping bag design that worked across all platforms and devices showcasing Debenhams’ new brand style. This design was then handed to the developers with instructions about the many various interactions that were required from the individual elements on the page, resulting in the site that is currently shown here - www.debenhams.com

Farfetch
Email UX/UI Design

Farfetch

Email UX/UI Design

Brief

To research the best UX and design the UI for a ‘Welcome’ campaign. This consisted of a suite of emails that would encourage new subscribers to the website to divulge more details about themselves in order to be able to target them with marketing material more accurately. Simultaneously the emails were designed to add a ‘personal touch’ and build a relationship between the brand and consumer. The final product would have to be responsive for both desktop and mobile.

Method

Using link tracking and analytics we were able to determine the gender of the recipient and therefore send them relevant further emails to eventually encourage them to buy products. We also let the user to a ‘preference centre’ where they were able to fill in a form with more details about themselves as well as dictate the type of content that they wished to receive. After wire framing we user tested three prototypes to narrow down the most effective solution.

Outcome

The result was a suite of four emails for the Welcome Campaign that would be sent one week apart from each other. This led the new subscriber on a journey from an introduction to Farfetch to a transactional email where they were presented with products to buy based on their preferences.

Other Projects

Here are some other email designs that I created for both desktop and mobile browsers throughout my time at Farfetch.

Bookatable
UX/UI Design

Bookatable

UX & UI Design

Brief

The aim of this project was to create a 'sign-up & sign-in' function and 'my account' area for the current Bookatable site. It was important that the design suit the current responsive functionality of the site and work seemlessly across desktop, tablet and mobile devices.

Method

I first conducted research into competitors sites which already had this functionality to guage what I thought were good and bad user experiences. This then gave me information needed to create my own mini site-map and customer journey for the sign-up process. From there I created a series of wireframes for the login screen as well as the 'my account' area that could later be fully designed with the complete UI.

Outcome

The result was a collection of screens that showed the complete 'sign-up' process, both on desktop and mobile devices. I also created example screens of what the 'my account' section of the site could look like and what functions that area could include such as reward points, past and future reservations and favourite restaurants.

Jaguar Land Rover
Mobile App UX/UI Design

Jaguar Land Rover

Mobile App | UX & UI Design

Brief

To research the UX and create the UI for an IOS and Android App for tablet and mobile. The app would be used to assist the Jaguar Land Rover sales team by giving them up to date information about their products, the latest marketing materials, sales techniques and an online customisation tool to enable the sales person to design a car live with their customer.

Method

We conducted the research by interviewing several of the sales team to find out the exact requirements of the app and what features they would find most beneficial. I then created interactive mockups and prototypes using Sketch and InVision to show to key stakeholders before developing a final product and presenting it and the various interactive elements using Adobe AfterEffects.

Outcome

The result was a collection of visuals of every screen within the app with detailed instructions about the interactions and animations that could them be handed to the developer and then turned into a fully functioning mobile application.

Estée Lauder
UI Design & Development

Estée Lauder

Web App UI Design

Brief

To design the UI for a web application that would act as a training manual for sales staff and makeup artists. The app would contain marketing materials, sales techniques and training videos as well as the latest adverts and company news. The app would be updated and new content supplied on a monthly basis.

Outcome

Using the existing company style guide for the corporate website I created a masonry layout that could display a variety of different media, each ‘tile’ able to take the user to a unique page with further information about the topic they require. There was also a search function and filter that would allow the user to quickly find the information they require and also navigate to previous or archived content.

Homebase
UI Design & Development

Homebase

UI Design & Development

Brief

The brief for this project was to design and develop a template for Homebase's 'Store Locator' pages. The pages were to display in-depth information about each store as well as it's staff and also show up-to-date news and comments from the manager and customers.

Method

After conducting some research on competitors' and other sites, we interviewed several customers and staff members in store to gather information about what information that would like to see displayed on the page and the importance of the information. We then constructed wireframes of a overall template that could be applied to all store pages before finally creating a few examples of a finished UI.

Outcome

The result was a new template that could have any and all information applied to it from each individual store, thereby effectively creating an individual 'micro-site' for each and every Homebase branch.

Other Work

Here are some other examples of UI design and development projects that I undertook during my time at Homebase.

Fifa 16
UX & UI Design

Fifa 16

UX & UI Design

Brief

The brief for this project was to create a microsite for the launch of the latest FIFA computer game, FIFA 16. The site was to include trailers, marketing material and information about the game and it’s features as well as information about where the game could be purchased from.

Method

Based on some of the graphic elements for the game itself and it’s packaging, I created a series of UI elements to be used on the site. I then created a wireframe and researched and experimented with various animated elements to make the page as interactive as possible. When this was approved I created the final UI using Sketch and built the page using HTML, CSS and JQuery.

Outcome

The result was a fully functioning microsite with detailed information about the game to allow potential buyers to see actual gameplay footage and new features that improved on the previous version of the game.