REBOX ECO

Velit voluptate ex. Illo modi eligendi consequatur sit impedit.

Challenges & Objectives

The Challenge: How might we streamline complexity within one month?
‍
My segment of the project was dedicated to refining and enhancing a portion of our interface within a tight timeframe of approximately one month. Amidst balancing multiple advertising design projects, my task was to efficiently manage rapid design adjustments—resizing work from other designers by the next day and integrating these changes into our design system. The project had commenced before my involvement; hence, I was stepping into an ongoing workflow that primarily utilized Sketch and Photoshop, tools I was less familiar with compared to XD and Figma. My challenge was not only to familiarize myself with new software swiftly but also to contribute effectively to a team already in motion.The project's goal was to elevate a preliminary UI design to a level of polished consistency, focusing on typography, spacing, and responsive design for various resolutions within a limited period aligning with client's value.
‍
My objectives were to:
1. Achieve a harmonious and standardized design quickly, ensuring a seamless user experience across all device sizes.
2. Adapt quickly to the established tools and workflow, enhancing team cohesion and project continuity.
3. Facilitate a dynamic adaptation process, responding promptly to design needs and client feedback for a refined final product.

Target Users

Vivo V series users include college students and young professionals who have recently entered the workforce. They are individuals with limited financial resources but still desire to own a stylish and fashionable smartphone.

Constraints

During the completion of this project, I was under significant time constraints as I was concurrently working on other advertising design projects. Often, I was required to resize designs within a day based on files provided by other designers, delivering them back to the design team in a different size suitable for their needs. Additionally, when I began working on this project, it was already partially completed, meaning I did not start from the beginning with the rest of the design team. At that time, the team was using Sketch and Photoshop, while I was more accustomed to using XD and Figma. Consequently, I had to quickly become proficient in Sketch and Photoshop to align with the other designers.

Process

In redesigning the UI, I emphasized our phone's Optical Image Stabilization (OIS) feature by using comparative photos to showcase the technology's impact on clarity and stability. Adjusting filters to enhance subject vividness further underscored our phone's photographic excellence. These deliberate choices aim to highlight key selling points, engaging users and encouraging purchase decisions.
I placed the "Explore More" icon at the center to enhance visibility and interaction. Central placement ensures it's easily noticed and accessible, fostering a balanced and aesthetic design that adapts well across devices. This strategic positioning also facilitates a smooth expansion of detailed information, maintaining user engagement and providing a seamless experience.

In the initial stages of our UI design, we encountered an issue where shadows were obscuring the heads of people in images. This is generally considered a poor design practice, as it disrupts the viewer's recognition and emotional connection with the characters in the imagery. Following a revision of the UI, I have ensured that information is presented clearly and effectively. The visual elements now with no interference from one to another, ensuring a seamless and engaging user experience.
In the previous UI design, excessive and poorly-transitioned shadowing led to distraction and obscured important visual information, diminishing the efficiency of communication. It also reduced the effective use of screen space and created visual tension, thereby degrading the user experience. In the updated version, I have minimized the shadow area and refined the transitions, resulting in a more cohesive and harmonious UI.

In the original UI design, the phone's background featured a deep blue gradient that was updated to more closely match the phone's actual color in the revised design. This change enhances visual harmony, reduces conflict, and accentuates the phone's color features, thereby improving the overall aesthetic and user browsing experience.
In the initial UI, the white shadow of the clickable black circle was too pronounced and mismatched with the phone's color. The redesign harmonizes the circle's color with the phone, improving the recognizability of the clickable element for viewing details and enhancing the overall tactile quality of the design, which can increase user satisfaction.

Conclusion

As the UX Designer for the vivo V29 Lite 5G project, my primary responsibility was to ensure timely delivery of the project while maintaining design quality that meets both the company and our partners' high standards. Despite vivo not disclosing the sales data for the V29 Lite 5G, my contributions resulted in the following significant positive impacts:

On-Time Delivery: Through efficient project management and communication, I ensured that all design tasks were completed on schedule, demonstrating my organizational skills and commitment to quality.
Team Collaboration and Recognition: Due to my outstanding performance, I was invited to a major meeting with the company's senior management, including the CEO, AD, AM, and the vivo project team. At this meeting, we reviewed and evaluated the completed project, which provided me a valuable opportunity for direct communication with the company's executives.
Expanding Impact: Based on the successful performance in the V29 Lite 5G project, vivo entrusted our team with the landing page design tasks for additional mobile models.
Personal Growth and New Opportunities: The company acknowledged my excellent performance and further arranged for me to participate in the landing page design work for other mobile models.

Despite challenges with data confidentiality, My team and I significantly enhanced partner satisfaction and opened new business opportunities for the company. I believe these achievements reflect that my design work not only met immediate project needs but also paved the way for establishing long-term cooperative relationships between the company and our clients.

I have also involved in the following landing page design projects for vivo:

https://www.vivo.com/en/products/v29 https://www.vivo.com/en/products/y27s https://www.vivo.com/en/products/y27 https://www.vivo.com/en/products/y27-5g

Area of Interest

The focus of this project is driven by compelling data on the environmental impact of single-use plastics. Annually, 8 million tons of plastic are dumped into the oceans globally, with a staggering 60.6% of the world’s mismanaged plastic waste coming from East Asia. This project centers on China's rapidly expanding food delivery market, valued at staggering ¥165 billion in 2016. These figures not only indicate a booming industry but also highlight an increasing dependence on single-use plastics, presenting a substantial opportunity for innovation. Recognizing the urgent need to address the heavy reliance on single-use plastics, the project proposes a sustainable business model tailored for bustling cities in East Asia, with a special focus on China. The goal is to replace single-use plastics with returnable containers, thereby reducing pollution, embracing circular economy practices, and promoting sustainable material innovation.

Project Summary

This project aims to reduce single-use plastics in East Asian food delivery by using returnable containers, focusing on Beijing. It explores the entire lifecycle of returnable containers, from procurement by restaurants to recycling. The approach includes detailed stakeholder and market analysis, with designs informed by both primary and secondary research.The user insights are gathered through a social media survey on returnable meal boxes, receiving over 180 responses in two weeks. I have also interviewed other direct stakeholders located in Beijing, including restaurant owners and food delivery employees for a more comprehensive insight. Drawing from research and case studies of similar initiatives in Toronto, I developed a recycling process using stainless steel and silicone containers. This design employs vacuum insulation to maintain temperature. The next stage will refine the business model for a balance between initial investment and profitability, enhancing its appeal to investors and customers.

Research

‍Study inclusive design:
- Understanding the diverse needs and preferences of the users to create products and services that are accessible to everyone.
- Studying the user-centered design approach.
- Researching accessibility guidelines and standards.

Research on Wechat style guide:
- Downloaded Wechat and its style guide to analyzing its design.
- Case studies on design examples of WeChat apps or mini-programs.
- Identified icons, colours, fonts, and user habits to match Wechat’s overall style.

Learn more about users’ needs and pain points:
- Interviewed and researched the target users.
- Personas of different user groups.
- User tests on the low-fidelity wireframes, and improved in the high-fidelity wireframe stage.

Users' Needs and Pain Points

To accurately determine user needs and effectively address their concerns, I utilized a mix of primary and secondary research strategies. The primary research consisted of an online survey conducted amongst ten individuals who had previously faced the difficulty of unintentionally messaging undesired contacts while under the influence of alcohol or in an impaired state.

Pain Points:
- Emotional Distress
- Damage to Relationships
- Professional Consequences
- Legal Issues
- Financial Costs
- Physical Consequences

Subsequently, the identified pain points were systematically categorized and integrated into two distinct personas. This classification aimed to streamline their requirements and guide the subsequent phases of product development, ensuring a more tailored and user-centric approach.

Low-Fidelity Wireframes

