The BCR

Duration

Dec 2022- Mar 2023

Tools

Figma

Type

Web Design

Role

UX/UI designer

Duration

Dec 2022- Mar 2023

Tools

Figma

Type

Web Design

Role

UX/UI designer

Overview

Designed to enhance professionalism and attract users.

Directly to Final

👇

The project focuses on optimizing BCR's website to enhance the company's digital brand image and increase user registration conversions. The website is a vital online presence and promotional channel, but currently only 1% of users are registering from the web, with feedback including difficulty in finding information and doubts about professionalism. Our goal is to enhance brand professionalism, visual appeal, and user experience to improve user satisfaction and drive higher conversion rates.

Challenge

Using the "How Might We" method, I have analyzed the company's objectives and user pain points and distilled the following three key challenges:

How Might We enhance the company's professional image and reduce user skepticism?
How Might We improve users' accessibility to information and enhance their overall user experience?
How Might We boost user registration rates?

‍

Solution

In response to the aforementioned critical challenges, I've formulated the following UX-driven solutions:

Create a design system align with the company's brand to ensure visual uniformity. Craft visually enticing web designs in accordance with CFD industry standards.
Streamline the navigation bar and information architecture to facilitate users in locating essential information effortlessly, thus enriching usability and the user experience.
Create a captivating landing page to entice users to linger longer and optimize the registration process by mitigating registration barriers.

Discover

Pets keeping essentials

Initial research focused on identifying target users for the robot pet sitter through background research to better understand the user's needs in terms of pet keeping as well as measuring the importance of these needs within the target user group.

FOCUS AREAS

What groups have the greatest demand for pet robot sitters?

Which features are essential to raise pets?

What technology products exist for smart pet keeping?

What are users current pain points with existing products?

Background Research

Do you Know that?

197%

increase in the number of pet dogs and cats in China relative to 2017, expected to overtake the US by 2024.

10.8%

growth for pet cats in China in 2020, much higher than the negative growth of pet dogs.

24%

cat owners in China aged 16-25 years old. They have a higher demand for smart pet products.

500%

growth in consumption of smart goods for pets in China by 2020.

Source: 2021 China Pet Industry White Paper

Online Ethnography

Based on background research I identified Chinese cat owners as target users and conducted an online ethnography of them on Chinese social media and e-commerce platforms to understand the essential needs of cat keeping and which smart products and features they are using and how they are experiencing them.

A monitoring camera is essential for me to keep an eye on him, not only to accompany him but also to make sure he's okay.

Cats are not expressive and it is difficult for people to notice anything unusual. I often fail to find out in time that my cat is sick.

I rarely spend enough time with my baby, I use the automatic feeder but I am worried about his lack of exercise and company.

KEY INSIGHTS

All users used a combination of multiple products to feed, monitoring and accompany cats.

Users value the importance of remote control of the robot's switches and separate control of individual functions.

Many people think there is a lack of products to track their pets' health.

A feature that monitors pet health indicators and alerts abnormalities in time is much needed.

Monitoring cameras that can communicate in both directions make users feel better about accompanying their pets

Most users find the game feature very useful for relieving pet loneliness and alleviating their guilt of not being able to be there.

Competitive Analysis

Competitive analysis was conducted to determine the features, strengths, weaknesses and user feedback of the smart pet products currently existing in the market to inform MEOW's features and information structure.

Job To Be Done

Combining key insights from the preliminary analysis, Job To Be Done was conducted to rank the outcomes and satisfaction, and got some design opportunities to focus on. The results showed that health was the most important user concern and needed to be addressed, followed by the play and feed.

Define

Carving out a niche in an emerging market

Create user profiles and personas based on the insights gathered from the discovery stage to further understand the goals of the target users and what features and functions are most important to them, in order to narrow down and prioritise user needs and pain points to guide the ideation process and the design of the user interface.

User Profile

An user profile was created to detail the typical user of a pet-sitting robot based on the information obtained from the user research in order to understand and identify the needs and preferences of the target users.

User Persona

Ideate

Focus on the health function

Afterwards, having all these users' issues and needs in mind, I focused on addressing the "How Might We allow users know their pets’ health status" statements. Rough sketches and lo-fi wireframes were created at this stage.

Sketches

Rough sketches to help me quickly record my initial thoughts and brainstorm my new ideas and share my views with the group to select the best one for development and iteration.

Wireframes

Based on the sketches and the group's feedback, a wireframe and the first high fidelity screen which is Home page based on the wireframe were created to obtain further feedback and iterate in an intuitive way.

Test

Focus on the health function

Two rounds of user testing were conducted, including obtaining feedback from clients to determine where improvements could be made to meet users' expectations, needs and desires.

Testing Results

The status of robot device is unclear.

Some uncommon icons and unnecessary information can lead to user confusion.

Navigation from home to medical record and health index is troublesome.

Quick edit medical record and turn on/off the robot are not available.

The most basic monitoring functions are not highlighted enough.

The angle of monitoring cannot be controlled by the user.

Design Process

More professional and user-centric.

I break down challenges into microtasks through mind-maps, 5whys and brainstorming, and conduct usability analysis using Nielsen-Norman heuristics to guide problem solving and human-centered design principles.

No items found.

Typography & Color

Visual Design Choice

The website background is designed in a deep blue-black color to convey a sense of sophistication and professionalism. The brand's logo color, yellow, is used as the main accent color, with a higher saturation to create a vibrant and eye-catching effect against the dark background.The font chosen is Lato, which has a clear shape, good readability and a modern feel.

No items found.

Solution

Final Presentation

In response to the various problems with the previous website, and in conjunction with the client's requirements, I redesigned the landing page and all sub-pages of the website with over 50 screens including mobile devices, and communicated and collaborated with the front-end IT staff to make it a successful launch.

HOME PAGE

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

No items found.

Basic Functions

IB Center

Click to go to the web 👉.

Reflection

What I learned

Establishing a design system is indeed crucial at the beginning of a design project. A standardized set of design elements, color palettes, and layouts ensures brand consistency and significantly improves efficiency. As the sole web designer in this project, and as a recent graduate taking on my first real-world project, I faced challenges in the early stages due to the lack of a design system, resulting in wasted time and unnecessary detours.

Utilizing Figma's components effectively is crucial, especially for recurring elements like navigation bars and footers that appear on almost every page. Using components can significantly enhance efficiency. In particular, in real-world projects, design changes are common due to feedback from stakeholders. Components enable quick and consistent updates across all pages, saving time and maintaining design coherence.

Effective team collaboration is crucial in real-world projects. A real project involves various stakeholders, including feedback and requirements from upper management and technical considerations from frontend developers. These factors determine the feasibility of the design implementation. Regular communication with the team and timely improvements during the design process are essential to ensure project success and alignment with project goals.

Where to improve

For my own design, I hope to use figma's new features of variables and advanced prototypes to further refine the site's design system and interactions.

In the design world, there is no such thing as a perfect design. Even after a project has been implemented and recognized, continuous improvement and updates are necessary. Factors such as changes in company services, technological advancements, and user feedback can all contribute to the ongoing improvement of a website. It's important to embrace a growth mindset and be open to refining and enhancing the design based on evolving needs and insights.