Xuebing DU
 

Overview

AURA is an exploration of combining smart design and rich technology to craft an innovative concept and feasible business solution. I strive to deliver a memorable and emotional experience by connecting people through senses of smell on a digital platform. I designed and developed a software prototype with a hardware prototype using interactive design principles. AURA brings a fun and exciting experience not only through scents but also through a lush, ethereal visual experience.

Background

In the modern era, people experience social and emotional connections through new digital mediums, but I have found that something crucial is missing, a sense that triggers our memory right away. I want to make scent digital, social and exciting. AURA is a unique product that enables people to collect, mix and share scents with people.

Concept

AURA is a social networking app providing a solution for people that would like to collect, mix and share scents. When designing this app I followed the concept that physical distance should not prevent us from feeling close to those we care about. AURA is an innovative idea that will connect people in a new and exciting way.

 

 
 
 

 

Research

The technology has so far targeted mainly our sense of sight and sound. Either photo sharing platforms like instagram, VSCO, or text messaging platforms like Facebook, whatsapp. Most of our online communication is through sight, sound, but I found something crucial is missing. Something that connect us in a deeper way. something that is able to trigger human’s emotions right away. And that is how smell comes along. As we know that smell recalls memory more than any other senses can bring. 75% of our emotions are affected by our sense of smell. So my idea is to make smell digital.

This app collects smell and is able to generate scents we collected. People are able to share within the app and collect smells they like into their scent collections. Users can also mix up to four scents at a time to create their scent mixtures. Scent is displayed visually in the app. Through this platform, people are connected through “nose” to share feelings and stories with another. In this case, smell serves as a photo, functions as a memory recorder.

 
 
aura_portfolio_18.png
aura_portfolio_20.jpg
aura_portfolio_20.jpg
aura_portfolio_21.jpg
aura_portfolio_22.jpg

Testing Results

Too many tasks on one page, confusing users on what to do Icons are not clear enough

Conclusion

Need to break down a big task into smaller tasks, giving better instructions on each page; Build a consistent visual system, including icons and different tasks etc

Key Changes

Based on target audience research, a large number of people show interest in seeing data visualization rather than image display, thus I decided to replace image display with data visualization. AURA provides users a different experience purely based on scent and text descriptions, allowing users to imagine the story behind the scent itself.

 

aura_portfolio_23.jpg
aura_portfolio_24.png
aura_portfolio_25.png
aura_portfolio_26.png
aura_portfolio_09.png
aura_portfolio_10.jpg
 
 
aura_portfolio_13.jpg
 
 
aura_portfolio_11.jpg

Visual Design

Visually compelling animations using modern and fun color palettes to entertain users while experiencing scents. Using fun and animated color waves to mimic scent movements.

Hardware Ideation

I sketched a bunch of variations of the look of the hardware. My goal is to keep it simple and modern. 3D prototype model design using Tinkercad.

Final Prototype

1st aura prototype made with a 3D printer. Available in different colors and finishes.

Technical Aspect

Bluetooth connects the app with the device. A feasible circuit prototype.

 

aura_portfolio_16.jpg
 
aura_portfolio_15.jpg
 
aura_portfolio_14.jpg

Future Development

eCommerce Website

 
aura_portfolio_07.png
 
aura_portfolio_08.png
 
 
aura_portfolio_01.jpg
museum_00.png

 

The Legion of Honor displays a collection spanning more than 6,000 years of ancient and European art and houses the Achenbach Foundation for Graphic Arts. The goal of the project is to elevate visitors’ experience of Legion of Honor Museum. The approach is to deliver a more user-centered experience with a simple classic look and feel, which I believe can greatly appeal to a larger audience. Not only the Museum website is fully responsive, its mobile APP is also well-thought-out tailored especially for mobile users.

 

museum_01.png
 
 
museum_6.jpg
 
museum_4.jpg
 
museum.gif

