UX Designs, Visual Designs

UX Design: BriteThings Redesign Website

BriteThings: Redesign Website
BriteThings: Redesign Website

Business goal:

Receive more phone calls from clients to discuss further options.

User’s goal:

Find the answer to how the BriteThings Intelligent Plugin works and find the contact information to make a phone call and discuss further options.

My role:

a UX designer.

Other team members I worked with:

a general manager, a CEO, a marketing manager and an engineer.

Tools:

Post-it!, Axure, Photoshop, Illustrator


Here is the original website:

Original BriteThings Website
Original BriteThings Website

Here is the final website:

Visit the live website


Process

User Research: Analysis of the existing website, compare competitor websites and user interviews

Existing BriteThings website

Original BriteThings Website
Original BriteThings Website

Compare competitor websites

Here are the competitors’ websites:
www.nest.com
www.priceline.com
www.theneura.com
www.myopenroad.com
www.lucidconnects.com
www.epa.gov
www.bosscontrols.com

User interviews

I did not interview the end users, however, the general manager, the CEO and the marketing manager provided me the audio records of the end users information they deal with day in and day out. I listened to these audio records and analyzed these records for my user research to define user groups.

Persona, Storyboard and User Task Flow

Persona

Storyboard

User Task Flow Version 1

After discussing with other team members, I updated Version 1 to Version 2 to clarify the users’ behaviors.

User Task Flow Version 2

Task Flow Chris Roe
Task Flow Chris Roe

Iteration: Site Map, Navigation system

While developing user experience, the site map and navigation system was constantly changing.

Site Map:

Navigation System:

Iteration: Sketch prototype, Usability Test

Iteration: Prototype, Usability Test, Design

Iteration Version 1:

Online interactive prototype: http://dfpv5f.axshare.com/home.html

Iteration Version 2:

Online interactive prototype: http://ylro65.axshare.com/home.html

Iteration Version 3:

Iteration Version 4:

Iteration: User Content for this website

I responded to the user content writing. I wrote the draft version, then discussed with the team members, modified the writing, editing the writing with the team members and finally the team members proofread the content before publishing online.

Final Design

I provided 3 sizes — mobile size, iPad size, and big screen size — of design for each page.

Big screen size:(eg, laptop screen, TV)

Normal screen size:(eg, iPad screen)

Small screen size:(eg, iPhone screen)

Design Documentation

Design Specification

Build Website

The engineer used Word Press to build this website. I supported the engineer by modifying my design to fit his technical skills via usability test.

Final Website

Visit the live website

Please follow & like me!