User Testing

Testing was conducted using an online meeting platform

An online survey was handed out before the XD prototype was used during the meeting

5 individuals were present as observers during the testing process

User Test Feedback:

The feature to prevent calling exes while intoxicated can be useful. However, some might disable it to connect with their exes.
To enhance this feature, consider sober-only answerable queries before it can be turned off.
The "drunk friend list" feature, similar to WeChat tags, is creative and interesting.

High-Fidelity Wireframes

2 Ways of adding contacts to the drunk mode friend list

Turning on drunk mode manually in Settings

Setting times to turn on drunk mode automatically

Design Statement

Influenced by my roommate's cleaning robot, the final project design comprises an innovative Arduino-based, obstacle-avoiding robot. This intricate device was crafted using an array of hardware components:
‍
- Arduino Board
- Motor Shield
- Ultrasonic Sensor (HC-SR04)
- Mini Servo Motor
- DC Motor*4
- Wheel*4
- Plate
- Holder for HC-SR04
- Battery 9V*2
- Wires
- Buttons
- Glue Gun

While the assembly process was relatively smooth, developing the operational code required attention and effort. The present version of the robot is capable of slow movement while evading obstructions autonomously. Nonetheless, to elevate its function to deliver water to users, more sophisticated code development is necessary to incorporate a predetermined route.

Weekly Formstorming

Defining good interactions
This features a cleaning robot and its accompanying application, designed to enhance user interaction. The standout aspect is the flexibility it offers, allowing users to activate the robot remotely at any time and place. Additionally, the app facilitates task scheduling for the robot, eliminating the need to manually start it on the device. This functionality streamlines the cleaning process and integrates seamlessly with the user's lifestyle.

‍Defining bad interactions
‍The image depicts a roll-down curtain, identified as an example of poor interaction design. The curtain’s weight can be burdensome, deterring users from physically operating it, especially if they are comfortably seated elsewhere. This presents an opportunity to enhance user experience by rethinking the curtain’s mechanism, possibly through automation or a more user-friendly design.

Bodystorming - Generating rough ideas to improve certain interactions
This image demonstrates a user-friendly innovation where a remote controller is used to operate a car, addressing the inconvenience highlighted in previous designs. This solution effectively eliminates the need for users to physically fetch their water by manually grabbing a cup, streamlining the process and enhancing overall user experience, which can also be used for accessibility situations.

‍Bodystorming - Generating rough ideas to improve certain interactions
‍This features a sensor-enhanced curtain system. Positioned adjacent to the curtains, the sensor detects the proximity of a user's hand to the control button, triggering the curtains to automatically lower or raise. This innovative design significantly enhances user interaction with the curtains, offering a more convenient and efficient experience, thus improving the functionality of the traditional rolling curtain system.

Design Process

Game Overview

Drawing from the Greek tale of Jason and the Argonauts, the game is a journey of overcoming obstacles to achieve heroism. The player, as a detective, unravels the tragic story of a freshman named Sarah, who was a victim of bullying, cold violence, and sexual assault, leading to her suicide. The narrative underscores the importance of mental well-being and the pursuit of justice, tasking players with solving puzzles and navigating misleading information to unearth the truth.
‍
‍Target Audience
People between the ages of 18 - 54 who are interested in puzzle games. The game process requires players to find clues by using trans-media, analyze clues and ultimately determine who is the suspect.
‍
‍Themes
Horror and Suspense.
‍
‍Duration
It will take approximately 3 hours to finish the game.
‍
‍Expectations
Players need to find the murderer who killed Sarah and the intention through clues and hints in the game.
‍
‍Task Allocation

Story Synopsis