The first impression of the website is essential in terms of attracting potential visitors to continue exploring the site, thus homepage needs to excite people with visually compelling intros of the current exhibitions. I displayed a homepage gallery, which auto-changes with the background color to delight user’s experience. A simple call to action button ‘Get Tickets’ enables visitors to purchase tickets right away.

The purpose of the website is to display exhibition information and enable the online purchase. As such, it needs to have a user-friendly interaction not only in the browsing of such experiences but also in the purchase of exhibition tickets/gifts at the online store. To achieve this I decided to simplify the navigation bar into three main sections: Menu, Store, and Search. This action helps users easily navigate without overloading information. I bring different types of content in and out of focus, and they appear at different visual depths or levels throughout the site. All of this is in support of the user experience. 

 
museum_3.jpg
 
museum_2.jpg
 
museum_5.jpg
white_imac_1.jpg
 

First Photography Book

 

First Photography Book is based on my personal projects, shot between 2014 and 2016. I use my photography as a design element to invoke specific emotions and atmospheres. I exhibit it in this book where I explore three different themes: Color, Plant Love and Texture.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
book_portfolio_01.jpg
Desktop HD Copy 27.png
beheard_portfolio_09.jpg

 

Be Heard is a thought-provoking media organization devoted to spreading ideas. It features interviews with speakers, professionals, designers, artists and more. It’s across various disciplines including Technology, Entertainment, Design, Global issues, the arts and more. We want to emphasize on how ideas can impact the world by inviting thinkers and doers to give the talk of their lives.

Be Heard is a place to listen, read and interact with the stories that matter most to you. Thousands of voices read, write and wait to be heard. It is a network that enables people to make an impression on others, to make them think or change their minds, to teach them something or connect emotionally. It is a place where conversions push ideas forward, and ideas matter in the end. Be Heard also allows people to discover events that match their passions and to bring people together through live experiences.

 

beheard_portfolio_02.jpg
 
beheard_portfolio_03.jpg
beheard_portfolio_04.jpg
 

Objective

Create a brand system based on the organization’s essence, to spread ideas and be heard.

Apply the visual language to multiple mediums, both in print and digital platforms.

Design a website and mobile app that enhance and delight user experience.

 

Approach

The goal is to make the brand stand out by implementing compelling visuals - a set of the neon color palette and bold typography while delivering an enhanced user experience on both mobile and web platform.

I created an identity that is simple and strong. It represents the power of ideas by mimic the movement of voices breaking out of the box.

beheard_portfolio_05.jpg
beheard_portfolio_06.jpg
beheard_portfolio_08.jpg
Desktop HD Copy 26.png
Desktop HD Copy 28.png
beheard_portfolio_09.jpg
 

Hackland: Accept your challenge

 

About

Hackland is an online programming game designed for hackers. It offers two platforms - web and mobile. Mobile app is designed to pair with virtual keyboard in order to achieve a better programming experience.The game is split into 5 levels, designed to challenge hacker’s programming skills. Winners will be rewarded with physical prizes.

Hack Culture

A subculture of individuals who enjoy the intellectual challenge of creatively overcoming limitations of software systems to achieve novel and clever outcomes.

 
 
 
 
 
 
 
 
hackland_portfolio_01.jpg
 

Flurry: live streaming App

 

Flurry is a live video streaming app that brings people together. Flurry allows users to get up close and personal with their favorite broadcasters. Working at a fast-growing startup company enables me to get involved in many design fields, not only designing user interfaces, prototyping user experiences, designing branding materials, but also working closely with the lead designer, frequently interacting with the engineering team, and the marketing team.

 

About

Time: 3 months, summer 2016

My role: UI/UX Designer

Tools used: Sketch, Flinto, Invision, Photoshop, After Effects

Background

