UX Designs

Two design pages of BriteThings AI

2pageDesign-UX process
2pageDesign-UX process

The goal for these two design pages is to ensure that the user can read and understand how many electricity saved when they used BriteThings AI (artificial intelligence system) and how.


Summary

In this process story, you will read my first round of this design solution from analysis, persona, and sketches to low fidelity usability tests. Then you will read my second round for this design solution from user study on competitors’ websites, evaluated the existing website, storyboard, user journey, navigation system, sketches, UI design, online high fidelity prototype, usability tests and online test until the design solution approved, then I provided documents of UI designs, wireframes, redline and style guidance to development team.


Process

When my client contacted me for these two pages design, I thought she needed user interface design for these two pages. She did tell me she needed me to design the user interface for these two pages

Old Two Pages
Old Two Pages

When I carefully evaluated and estimated these two pages, I discovered that I needed to improve user experience on these two pages before I designed the user interface on them to help the user to easily find the information they need on these two pages.

I started the information architecture for these two pages. These two pages provided a lot of information to the user but these amounts of information were messed up and confused the user. I used card sort and notes to analyze the existing information and then drew the information architecture to make sense of these amounts of messy information.

Analysis
Analysis

Did you remember James–Our website’s personas? (Read “UX Design: BriteThings Redesign Website”)

Persona James Craig
Persona James Craig

Next, I put James in my design process. While I was drawing sketches to explore visual solutions in the ideation phase, I kept thinking about what James was interested in when he arrived on this page, and how fast he would get the information he was looking for.

Ideation
Ideation

After I finished my ideation, I quickly tested and evaluated every visual solution I had, and then I selected the best visual solution from sketches. I noticed the data in the table had the relationships to each other. After tested and evaluated every visual solution, James may like to present data visually that showed the relationship between the data in a quick glance.

The Best Sketch
The Best Sketch
Relationship
Relationship

The best sketch presented the relationships between the data. In Picture Relationship above, you could see the left picture presented data in the table: in every 500 devices, their real-time energy demands were 26,880 (w) meant BriteThings AI turned on 40% devices that need to use. Therefore, BriteThings AI helped the building to save 42,000 (kwh) on every 500 devices. On the other hand, if the building were not installed BriteThings AI, the energy usage of every 500 devices would be 96,000 (kwh). On the right picture — the best sketch, I presented their relationships. I put 500 devices separate on the top to indicate the device unit for this measurement. I put 26,880 (W) to separate to highlight the energy these 500 devices actually used for a short glance. Then I put a pie to indicate their relationships: the whole circle presented the usage of 96,000(kwh) before the company installed BriteThings AI. The empty part of the pie indicated that BriteThings AI helped the building to save 42,000 (kwh), and the shade part of the pie demonstrated 40% device actually in use, which was equal to real-time demand 26,880 (w).

Basic on the best sketch, I drew paper prototypes and ran several usability tests.

Usability test 1: James needed to visit building 2 data on Building Dashboard.

(Video: Usability Test 1)

Usability test 2: James wanted to see the Building 1 and Floor 3 date on Building Dashboard, then he went to Heat Map page


(Video: Usability Test 2)

Usability test 3: James was on the Heat Map page. He wanted to block 26-50% and 51%-75% and saw the rest of the data on the Heat Map. Then James backed to Building Dashboard page.


(Video: Usability Test 3)

Usability test 4: James was on the Building Dashboard. He wanted to see all the information on Buildings and floors under his name.


(Video: Usability Test 4)

I sent these paper prototypes, videos of usability tests, and a video of explanation about my design concept to my client and waited for the feedback.

A few days later I received the feedback from my client and her development team. It seemed like the developers needed to work hard to present the visual data relationships on the website. They preferred other solutions. We had a short conversation and my client wanted me also to improve the user experience and design the interface of the first page (I will call this page as the first page) where the user arrived after the user signed on the website.

I played a little on the first page and tried to find where I would be on the new two pages (Building Dashboard page and Heat Map page) from the first page. I also did a quick user research on competitors’ websites and analyzed them.

(Video: User research on competitors’ websites)

(Video: Analyzed the existing website)

I discovered that there were problems on the first page. Therefore, I used James as my persona, James’s scenario, storyboard, and James’s journey to help me figure out:

  • What were the problems on the first page?
  • What were the pain points for James when he was in his journey from the first page, to Building Dashboard page, until arrived Heat Map page?
  • How did James arrive at Building Dashboard page from the first page?
  • How did James arrive at Heap Map page from Building Dashboard page?
  • What did James expect after he signed in and arrived the first page?
  • What did James expect when he arrived at Building Dashboard page and Heat Map page?
Storyboard
Storyboard
User Journey
User Journey

The problems on the first page were the navigation system because James was confused on the navigation system. Therefore, I made changes to the navigation system to help James easier on his journey.

As Picture Navigation above, I made these changes:

  • Add BriteThings logo, so James was able to go to other pages.
  • Add Dashboard. When James signed in; the first page was Account, which was not common sense for an admin system. It should be Dashboard with all necessary data reports at the glance.
  • Moved Account after Orders and moved Overview and Profile under Account submenu.
  • Name Changed: ”Users” to “Managers”. “Users” was too generic and not clear to communicate with James. However, James was a CEO, “Managers” for him made sense than “Users”.
  • Removed shopping cart, it seemed not useful.
  • Name changed on three pages that I was designing: “the first page” to “Dashboard” and “Building Dashboard” to “Building Overview”.

The pinpoints for James’s journey were the navigation system on these three pages: Dashboard, Building Overview and Heat Map page. By usability tests, James was confused and always guessed which button he should click to lead him to next step.

To help James on his journey, I drew quickly several sketches to explore the solutions in the ideation phase and selected the best one that James felt easier from Dashboard to Building Overview page, until arrived on Heat Map page.

Then basic on these sketches, I expanded them to small screen size (mobile), medium screen size (tablet), big screen size (desktop), and larger screen size (desktopHD). There was a challenge on the Dashboard page when I expanded the design on small screen size (mobile) and middle screen size (tablet). It was hard to read the table on small screen size (mobile) and medium screen size (tablet) because the table was screwed up and elements on the table became very tiny. To solve this problem (as Picture Table Size below), I changed the table from horizontal on big and larger screen size to vertical on small and medium size to maintain readability on every device.

Table Size
Table Size

(Video: Sketches)

After I ran usability tests and successfully achieved the goals, I moved my design process on the computer. I used Sketch (software) to create the user interface for high fidelity prototypes. I adopted the existing style guide from BriteThings Website to these three pages designs. Then I used Axure (software) to make the online prototypes. (http://w9pxxk.axshare.com/signin.html) Then I tested them online for differed screen size and accessibility for Daltonism.

Dashboard UI Design
Dashboard UI Design
Building Over UI Design
Building Over UI Design
Heat Map UI Design
Heat Map UI Design

(Video: Online Simulator test)

I sent the designs, an online prototypes’ link and a video with the explanation to my client.

A few days later, my client approved my designs. She was really satisfied with them. I provided the wireframes, redline and style guidance to her development team.

Wireframes
Wireframes
Redline
Redline

As you could see on Picture Redline, I provided the original color with HTML for text style, Red color with the background for picture width and height, and blue color with the number for the distance between texts, pictures, and edge.

Style Guidance
Style Guidance

Reflection

I learned a lot here. I learned that I should put existing function consideration in the design process; therefore the developer would easier to merger UI design with existing function. I also learn that persona, user journey, and usability tests can help me to find the problems, pin the problems and come out with solutions.