In the game, players investigate Sarah's suspicious death as detective Jason, unearths three main suspects - Daniel, her boyfriend; Rebecca, a high school tormentor; and an unknown "Evil." referred to in Sarah's diary. Daniel's abusive behaviour and hostile interactions with Sarah, Rebecca's history of bullying, and the cryptic presence of "Evil" all point to potential perpetrators. Further examination reveals "Evil" to be Sarah's professor, Eric, who had inappropriate intentions towards her. However, all suspects present alibis coinciding with Sarah's time of death. As Jason continues his probe, he uncovers an URL in Sarah's diary leading to a website. The password to this site, derived from descriptors of the suspects, reveals a message: "Everyone is a killer!" Subsequently, a recording from Sarah confirms the truth - she committed suicide.

The initial design of the game tasked players with identifying a killer from three suspects. However, we soon realized that players could be misled and miss vital clues, causing storyline inconsistencies. To resolve this, we evolved the game's focus towards the player-character, the detective Jason, striving to uncover Sarah's full story and reveal the truth.
We crafted an interconnected network of clues, initially built around three conditions involving each suspect's conflicts with Sarah, their presence at the crime scene, and their respective alibis. However, with the shift in game objectives from "finding the killer" to "revealing the truth".

Transmedia Cognitive Walkthrough

Augmented Reality (AR)
‍We described the AR application here as "detectives using special tools to search for traces that have been erased at the crime scene".

Displaying key case clues
Connecting with the Puzzle website

The design process sought alternative AR platforms due to dissatisfaction with Spark AR. A-frame faced challenges with 3D model stability and target image recognition, leading to the discovery of the 8th Wall platform. While 8th Wall addressed previous issues, challenges persisted with model positioning and transparent textures, prompting a search for a solution to link AR entities to web pages when clicked.

Virtual Reality (VR)
‍The Virtual Reality part includes “Sarah’s Room” and “Eric’s Office”. Both of these VR scenes can be operated in real-time using various devices for game controls. Their content includes:

Clues pointing to other platforms or clues
Props that enrich the story plot
Props that enrich the characters' personalities

Our game uses Spline, a web 3D software, as the VR platform for online interaction in a 3D web environment. Players can access the game scene via a link, search for clues, and enjoy the experience on different devices. However, Spline has limitations with large model sizes and narrow mobile screens, making tablets the optimal choice for an immersive gaming experience due to their larger screens and mobility advantages.

Websites
‍The website part includes the “Detective Notebook” and “Puzzle”.
Detective Notebook: This component of the narrative delivers essential information about the murder case and the potential suspects. Its value includes:

The main platform that connects the various leads
Connection to the previous stage (rabbit hole) & case statement
Providing evidence of each suspect

To maintain consistency between the detective notebook and the physical elements - the invitation letter and map, we chose a handwritten font alongside tape icons and a brown backdrop to evoke the feeling of a "notebook".
For user convenience, key evidence is presented concisely alongside visual aids like screenshots and letters. The notebook contains valuable information about the suspects. Page conditions, governed by JavaScript logic, accommodate various letter case combinations for suspect name inputs, and if entered incorrectly, users receive pop-up feedback.

‍Puzzle:
This component connects the beginning and end of the story by giving the player a puzzle challenge at the start of the game. Once the player completes all the challenges in the game, they can access the website to find out the truth and the end of the story.

As our project progressed, we integrated a puzzle website as a crucial gameplay element, bridging the narrative from start to end. Within the AR scene, players discover the website and must uncover a password. By completing the game, players reveal the correct password, which unlocks the site, divulging the truth and concluding the case.

Videos and Audios
Daniel’s car
‍The use of video to show Daniel's car was designed to help users visualize the clues by using a first-person perspective, thus increasing immersion.

Recording of the crime scene
‍Playing a recording of Sarah and Daniel arguing at the crime scene, and the sound of a baseball bat breaking glass, indicates that Daniel may be the murderer.

Sarah’s last words
‍At the end of this game, use the powerful AI voice to help us better tell the story and tell the truth. Help players better understand the mental state of the deceased before death.

Social Media
‍The critical introduction and backstory of the characters. Its value includes:

Generating intrigue and suspicion surrounding the characters
Introducing the inciting incident that triggers conflicts between the protagonist and other characters
Offering evidence that propels the narrative forward

