JAMIE DRY
UX Design Project
Project Orange was a very ambitious project to design and develop a new Thomson Local platform for customers to view and purchase products and services, build and manage their website and access products and billing information. This project consisted of 4 core elements:
Design and develop a Web-builder platform enabling the customer to build and manage their websites from a selection of pre-built templates.
Design and build a selection of templates with customized layouts, content and images and accessible through the new Web Builder platform
A customer dashboard for customers to view and manage their Thomson Local products and services.
Design and develop a new Thomson Local E-commerce website where customers can view and purchase products and services
Project Research
Before we could start building a platform capable of building template websites, we need to establish what our competitors were doing and what our customers wanted from a website and website builder. We looked at everything from the basic requirements of a website to editing building blocks. Here is a selection of screenshots from the research I did.
Anatomy of a Website
Basic Requirements
Template Headers
Navigation
Headlines
Website Footers
Content Blocks
Editing Content
Content Examples
On Page SEO
Typography
Font Combinations
Content
<
>
Web-Builder
The template website builder would automatically build a website and assign a domain name based on company name and heading information (Industry). The customer or web builder would then have a series of options to change template design, content, images and colour etc. We needed to include features that would enable staff to perform a customer search, assign email addresses, process DNS transfers and allow our content writers to make notes while on a content call with the customer.
Site Wireframe
Once we had established the site requirements, I built the first site wireframe in Adobe XD. I created this video using XD, to walk my colleagues through the whole process.
Template Wirframe and Design
Below is a selection of pre-designed wireframe elements suitable for a business website. Click any image to view.
<
>
x
Template Design
Using the wireframe elements we were able to create a template structure that could interchange with all the available elements.
Headers and Heros
As we started to look at the template designs in more detail, we started with the headers and hero image layouts. Click any image to view.
<
>
x
Customer Dashboard
The customer dashboard would be accessible through the new corporate e-commerce website as well as thomsonlocal.com. We wanted to give customers more control over their advertising products and a way to communicate with their account manager. Once a customer has signed in they would be able to view their Business information, billing and invoice, Users and security, products, notifications and messages, contact information and much more.
Corporate Site
Sign In
Customer Dashboard
Adobe XD mock up
Click any image below for more information
<
>
x
