Portfolio UX + ARCHITECTURE 2013-2016
GREAT DESIGN IS A MULTI-LAYERED RELATIONSHIP BETWEEN
HUMAN LIFE AND ITS
ENVIRONMENT. -Naoto Fukasawa 2
CONTENTS Me!
04
SPRINGBOARD UX
06
Research Statements
07
Empathy Maps/Personas
10
Card Sort
14
Wireframes
17
Summary
24
ARTS 344 Locative Media Project
26
Back Drop Summary
27
Final Wireframes
28
ARCHITECTURE
32
Rain Refinery
34
Edge Flow
40
3
ME! Daniel JY Cho Ex-Architect Student, Growing UX Designer
CHICAGO, IL ○ URBANA-CHAMPAIGN, IL I currently reside in Urbana-Champaign, IL reading and learning more about user experience design. I focus on looking for new solutions to everday problems through the study and science of user experience
ARCHITECTURE ○ USER EXPERIENCE DESIGN I graduated from the University of Illinois Urbana-Champaign with a Bachelor of Science in Architecural Studies in 2016. However, towards the last year of my college career I awoke a passion for user experience design. I saw that user experience was the future of today’s society and I loved the idea of how design could draw people to ideas and functions. As a result, I interned at a design firm as a UX designer and continued my UX
4
DANIEL CHO CREATIVE DESIGNER
PROFILE To challenge, discover, and enlighten myself through the discipline of people, innovative design, and the experiences of the world.
WORK EXPERIENCE
INFORMATION Name:
Daniel Cho
User Experience Designer Internship- Chicago, IL
Email:
DanielJYCho94@gmail.com
The Plum Tree Group
Mobile:
847-924-5050
Language:
English, Korean, Spanish
EDUCATION University of Illinois Urbana Champaign Bachelor of Science in Architectural Studies, 2016
Springboard UX Design School 2016
June 2016 - Aug 2016
Connected with clients to understand their company and their goals Researched the user experience process through the analysis of heuristics, personas, and competing websites to prepare for the design phase Designed wireframes and edited the typography from a user interface kit
Graphic Designer- Champaign, IL RailTEC June 2015 - May 2016
Designed many graphical tools for the company such as posters, flyers, annual reports, maps, collages, and flash drives through the use of Photoshop, Illustrator, and Indesign
Drawing Reviser - Champaign, IL Professor Alistair Black May 2015 - Oct 2015
Researched images of 1960s libraries in the United Kingdom to recreate and edit floorplans and section plans for the presentation of spatial relationships Finalized these spatial relationships into images for the final book, LIBRARIES OF LIGHT British Public Library Design in the Long 1960s, which will be published in August 2016
ACTIVITIES
SOFTWARE SKILLS Adobe Photoshop CC Adobe Illustrator CC Adobe Indesign CC
Construction Volunteer - Biloxi, Mississippi Habitat for Humanity July 2010 - July 2014
Aided in the restoration of community homes in Biloxi, Mississippi Developed skills in construction of residential homes
Adobe Premiere CC AutoDesk (Autocad, Revit) HTML/CSS Maxwell Render Makerbot Replicator 2 Microsoft Word/Excel/Powerpoint
AWARDS Edward C. Earl Prize - Champaign, Illinois UIUC School of Architecture April 2016 Nominated for the Edward C. Earl Prize by Professor Eric Hemingway during the Timber in the City Studio competition. Then placed second among the nominees of the University of Illinois Urbana-Champaign School of Architecture.
Rhinoceros 5 SketchUp V-Ray Render
5
Springboard UX Project
6
Gift-urp A New Gift Giving Experience Research Analysis: Daniel Cho
Research Statement The research is used to understand and learn more about people’s thoughts, emotions and behaviours as they make their decisions to purchase gifts for another. The purpose of Gift-urp is to make this gifting experience more enjoyable, quick, and easy.
Online Survey
3/4 97%
90%
of testers spend more than two hours searching for gifts. of testers spend less than two hours decorating for gifts.
YET! of buyers use computers to purchase gifts
66.7%
72%
of testers believe in the importance of decorating gifts. Who do you most frequently buy gifts for?
5.1% Coworkers
43.6% Family
12.8% Friends of buyers use smartphones to research gift ideas
38.5% Lovers
Common Words Used:
Demographics:
39 Participants
Money 33.3%
Personality want
66.7%
Needs
Joke
Hobby
Function
Like
Price
Interests 7
The Interviews The interviews took place with four college students, who were asked to tell a time when they had given a gift to someone. Predictably, the participants used a memory of when they gifted their family or lovers, rather than friends and coworkers. The results of the interviews were quite different from the surveys and not all the predictions came out to be true. The idea that gifts were bought online most of the time was not necessarily true. Some of the participants went to physical stores and others did not buy a tangible gifts but took their loved ones to movies, sporting arenas, and restaurants. However, time, money, and creativity behind the gift were elements of difficulty for the participants. Most of the happy emotions occured the moment the participant handed the gift to their loved ones. All of them expressed joy and happiness, and was looking forward for their loved ones to use their gift. The gifts were a symbol for everyone’s love and appreciation for the other person and it was used to bring the relationship closer and to express one’s love. The negative emotions were mainly frustration, anxiety, and stress. All four participants expressed distress during choosing what gift to pick and whether their gift would be appreciated and useful to their loved ones. A few of them were scared to decorate the gift, thinking that they would ruin the gift. Surprisingly, half the participants were told what to buy for their loved ones by their loved ones. Although, the gift recievers were told what they wanted, the precise, exact gift was still not chosen by their loved ones. Instead, it was more general about the specific category. For example, one reciever wanted a skateboard, but the participant anxiously looked for the perfect skateboard for their loved one. All of the participants expressed that choosing the gift and paying for it were the least favorite and most challenging part. Surprisingly, decorating was not one of the priorities in the gift giving experience. Most of the participants did not have the time not did they believe they could be creative enough to decorate the gift. For one participant, he did not gift a tangible gift, but described the element of surprise as the decoration. When all the participants were asked about a magic wand to change this experience, they all concluded to make the process cheaper or free, know what they’re loved ones wanted ,and make them happier.
8
Heuristic Analysis https://www.etsy.com/ Visibility of system status The content on etsy is quite simple with enough information for the user to navigate through. The navigation system is very visble and simple. The cart and different registeration is visible to the user. The search bar is the largest element in the page, showing the emphasis of its function. The categories are divided into different sizes to show the heirarchy between the seasonal products versus the daily products.
Match between system and the real world The vocabulary of the page is quite consistent and easy to understand. There are no jargons nor words that are unknown. Instead, they are short and straightforward.
User Control and Freedom There are options in the top left to revert to the previous page without the back button. Moreover, the user can return to more general category. The <- arrows help show the navigation system of the hot key.
Consistency and Standards The page follows the consistency of the modern world. There are no words or actions that are unpredicted and surprising.
Recognize rather than recall Everything is recognizable and visible to the user. All the objectives have clear instructions and the page seem quite orderly.
Aesthetic and minimalist design There are no overly done designs. The background is neutral in color, and the hot keys are similar in color scheme so that the user is not overwhelmed by a vast number of colors. However, the video in the homepage may be a little distracting.
http://www.uncommongoods.com Visibility of system status The navigation bar of this page is simple and brings in the basic requirements of the search bar, the different categories, and the cart. However, I do not see a register or a sign-in anywhere. Moreover, its odd and redundant how there is another category bar in the left side, while there is one at the top of the page.
Match between system and the real world The use of words are fine, but one of the phrases had me confused. It went like “Problems you didn’t know you had-SOLVED”. I at first ready it as “Problems you didn’t know you had solved” and it confused it me, but after reading a second time, I understood the intention. However, the text should not put any user in that position.
User Control and Freedom There are really now methods to go back other then using the back button or the home button in the page. I do not see the placement buttons where one would see how deep they have gone into the webpage, nor any methods to go back.
Consistency and Standards The page follows the consistency of the modern world. There are no words or actions that are unpredicted and surprising.
Recognize rather than recall Everything is recognizable and visible to the user. All the objectives have clear instructions and the page seem quite orderly.
Aesthetic and minimalist design The homepage has too many images for the user to really focus on. Moreover, the images are not different enough in sizes so there is a lack of hierarchy. Simplifying the images would aid in helping the user know where to look and where to start.
9
Empathy Map Desire -give a personalized gift -give happiness to the reciever -show love and effort through the gift
Emotions
Motivators
-excited to give a gift -anticipation for reciever to use the gift -anxiety of decorating -stress to choose
-needs to be meaningful -method of showing love and care -not cool to bring in a unthoughtful gift
The I m Not Creative Fellow
Pain Points
Do
-doesn t know how to decorate -scared of ruining the gift -doesn t like decorating -uncon dent to be creative -no time to be creative or more creative
-easier if told what to gift -spends more money in place of creativity
Summary -There needs to be a method to encourage users to be creative without spending too much time and overwhelming them with multitude of options. -The process of gift giving should be easy and pleasing rather than stressful and full of anxiety. -There should be a method to personalize the gift with ease, creativity, and speed.
10
Empathy Map Desire -easily choose the perfect gift -be creative within a short period -know what the reciever wants
Emotions
Motivators
-excited to give a gift -anticipation for reciever to use the gift -anxiety to nd the time and place -stress of choosing quickly
-needs to be meaningful -reciever needs to nd it useful -method of showing love and care -not cool to bring in a unthoughtful gift
The Busy Gifter
Pain Points
Do
-no time to decorate -no time to ponder on choosing -spending time on gift is secondary
-easier if told what to gift -spends on more expensive gifts -gifts are more broad, than speci c
Summary -There needs to be a method to quickly ascertain what gift is great for the userÂ&#x2019;s reciever. -The credit of choosing the gift should go all to the user; the interface should play a supporting role. -The process of gift giving should be easy and pleasing rather than stressful and full of anxiety. -There should be a method to personalize the gift with ease, creativity, and speed.
11
Persona Pro les
The I m Not Creative Fellow DEMOGRAPHIC GENDER
AGE
INCOME
Male
18-25
In Debt
LOCATION Collegetowns, College Campus
EDUCATION Undergraduate, Graduate Programs, First Career Job
DESIRE
BIO
- give a personalized gift - give happiness to the reciever - show love and effort through the gift
The user is a college student at the University of Illinois UrbanaChampaign. He is currently majoring in electrical engineering and is always busy with his exams and papers. Outside of school, he likes to watch Netflix, go drink with friends and browse through internet memes and other things with his phone and computer. He wants to gift his brother something special and personal, but doesn t believe he has the creativity and time.
PAIN POINTS
TECHNOLOGY
- doesn t know how to decorate - scared of ruining the gift - doesn t like decorating - uncon dent to be creative - no time to be creative or more creative
INTERNET SOFTWARE MOBILE APPS SOCIAL NETWORKS
PERSONALITY
12
Extrovert
Introvert
Sensing
Intuition
Thinking
Feeling
Judging
Perceiving
Assertive
Turbulent
Persona Pro les
The Busy Gifter DEMOGRAPHIC GENDER
AGE
INCOME
Female
18-25
In Debt
LOCATION Collegetowns, College Campus
EDUCATION Undergraduate, Graduate Programs, First Career Job
DESIRE
BIO
-easily choose the perfect gift -be creative within a short period -know what the reciever wants
The user is a college student at the University of Illinois UrbanaChampaign. She is currently majoring in nance and is always busy with her sorority, club events, school, and social life. She is always active and has no energy to focus on things outside of college. Her best friend from high school is having a birthday party, but she is unable to attend to due her busy lifestyle. She wants to send a personalized creative gift, but does not have the time to do so.
PAIN POINTS
TECHNOLOGY
-no time to decorate -no time to ponder on choosing -spending time on gift is secondary
INTERNET SOFTWARE MOBILE APPS SOCIAL NETWORKS
PERSONALITY Extrovert
Introvert
Sensing
Intuition
Thinking
Feeling
Judging
Perceiving
Assertive
Turbulent
13
14 Share/Publish
Edit
Pro!le Building
Check Out
Inventory
Decorate
Quiz
Shopping Cart
Start from Scratch
Design Lab
Storytelling
Recipient
Search
Purchase
Explore
Learn
Inspiration
Works
Blogs
Artists
Home Page
My Designs
My Pro!le
Orders
Wishlist
My Account
FAQ
Tasks
Purpose
About
Gift-urp A New Gift Giving Experience Daniel Cho
Card Sort Four users were asked to participate in a card sort. These users came from different backgrounds, but were all residents of Urbana and Champaign. These users did not necessarily all fit the personas I had built, but many of them shared similar desires and problems with the personas. From the card sort, several similarities arose. The category recipient, recipient information, and recipient gift were spoken often in defining the tasks that focused on the recipient. The about, information, general information, etc were all written many times. Purchase was a stable use in the exercise. Lastly, the category title design was used many times too. From the category titles the content was created through the about page, recipient page, purchase page, and the design page. Some of the difficulties of categorizing the cards was the fact that many tasks fit in not only one, but many categories. Moreover, some of the tasks were to broad to exactly name a category for the task. The users understood some of the main points from the tasks such as that these tasks pointed to purchasing gifts for recipients and to decorate the gift. However, they failed to understand the aiding of choosing gifts and the inspiration process of encouraging users to be creative and have a design oriented mind.
15
User Flow 1 Logging in or Signing Up Splash
Sign In/ Sign Up
Sign In
Create Account
Sign In Page
Sign Up
Sign Up As Artist
Profile Building
Signed In
No
Error
Yes Account Accepted
No
Error
Yes
Home Page
User Flow 3 Artist Perspective
Splash
Sign In/ Sign Up
Create Account
Sign Up
Sign Up As Artist
Profile Building
Account Accepted
No
Error
Yes
Details
Upload Art Work
Design Lab
Publish/Share
Other Artists Save
Edit
User Flow 2 Using the Recipient Build Splash
Home Page
Error
Denied
Reciept
Recipient
Complete Order
Profile Build
Review Order
Quiz
Authenticate
Credit Info Shipping Info
Storytelling
Results
Inspirations No Results Page No Results
Error
Results
16
View User Flow 1
Check Out
Gift List
Continue as Guest
Add to Cart
Sign In/Create Account/ Continue as Guest
Check Out
Design Lab
Artists Product Page
Low Fidelity Wireframe Sketches
17
High Fidelity Wireframes Draft 1
18
19
Gift-urp A New Gift Giving Experience Style Guide: Daniel Cho
Colors The colors for Gift-urp consist of the different shades of blue with some hint of green. The more neutral colors are the white and the dark grey.
#1D98A2
#A4DAD7
#61C2A6
#FFFFFF
#004760
#231F20
Typeface Roboto is the font-type that will be used for this project. It is commonly seen in Google and Android, so the familiarity will aid in the ease of reading.
Header :
Roboto Medium 24pt
Title :
Roboto Medium 20pt
Subheader :
Roboto Regular 16pt
Body :
Roboto Light 14pt
Call to Action Buttons
Search
20
Add to cart
Sign In
High Fidelity Wireframes Final
21
22
23
Gift-urp A New Gift Giving Experience Style Guide: Daniel Cho
Main Tasks Buy a gift The users were able to purchase a gift or reach the check out point. However, they were confused by the lack of access to categories of gifts. Most of them used the search bar to reach the check out point.
Look for artists and friends The users were able to !nd the artist easily and view their friends news feed, but the search for certain artist and friends or !lters for the artist they wanted to search for were unavailable.
Use the profile building tool. The users were unable to purchase a gift through the pro!le building tool because it was not complete and lacked the path to the check-out.
Design a gift The users were able to easily reach the design tool because it was accesible at three different points in the process, home page, product detail page, and the check-out page.
Look for Artists The users were able to !nd the artist easily, but the search for certain artist or !lters for the artist they wanted to search for were unavailable.
Summary In conclusion, the testing went really well for the most part. There were many missing pieces in the wireframe, therefore, the users weren t able to accomplish some of the tasks. However, for the functions that were available, the users were able to quickly run through the paths without any hindrance. The transition from the design lab tool to the checkout was most confusing for the users. They didn t under-stand how the pricing worked. However, most of the users thought that many of the functions were similar to social media they were comfortable with such as Snapchat, Soundcloud, Facebook, and Instagram. There were three users tested. One of them !t into the I m not creative persona and the other two !t into the busy persona. Two of them were females and one was male. All of them were between the ages of 20 and 24 and attending the university of Illinois Urbana-Champaign. They all were experienced with shopping through technology and were all heavy social media users.
24
25
ARTS 344 Locative Media Project Bartek Allen, Daniel Cho, Sara A. Pelaez
26
Back Drop
Back drop is an application that recieves music being listened to in the community through public music sources such as Spotify, Apple Music, and so on. The user needs to give his/her location for the application to start recieving the surrounding music. The location of other music listeners are very vague to prevent privacy issues, and no other information other than the vague location and the song are given to the user. The application contains data of what songs are most listened to in the area, at what time, and season. It also contains which songs are most blocked and skipped in the area.
27
28
High Fidelity Wireframes Draft 1
29
30
31
UNDERGRADUATE UNIVERSITY OF ILLINOIS URBANA-CHAMPAIGN
32
ARCHITECTURE STUDIO
33
RAIN REFINERY Spring 2016
The use of timber within Rain Refinery is to become the base of water purification as well its structure. Using an eco-friendly material for structure, its necessary to eliminate chemicals needed to purify water. Much of what makes wood undesirable is that it collects water and eventually rots. Rain Refinery uses this defect to allow for plant and moss growth. Break down of natural wood creates nutrients for growth, creating an eco-friendly water purification process. Delivering this product to people on a large scale will greatly alter pollution of all types.
34
35
RAIN REFINERY
Leading Bottled Water Consumers
U.S. Drinks-Per Person
1 U.S. 3 CHINA
21gallons of bottled water/year 2 MEXICO
4 BRAZIL
84%
bottled water ends up in landfill
BOX FORM REFLECTING MANHATTANâ&#x20AC;&#x2122;S GRID
INSERT RADIAL CIRCULATION OPPOSITE OF MANHATTAN
ANGLE CORE TO MAXIMIZE SOLAR POTENTIAL
CUT AWAY FROM FORM FOR UNNECESSARY FLOORS
TAPERING OUT MAXIMIZING GROUNDFLOOR SUNILIGHT
SLICE BACK AREAS FOR GREEN ROOF SPACES
N
36
RAIN REFINERY
Market
Museum
tial Residen
tial Residen
tial Residen
PURIFYING MOSS STEEL L PL PLATE A ATE GLULAM BEAM
POLYCARBONATE POLYCARBON L A ATE
PURIFYING PLANTS
ABSORBANT TIMBER
37
Fixed Track
Rolling Track
Metal Pin
Rotating 1”x12”
PURIFYING PLANTS Water Lillies Water Poppies Bulrushes Canadian Pondweed
PURIFYING MOSS Sphagnum Moss
ELIMINATES Heavy Metals Harmful Bacteria Parasites Radioactive Isotopes Chemicals Cyst Causing Catalysts
BECOMING VIABLE DRINKING WATER
N
GLULAM BEAM PIN CONNECTION
38
REPLACEABLE BEAM
RAIN REFINERY
ROOF GARDEN APARTMENT STUDIO 1 BEDROOM 2 BEDROOM 3 BEDROOM
WARHOL MUSEUM Wood naturally filters out particles bigger than 70 nanometers
Bulrushes remove a wide array of contaminents in the water includ-
Moss inhibits the growth of bacteria, algae, fungus and mold
Begin with new timber beam to
Over time purification timber will rot aiding in nutrients for plant growth
After 9-10 years of work new timber members are to be replaced
MARKET
39
EDGE FLOW Fall 2015
The intersection between Green Street and Third Street is a widely popular area in the University of Illinois Urbana-Champaign campus. The foot traffic on Green Street is heavily packed during the day with students in the cafes, restaurants, and apartment complexes, while at the night the bars are filled with the masses as late as 2am. The vehicle traffic is rough on Green Street too. Local buses come by every 30 minutes and cars are driving through this street all the time. On the other hand, Third Street is a more calmer location with fewer people and cars. There are more apartment complexes towards the south, while the north holds more parks. As a result, more bike traffic is seen on Third Street. The site has many interesting features. The site only allows a 15 feet push from Third Street, which can only be pushed 50% of the side, while Green Street can only be pushed 5 feet with the 50% limit. As a result for my design, I used these limitations to create two angles from Green Street and Third Street. With these angles, I created a circulation. Many of the walls and objects in the room are angled so that the arrival is easier and more nd natural. The angles of the hotel also allow an experience as one arrives to his or her room. The edge flow experience does not just end with the public spaces of the hotel, each room is built with an angled window that allows the user to feel and see the city.
40
max 15ft push from 3rd St. max 5ft push from Green St. both 50% only
urban
car traffic
park
SITE DIMENSION LIMITATION
URBAN vs. PARK
EAST ELEVATION
SOUTH ELEVATION
bicycle traffic
TRAFFIC ANALYSIS
NORTH ELEVATION
41
42
SECTION A
SECTION B
Soil Water proof membrane 1” insulation concrete slab
1/2” laminated double pane glass
(2) 1/4” structural glass
6” diameter HSS 2” supporting rod
concrete column
1/2” laminated glass
1/2” insulation
concrete
water proofing membrane
DETAIL
43