I worked at a startup company called Flurry.live, a video streaming app for teenagers. I was asked to help enhance users’ experience. I worked closely with the lead designer to understand the problems they’re solving so I could translate it into a delightful UX Design. The app needed to do quite a few new features, including double guesting, mute audio/flip camera, media, and more.

flurry_portfolio_14.png

Task 1: Double-guesting

Goal

Enable double-guesting to join the screen at the same time. Business aspect: attract more users to join on screen, higher engagement, higher retention, higher user growth

Design Process

This task challenges designers to design base on different user scenarios - broadcasters, guest broadcasters and viewers. First I analyzed the existing guest broadcaster join on screen experience. My initial thought was to redesign the whole join the screen experience. I suggested the current guest video pane was too small, and was not engaging enough for our users. I communicated with the lead designer about my concept, and we rejected this early concept due to our time constraints of a complete redesign. so I designed a workflow based on the original join on screen experience. My design solution was to add another video pane below the first guest pane. We beta-tested the double guesting with a small amount of broadcasters to gather initial feedback, which was positive.

Result

The result was successful. It delivered an intuitive experience, well aligned with our initial user behavior - it kept the consistency of the user experience within the app. My design was successfully implemented into the app and got shipped out to the real world. After launch, our community team received positive feedback from many users. Our users enjoyed using the feature, and we got good comments on double guesting feature at APP store.

 

Workflow for Host

flurry_portfolio_11.png

Workflow for Guest who requested to join on screen

flurry_portfolio_13.png

Workflow for Viewers

flurry_portfolio_12.png

 

Prototypes for Double Guest Join on screen experience

Flurry_two_guest_broadcasters_gb_requested - Preview.gif
 
flurry_portfolio_15.png

Task 2: Flip camera/mute microphone

Goal

Design an experience when host and guest flip their camera and mute microphone while broadcasting

Design Process

Based on iOS design guideline, I designed multiple versions of the flip camera interface. After multiple versions of design ideation, here is the final design. There were lots of testing involved with our engineering team on the exact timing when users tab on the button and cameras flip.

Result

After launch, our community team received positive feedback from many users. They are actively using this feature.

 

Workflow for fliping the camera

Workflow for muting microphone

flurry_portfolio_07.jpg
 
flurry_portfolio_07.jpg

 

Prototypes for flipping camera and muting microphone

flurry_portfolio_08.gif
flurry_portfolio_10.gif
flurry_portfolio_09.gif
 
flurry_portfolio_04.gif

Task 3: Drawing

Goal

Design an drawing tool for hosts while broadcasting

Design Process

In order to keep our users entertained, our team had several meetings to brainstorm ideas, aiming to providing a delightful experience for our users. My task was to design and prototype a drawing tool. This task also involved a selection of iconography to keep the consistency of the design style guide. After lots of user testing and meetings with our team, we chose to keep ‘undo, color, and reset’ as our main tools in the drawing menu.

 

Workflow for drawing tool

flurry_portfolio_04.jpg
 
flurry_portfolio_03.gif

Task 4: Media Share

Goal

Design an experience when hosts share their photos while broadcasting

Design Process

My work was to design a sequence of workflow for hosts sharing their photos while broadcasting. In the case, I was challenged to come up with solutions of displaying more than two functions in the Game tool.

 

Workflow for Media Share

flurry_portfolio_05.jpg

 

Flurry App store

flurry_portfolio_03.jpg
dupont_portfolio_05.jpg
 

DuPont DePauw is a Chinese home-furnishings company featuring European, American, and Neo-Chinese furniture style. It sells its merchandise through its retail stores, catalog, and online. I created its brand identity to convey its simple elegance and reliable nature.

 
 
 
 
 
 
dupont_portfolio_06.jpg
 
dupont_portfolio_07.jpg
 
dupont_portfolio_08.jpg
 
dupont_portfolio_09.jpg
 
dupont_portfolio_10.jpg
 
dupont_web_01.jpg
 
dupont_web_07.jpg
dupont_portfolio_08.jpg