UX Designs, Visual Designs

BriteThings Redesign Website

BriteThings: Redesign Website
BriteThings: Redesign Website
  • Project: Redesign BriteThings Website
  • My role: a UX Designer
  • Other team members I worked with:
    • A General Manager
    • A CEO
    • A Marketing Manager
    • An Engineer
  • Tools: Post-it!, Axure, Photoshop, Illustrator, PowerPoint
  • Date: 2017
  • Business goal: Receive more phone calls from clients to discuss further options for BriteThings Artificial Intelligence System or BriteThings A.I.
  • User’s goal: Find the information about how the BriteThings A.I. works and what the benefits the BriteThings A.I has. Access the contact information to discuss further options of BriteThings A. I.
  • Outcome: This company has received an investor’s funding and signed a contract with a big customer for BriteThings A.I. after launching this website for three weeks.
  • Challenge: To clearly explain how the BriteThings A.I works and what the benefits the BriteThings A.I. has
  • Solution to the challenge: Iteration prototypes and usability studies

Visit the live website


Summary

This article talked about my design process of redesign BriteThings website. You will read through user research, personas, storyboards, user journeys, sitemap, navigation, ideation, sketches, wireframes, iteration prototypes and usability tests, document specification, and final design.


Process

I started this project by user research. My client provided me the competitors’ websites, the existing website, materials about her company, her team and her product. We also had a short conversation. All of these helped me to understand my client, her team and her product. I am able to define the business goal of this website. However, I also need information about the user of this website. I talked with my client to ask help. My client arranged me to chat with salesmen and provided me the audio records too. These chats and audio records helped me to understand the user of this website and helped me to define the user’s goal of this website.

User Research
User Research

Here are the Business goal and user’s goal of this website:

  • Business goal: Receive more phone calls from clients to discuss further options for BriteThings Artificial Intelligence System or BriteThings A.I.
  • User’s goal: Find the information about how the BriteThings A.I.works and what the benefits the BriteThings A.I. have. Access the contact information to discuss further options of BriteThings A.I.
By analysis the user information I had, I am able to define the focus groups and created two personas–James Crage and Chris Roe– from the focus groups of this website.

Let’s meet our first persona James Crage:

James Persona
James Persona

 

James Storyboard
James Storyboard

 

James User Journey
James User Journey

Let’s meet our second persona, Chris Roe:

 

Chris Persona
Chris Persona

 

Chris Storyboard
Chris Storyboard

 

Chris User Journey
Chris User Journey
When I analysis all the raw information, James, and Chris helped me to determine what information I should choose for this website and what UX strategy I should use for this website. The old website was a one-page website. I discovered that one-page website was not enough to answer all the questions James and Chris had. Therefore I moved to create the initial sitemap and navigation for this website.

 

Whiteboard
Whiteboard
Basic on James and Chris storyboards, user journeys, initial sitemap and navigation, I draw rapid prototypes and sketches to help James and Chris to quick and easy to find their answers on this website.

 

Sketch
Sketch
In the team meeting, my colleges helped me to add more information on personas in order to make persona more accurate the real users. And then we discussed the sitemap and navigation to experiment the best solutions and also discussed the UX strategy of this website. I updated the wireframes, sitemap and relationship for each other from team meeting feedback.

Then I made my initial high-fidelity prototype index page and publish online for usability tests.

1st Version
1st Version

Basic on the personas, storyboards and user journeys, I created the user tasks for usability tests in the design process.

I presented my initial high-fidelity prototype in the team meeting; I gathered the feedback about the design style, color, font, etc. I updated to the second version high-fidelity prototype and ready for usability tests.

2nd Version
2nd Version

Then I continued to add high-fidelity prototype pages to the usability tests.

3rd Version
3rd Version

I used my friends as the testers for the usability tests, and the other team members used their colleges or friends as the testers for the usability tests. Then we discussed the problems we discovered during the usability tests and how to improve them.

During the usability tests, we observed that:

  • In the index page, the users could not purchase the product in the correct way and felt frustrated.
  • In the pages of Join Us and Partner, it seemed more steps for users.
  • In the page of How It Works, the users could not get enough information when the users were not able to access the video presentation.

In order to solve these problems, I updated the prototypes on the index page, merged Join Us and Partner pages to Join Us page, and added more information on How It Works page.

4rd Version
4rd Version

However, by usability test, the users still could not complete the purchase task in a correct way completely. I had a meeting to discuss with my client and her salesmen about the purchase process to understand their purchase plan.
Then I updated the prototypes to help the user to complete his purchase task.

5th Version
5th Version

I also continued to add more pages or updated the pictures that used in the design, modified the color, font, and layout for the best aesthetic user interface.

6th Version
6th Version

At this point, the user feels easier to finish all user tasks, the video of How It Work also have finished. Therefore I delivery my designs to the developer and provide document specification included the style guide and wireframes.

document
document

However, the engineer contacted me that the purchase process was not matching the existing system function. In order to help the user successful to complete the purchase online, I started research for purchase process. I talked with the engineer to understand the technical restrain for this website, I talked with salesmen to understand how the user purchases the product with them, and I talked with my client to understand what the business could offer for the user. (PS: when I started this project, my client was hiring an engineer. This is why the engineer joined our team at this point, not at the begin when I started this project.)

Now Chris helped me to figure out the problem in the purchase process and the solution for this problem.

I made the prototypes on the index page for the usability test

By usability test, the user easier to complete the purchase test, but the user also distracts or confuse the picture icons sometimes. Therefore, I removed the picture icons for the clarity. (The name of Purchase part is self-assessment—see how you’re doing)

7th Version
7th Version

 

On the team meeting, we run the usability test from user task 1 – user task 5 in the website together, we observe the user confused that why the content of Your Benefit Page as same as the part of self-assessment in the index page. Therefore we merged Your Benefit Page into the index page but still kept Your Benefit in the navigation bar. We kept the request Demo below the self-assessment, removed Apps and sign in part for the clarity.

8th Version
8th Version

Reflection

I learned that user cases and usability tests could really help to measure the user experience and gave the direction of the design. From the picture below, you can see how user cases and usability tests drove the design solution from the start point until to the final point.

Develop Process
Develop Process