.png)
Smart Baby Camera Website
Optimize the desktop screen size of the lollipop website to increase user time on page.
Role
Market Researcher
UX Researcher
UX Designer
Duration
February 2021 - August 2021
Team
Shao-Yun Sha, Chih-Ling Chang
Create a Project Timeline
To reveal a clear path forward and maintains the big picture, we first created a project timeline to keep everyone in the loop.
.png)
Define Products & Website Problems
To define the problems and users' demand, we first set the direction that needs to be studied.
Lollipop Branding
-
Set common ground for all product styles under the brand.
-
Define Lollipop Brand Guidelines.
-
Define personas.
-
Unify web page style.
-
Add new product category on navigation bar.
-
Define camera's selling point and the layout of the product page.
-
Conduct research on novice parents to determine the copywriting direction of the baby camera.
Lollipop Baby Camera
Lollipop Tableware
-
Define tableware's selling point and the layout of the product page.
-
Conduct research on novice parents to determine the copywriting direction of the baby tableware.
Persona
Based on in-depth interviews, in which the interviewees were 45 young mothers aged 25-35 from the US, UK, and AU. I created the Lollipop customer persona by integrating market research and in-depth interviews to help the marketing team understand Lollipop customers thoroughly.
.png)
Competitor Analysis
We conducted brand and competitor analysis to establish Lollipop's design style.
Competitors such as Nanit, Cubo, Pixsee, Owlet, and other brands mostly adopt a soft and warm style. To make Lollipop free from the stereotype of baby products, and conform to the product's colorful and flexible features, the lively style can stand out in the market.
Note: In addition to Nanit, the other three competitors all use green as the brand color. Therefore, keeping blue as the primary color can distinguish it from the visual style of other brands.
.png)
Organize Information Architecture
To address the above issues, we first categorized the content of the site to illustrate how the Lollipop site should work.
Sitemap
User Flow-Purchase
Pros:
1. Notify that the product is available on Amazon to increase consumer confidence.
2. Provide users with choices and let users decide to buy on the platform they are accustomed to.
3. Direct customers to Amazon, making shipments more convenient and faster.
User Flow-Searching Info
Ideate Design Solutions
Early Information Architecture
We established 7 factors that the website should meet.
The 7 factors are:
Creativity, Quality, Copywriting, Loading time, Usability, Legibility, and Feedback.
.png)
.png)
Goal Setting- Increase user time on page
We set the design goal after analyzing the data on the backend of the Lollipop website.
To increase the time communicating with consumers about product features, the main goal of the web page is to increase the average retention rate while reducing the bounce rate.
Storyboard
We planned to convey the Lollipop information mainly with sensibilities.
To start with, we drafted two storyboards to present the purpose of the baby monitor- "looking after the baby day and night", followed by five points: cover, event recording, snapshot, sleep tracking, and night vision. In addition, we arranged rational content in order of importance: feature, multi-platform, customer review, awards, instruction, and disclaimer.
My Contribution
-
Market Research: I did research on the baby monitor market to give colleagues an overview of the current market for baby monitors.
-
User Research: I created the Lollipop customer persona by integrating market research and in-depth interviews to help the marketing and UI/UX team understand Lollipop customers thoroughly.
-
UX Design: While working with the UI team, I was primarily responsible for UX research, and building the information architecture. In addition, I often communicated with designers from a marketing perspective to maintain brand consistency.
Build a Component Design System
While prototyping, we built a design system with components to standardize and scale our UI development process.
.png)
Header
Final Design
The final deliverable for the Lollipop website is Figma prototypes for the home page, product page, subscription page, new product page, and contact page. We was extremely proud and happy with the work we've created!
.png)
Learnings
I’m very proud of how this project turned out. Every step of the process was a valuable learning opportunity, and I’m grateful for the opportunity CMO gave me.
-
Entire UX Design Process: Because of this project, I went through the UX Design process and learned new skills such as Information architecture, data synthesis, designing prototypes in Figma, and more.
-
Importance of interviews & testing: It seems to me that I may have come up with the "perfect" solution. But usually it gets demolished after I talk to potential users, so it's crucial not to stay in a small bubble. Talk to users!