Social media serves as a vital platform to enhance the character's image, with Instagram being the chosen platform due to its popularity among the target audience and its relevance to the character's persona. The character's popularity is reflected in their Instagram followers. Another reason for selecting social media as a digital platform was to subtly suggest a motive for one of the suspects through chat interactions. （All the images are created by Playground AI）

Physical Assets
Poster for Eric's lecture

Key evidence (time)
A piece of the puzzle (er）

Locker
‍In the story, this locker belongs to one of the suspects, Rebecca. It contains evidence related to her:

She had bullied the victim Sarah in the past
She has an alibi for the time of the crime
Other props enrich her character image

To enhance the game's realism and immersion, we planned for players to physically navigate the campus, finding game props in accessible and secure locations. This led to the idea of using a school locker to house clues. Players would receive the locker's location and combination within the game, furthering their engagement.

User Testing

After completing all the game components, we conducted several rounds of user testing. Our initial testers were friends who were familiar with us. However, we received feedback regarding language barriers - there were significant amounts of text to read in our game, such as chat logs and autopsy reports, which slowed down the game's progress. In order to address this, we worked to reduce the amount of text in the game while also seeking out native speakers to help us understand the experience for users without language barriers.
‍
We observed and recorded a lot of useful feedback during the user testing sessions, and we improved some parts of the project in the final version based on them. We also came up with new ideas for some of the designs ourselves. But as they say, there's no end to modifications and refinements.

Area of Interest

The Surge in Food Delivery in China
Now, consider the booming food delivery market in China. The market reached ¥165 billion ($24.5 million) in 2016, having tripled in just three years. By June 2017, there were 295 million users of online food delivery services in China, a 41.6% increase from the end of 2016. This exponential growth in food delivery services contributes significantly to the demand for single-use plastics (WGSN).

Connecting the Dots
With the rapid expansion of the food delivery sector in China, it’s crucial to address its role in the plastic waste problem as each meal delivered typically involves multiple single-use plastic items.

How Might We?
How might we create an innovative business model that effectively supplants the traditional reliance on single-use plastics by food delivery services in bustling East Asian cities such as Beijing?

Define & Research

Phase Summary

Phase Overview
‍The report details the development of a sustainable business model, ReBox Eco, aimed at addressing the issue of single-use plastics in the food delivery industry, particularly in East Asia. The project's primary goal is to replace traditional disposable containers with returnable, eco-friendly ones. This effort is crucial given the surge in food delivery services, especially in China, which has significantly contributed to plastic waste.

‍Research & Insights
Consumer Behavior: By conducting surveys online, the result revealed that while consumers acknowledge the environmental harm of disposable meal boxes, they still prefer them due to convenience. However, there is an interest in sustainable alternatives, provided they meet certain criteria such as good insulation, durability, and hygiene.
‍Delivery Personnel: Interviews highlighted concerns over the hygiene of shared containers and the cost implications. Past attempts with recyclable containers showed that consumers have high cleanliness standards.
‍Market Gaps: The report identifies a lack of similar products in the Chinese market, suggesting an opportunity for introducing a returnable container system.

‍Design & Ideation
‍The ideation phase involved developing a returnable container system where consumers can choose eco-friendly containers when ordering food online. These containers are made from sustainable materials designed to be returned, cleaned, and reused.

‍Reflection
‍The project underscores the importance of balancing convenience and environmental sustainability. While the concept of reusable containers is promising, its success depends on overcoming challenges related to consumer habits, hygiene, and cost.
The need for positive incentives (such as discounts) and increased awareness of environmental issues is important for the adoption of sustainable practices in the food delivery industry.

‍Impact on the Overall Project
‍The Define & Research phase is foundational for the ReBox Eco project. It not only provides a clear understanding of the consumer landscape and market opportunities but also shapes the direction of the product's design and business model. The insights and reflections gathered will inform further iterations and testing, helping to refine the solution to better meet user needs and drive adoption.

Research & Develop

Phase Summary

Phase Overview
‍Building on insights from the last phase, Rebox Eco refined its business model to offer both returnable and biodegradable container options, addressing diverse options for customers. This phase focused on improving the UI/UX for the returnable container option, aiming to enhance usability and streamline the process of ordering, using, and returning these containers via platforms like the Meituan app and WeChat mini-program.

Key Activities
Prototype Development and Testing:
‍Created high-fidelity prototypes for the Meituan app, emphasizing both degradable and returnable options when ordering.
Developed mid-fidelity prototypes for the WeChat mini-program, allowing restaurant owners to order and track eco-friendly containers.
Conducted user testing with participants who were familiar with those platforms, provided feedback, and identified areas for improvement.

‍Impact on the Overall Project
‍This phase was crucial for validating the design concepts and ensuring that both customers and merchants could easily navigate the eco-friendly packaging system. By iterating on the prototypes and incorporating user feedback, the project moved closer to creating a viable and user-friendly solution that encourages the adoption of sustainable practices in the food delivery industry.

Develop & Refine

Phase Summary

Phase Overview
‍The third phase of the Rebox Eco project focused on refining the UI and UX based on previous feedback. This phase targeted improvements in usability and accessibility, summarizing the project from initial research to the final refinement of eco-friendly packaging options within the Meituan app and WeChat mini-program.

‍Key Activities
UI/UX Enhancements:
Visibility Improvements: Key features such as the eco-packaging options were repositioned to more prominent locations within the app and mini-program interfaces. This change aimed to make these options more immediately noticeable and accessible to users.

‍Visual Communication: The information pages accessed via QR codes on containers were redesigned to reduce text density and incorporate more visual elements, such as illustrations and concise messages. This change aimed to enhance user understanding and engagement.

‍Prototyping and Testing:
Prototype Iterations: Multiple iterations of the prototypes were developed, incorporating user feedback at each stage. This process included the transition from Version 1.0 to Version 2.0, and further to Version 3.0 for the mini-program, each iteration aimed at improving user interaction and satisfaction.

‍User Feedback Integration: Continuous user testing provided valuable insights into the functionality and usability of the prototypes. Specific improvements included clearer navigation, more intuitive tracking of container status, and better visual appeal.

‍Significance of the Project
‍The third phase was pivotal in refining the user experience, ensuring that the eco-friendly options were not only available but also easy and convenient to use. The focus on visibility, reordering ease, and visual communication directly addressed the issues identified in previous phases, making sustainable choices more attractive and user-friendly.

Key Takeaways

Determining the focus of the thesis is essential, whether it's business models, material science, or user research, as this choice will direct subsequent research and decision-making steps.
Developing a sustainable business model is crucial for innovative concepts, requiring a balance between the initial financial investment and the subsequent profitability to ensure long-term success.
The feedback process highlighted the importance of understanding user behavior and expectations to ensure the final product is not only functional but also engaging and easy to use. Iterative design and a user-centered approach were crucial, with each round of testing bringing the project closer to achieving its goals of sustainability and user satisfaction.
Unexpected challenges are a natural part of any project, emphasizing the need for thorough research to minimize bias. It's also important to remain flexible, as directions and strategies often need adjustment throughout the research process. Revisiting and refining ideas should be seen as a positive step—each iteration moves the project closer to achieving its desired outcome.

REBOX ECO

Challenges & Objectives

Target Users

Constraints

Process

Conclusion

Area of Interest

Project Summary

Research

Users' Needs and Pain Points

Low-Fidelity Wireframes

User Testing

High-Fidelity Wireframes

Design Statement

Weekly Formstorming

Design Process

Game Overview

Story Synopsis

Transmedia Cognitive Walkthrough

User Testing

Area of Interest

Define & Research

Phase Summary

Research & Develop

Phase Summary

Develop & Refine

Phase Summary

Key Takeaways

Other posts