Xiaying Chen UI/UX Portfolio

Page 1

Xiaying Chen.


MUNI S “A speaker for the community.“

CBTF Simulator “Testing a solution for stress relieve.“

SICU

“Bring the past


URO

t into the future“

As a Industrial design student, I always want to explore beyond my major. I am interested in UI/UX, VR and even computer science. From my own experience, I feel the possibility for Industrial design does not only exist in products, but also in a lot of other fields.


MUNI S

The Sharable Bluetooth Speaker


Design Intent

90 dB+

While speakers are necessary equipments for square dance, the noise produced by speakers has disturbed the neighborhood.

This product aims to encourage people to participate in this social activity as well as to lower down the noise by distributing the sound evenly in a certain area.

Stats from https://news.sohu.com/

80,000,000+ People in China participate in square dance


Participant

Emotion Curve

Daily

Monthly

Leader

Not happy when people complain about the noise, while everybody is not hearing the same loudness of music.

Going out with an expectation of having a good evening with friends.

Getting excited for the activities.

Forget the complains and social with friends, but problems still exist.


Ideas The enjoy of Sharing

Square dance is not only a sport that keeps fit. The essence of square dance is the social between target users. The retired group and housewives have a big need to feel connected with the society based on their life. By making the speaker sharable, it encourages communication.

Uniform the sound

In the large open area where people gathered, dancers have to turn up the volume in order to let people at the back to hear the music. With several extension speakers, our users can enjoy music at a lower volume, and a better sound quality.


User Journey

Help / Setting

Play

Pairing Explore Registration

Activities

Menu Friends Profile

Equipments


Features

No speaker? No worry You don’t have to have a speaker in order to use this app.

Create Didn’t find a place you like? You can create your own.

SAFETY Check the real time location of every part of the speaker. If it goes too far, the alert will automatically inform you.

Schedule Let them know you are coming and check out who are coming.

Explore Let you find a place near home to dance at the right time, the right place.

Make Friends Make new friends through the dance and keep connected.

Icon by Freepik on Flaticon


Wireframes The initial idea of making this app is to fulfill the need of the target users. When doing square dance, music quality is not the most important thing. This activity should be a leisure moment for them to communicate and form new friendships. Therefore, connecting the people in the community is a focus.


Screenshots


Graphic Interface All the signs are made bigger than usual in order to let target users to recognize them easily. A lot of feedbacks and visualization are added for every step because many of my target users are not so familiar with using apps.

The curvy top is not preferred as it is not as unified as the round one. For the parts and main one, all of them has a focus on the easy operation and accessibility.

Physical Interface


Inspirations Curve

90%

of the people who do square dancing are female.

Bottle-sized

85% of the target users address about the portability.

Color

Aging

can reduce our sensitivity towards color, brighter colors are actually preferred.


Sketches I started with the general form of the whole body, then went to explore the possibilities of separating forms and combining them.


Form Explorations

The form of sharing

When exploring the form, the focus is on how people are sharing this with others. The aim is to reach a balance between the feel of participants and the feel of the owners.


Finalization

New ideas keep coming up when I was exploring my idea. It is especially helpful to start doing form explo early. This allows changes and refinements to th form.

When designing a product, it is easy to design for th of yourself. I was grateful that I was informed of th was able to refine my design standing on the users thinking what they would think and worrying wha would worry.

Research is the earliest part I started and con until the project is over. Not only do researches down the ideas and understand the target users mo also, they can provide a strong argument for the when presenting the project to others.


y initial orations he final

he taste his and s’ side, at they

ntinued s settle ore, but e ideas


CBTF Simulator With William Reinhard & Angelos Guan


A virtual reality program that aims to relieve students’ anxiety towards taking digital exams in a special facility.


Background

CBTF (Computer-Based Training Facility) Number of Tests. Created to provide automate testing service for University of Illinois, this facility made taking exams an efficient work for a huge student group.It allows students to sign up based on their own schedules and take the exams through an online system. CBTF is often seen as one of the most stressful places to be on campus because important exams are take at a place that you are not so familiar with. While new students are often anxious about being in this facility,

Data from: https://www.naefoee.org/File.aspx?id=20233


What to do

?

What to bring

?

How to prepare

?

A VR simulator can be used to help students acclimate to what taking an exam in the CBTF is like, and what they might expect by giving them chances to practice and environment get familiar with. Along those lines, it could be representative of a stress management tool that helps moderate the stress going into an exam. Where we’re looking to mitigate stress during the actual exams, we ultimately seek to provide a platform for a more immersive practicing experience.


User Journey & Process Design During Exam • • • •

Before Exam • Wait in lines. • Prepare the documents needed for check-in. • Users will choose to leave certain personal belongings on the rack. • User will be assigned a seat. • Instructions to log in and wait.

Operations to answer the question Overview of the exam questions Stress bar to track the level of stress. Ambient sounds that can be distractions


Mines & Surprises • If not given away the phone, it will ring during the exam and you are considered cheating. • Zombie as proctors to give that gaming distance from reality. • Reward system.

After Exam • Throw away scratch papers and return pencils. • Pick up personal belongings.


Field Research After negotiation with the director of CBTF, I was managed to take detail photos of the environment and get the dimension of the room. These images will be used to model the environment as well as to help us imagine different situations which students may encounter with.


Building Environment

Since other 2 team members are engineering students, I was responsible for building the environment. I build a 1-to-1 environment based on the field research sources. Since the model was too big which slows down the frame rate, I simplified and combined meshes to improve the performance.


Audio

I mixed the ambient sounds including the sound of typing, walking, coughing and the sound of air conditioner.

Animation

I did the coding and the animation for the proctors using Unity. The program includes the back-and-forth movement and the trigger to walk towards the user.

Programming

My team members completed the codes for the exam and I did the coding for switching the scenes.


Integrated Experience


SICURO


“Bring the past into the future“ A Future Travel Pod Designed for people over 50 yrs old With A “retro” theme

* Research Image done by Cheyanne Lam


Concept Generation

Inspiration comes partly from the British mini car. I exaggerated the side part and added more curvature to give it a futuristic look. .



Scenario


Model

*Done by Fu Qi and Lani Kong


Other projects

Daux

Re-designing a chopper.

Cryshive A mobile desk organizer module

Qlean

A Trash bin for vacuum cleaner.


Thank you for your time.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.