Screen%20Shot%202021-04-21%20at%209.16_e

WYZE Camera

Product / 

This camera belongs to XIAOMI, it has two-way interaction between a physical camera and phone App.

Role / 

My job in this project was to finish the V2.0 App with PM base on my research of the MVP feedback, I designed wireframes and some detailed App interaction features to improve the user experience. I also made a display page design. The team members included 1 PM (Hao Wang), 1UI designer (Luke), and 15 engineers.

Problem

When I enrolled in this project, there was a V1.0 app launched. However, a lot of users complained about the poor experience due to the bad connection. These were bad user experiences related to hardware problems, I set my goal to solve these problems through more reasonable app designs.

Research

Screen Shot 2021-05-02 at 9.11.13 PM.png
Screen Shot 2021-05-02 at 9.04.03 PM.png

I tried to figure out the problems through 3 methods, 1) digging into feedback and finding which feature details were mentioned, 2) testing the V1.0 app by myself the whole week in different scenarios, 3) watching other people using V1.0 and interviewing them.

For method 1, I organized useful detail features or interactions, and I also did a word cloud on feedback to generate some ideas through these keywords.

                          Part of Method 1                                                                        Method 3

After the previous research, I went through the persona and revised them. Later, I did a bunch of brainstorming and user journey maps, which made the problem ‘poor experience due to the bad connection‘ more specific. I listed some helpful feedback below:

'I always felt confused and lost when I zoom the image.'

'Sometimes, the App is kind of frozen, such as when I open it.'

'It's a nice camera, but the app has bad communication with it.'

Based on the previous research results, two example-specific problems are listed below:​

  1. Long waiting time between opening the app and seeing the image

  2. When zooming the image, the UI looks sluggish because the "Time" shown on the screen is flashing, and no visual cue between zoomed status vs. not.

The good thing is these problems concluded as a "bad connection" can be improved through the UX design.

Design Solutions

1. Animation to decrease the waiting anxiety

For problem 1. Long waiting time between open the app and seeing the image. I divided the waiting time into 3 steps with a little motion, helped to attract the user's attention, and helped them feel quicker than the previous running circle.  I revised the design as below:

                               BEFORE                                                                                     AFTER

                              BEFORE                                                                                      AFTER

Artboard.png
image_1620098725.gif

2. Clear visual cue for zooming

For problem 2. When zooming the image, the UI looks sluggish because the "Time" shown on the screen is flashing, and no visual cue between zoomed status vs. not.  I made the zooming more intuitive. Timestamps zoomed together with the image, solving the visually flashing problem, and the zoomed timestamps could be a cue of the scale of the image. I revised the design as below:

                        BEFORE                                                                                      AFTER

Untitled.gif
Screen Shot 2021-05-03 at 10.58.43 PM.pn
Screen Shot 2021-05-03 at 10.57.06 PM.pn

Test & Outcome

As an improvement design, the test procedures were very similar to the research I did. I tried to get the feedback through 3 methods, 1) testing the V2.0 app by myself the whole week in different scenarios, 2) watching 20+ other people who fit different persona use V2.0 and interviewed them, 3) After launch, paying attention to real user feedback. The test results indicated the revised design for problems 1 and 2 improved the experience. Just 1 week later, the app rating increased.

a.png

1 week after the new design launched

Artboard.png

Website

Another design part I did is the display sales page.  The goal of this display sales page was to attract customers and sell more products.

 

Before I designed the camera display page, I kept asking myself these 2 questions:

  1. Why would customers buy this product instead of others?

  2. How to show our camera's highlights?

Study

I studied 20+ similar camera products sale pages and got some ideas on what we should have, and what we need to improve: most of the pages listed the example photos about how the camera screen can zoom, or how high the image quality can be, just like the pictures show below. With this analysis, I  decided to show our camera product in similar ways, meanwhile, I made some UX design improvements on them.

Screen Shot 2021-04-24 at 12.13.14 AM.pn
Screen Shot 2021-04-24 at 12.15.20 AM.pn

Page Test

Page Design

In the zoom function part, I added 3 clickable buttons '1x', '2x', '4x'. This is able to provide an intuitive idea for customers how the photos can be in the app through the phone screen. The demo is shown below and also can be found through mi.com/xiaofang.

小方点击.gif
小方2.gif

In the resolution function part, I designed an operable moving bar. This is helpful to show how clear the 1080p can be through the same camera. I also used a lovely sleeping baby photo in this part to attract customers to slow down and learn more about our product. The demo is shown below and also can be found on mi.com/xiaofang.

I worked with the engineering team to implement both of these interactive functions and made sure they wouldn't require a lot of engineering effort. The zoom one only requires 3 different images for users to switch between; the resolution one only requires a filter applied to 2 images. Both sections focused on usability instead of the fancy ads' effect.

I did some simple tests with 20 users before the page was launched, the test compared the traditional display page and interactive display page. The feedback I got was as below:

  • the interactive page attracts more attention (20/20)

  • the interactive functions can enhance the goodwill of the product (15/20)

  • they show the function more clearly (18/20)

However, more evidence is needed to support whether or not the interactive display page can increase the quantity of sales.