Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
M I C K E Y L I A O
U X P O R T F O L I O
2 0 1 5
M L
C O N T E N T S
0 3 / P r o c e s s
0 4 / S e a m l e s s
R e i n v e n t i n g t h e R e s t a u r a n t D i n i n g
E x ...
Hello! I’m Mickey.
My mantra is to create happiness through research and design in
order to better serve both the business...
U s e r - c e n t e re d
D E S I G N P R O C E S S
R E S E A R C H
D E S I G N
T E S T
I T E R AT E
3
P
R
O
C
E
S
S
We incorporated a new split check feature into Seamless’s current delivery app that
can be utilized in the restaurant sett...
C O M P A R A T I V E
A N A L Y S I S01 F O O T P R I N T L A Y O U T
A N A L Y S I S02
C O M P E T I T I V E
R E S E A R ...
S U R V E Y S
& I N - D E P T H I N T E R V I E W S
The fact that people dislike doing math might shed
some light as to wh...
P R O T O T Y P E
&
T E S T I N G
D E S I G N
S T U D I O07
W I R E F R A M I N G
& P R O T O T Y P I N G08
We u s e d t h...
We redesigned the landing page to tell a story of the Reserve experience rather than
showing the users a feature tour. We ...
C O M P A R A T I V E
A N A L Y S I S01 F O O T P R I N T L A Y O U T
A N A L Y S I S02
C O M P E T I T I V E
R E S E A R ...
S U R V E Y S
& I N - D E P T H I N T E R V I E W S
“ I feel like I’m missing
information so I rather
trust someone who ha...
D o w n l o a d b u t t o n c a n b e f o u n d o n t h e h o m e p a g e i m a g e c a r o u s e l , t h e t o p
n a v i ...
We incorporate a new “Build Story” option into the existing app that allow users
to add more content on top of a specific m...
C O M P A R A T I V E
A N A L Y S I S01
C O M P E T I T I V E
R E S E A R C H
U S E R F L O W03
T h e a m o u n t o f e ff...
S U R V E Y S
& I N - D E P T H I N T E R V I E W S
“ I don’t like huge photo blast. I
personally don’t like seeing too
mu...
P R O T O T Y P E
&
T E S T I N G
D E S I G N
S T U D I O07
W I R E F R A M I N G
& P R O T O T Y P I N G08
U S E R
T E S ...
C O N T A C T
T H A N K Y O U
w e b s i t e : m i c k e y l i a o . c o m
e m a i l : m i c k e y. l i a o @ n y u . e d u...
Upcoming SlideShare
Loading in …5
×

Mickey Liao's UX Portfolio

469 views

Published on

Hello, my name is Mickey and I'm a UX / UI Designer. From my portfolio you will see some of the projects I've completed for my User Experience Immersive course at General Assembly. Thanks for reading!

Published in: Design
  • Be the first to comment

Mickey Liao's UX Portfolio

  1. 1. M I C K E Y L I A O U X P O R T F O L I O 2 0 1 5 M L
  2. 2. C O N T E N T S 0 3 / P r o c e s s 0 4 / S e a m l e s s R e i n v e n t i n g t h e R e s t a u r a n t D i n i n g E x p e r i e n c e 0 8 / R e s e r v e R e d e s i g n i n g t h e D o t C o m S i t e 1 2 / T i m e h o p D e s i g n i n g a N e w S h a r i n g F e a t u r e 1
  3. 3. Hello! I’m Mickey. My mantra is to create happiness through research and design in order to better serve both the business and user. In Business School I learned all the various facets of research and planning in order to produce sound strategies and launch plans. During my time as Senior Account Production Coordinator, I’ve gained real world experiences advising design decisions based on client retail selling price, production level cost, style construction, material lead-time and factory production capacity. As a designer I want to combine my knowledge of business with my passion for users to create clean, simple and intuitive designs. When I’m not doing UX, I like to travel and learn about other people’s cultures and customs as I go. S K I L L S U S E R R E S E A R C H C O M P E T I T I V E A N A LY S I S H E U R I S T I C A N A LY S I S F O O T P R I N T L AYO U T A N A L AY S I S J O U R N E Y M A P P I N G W I R E F R A M I N G P R O T O T Y P I N G U S A B I L I T Y T E S T I N G D E S I G N P R O G R A M S POP PROTOTYPE SKETCH INVISION OMNIGRAFFLE AXURE HYPE ADOBE ILLUSTRATOR PHOTOSHOP INDESIGN 2
  4. 4. U s e r - c e n t e re d D E S I G N P R O C E S S R E S E A R C H D E S I G N T E S T I T E R AT E 3 P R O C E S S
  5. 5. We incorporated a new split check feature into Seamless’s current delivery app that can be utilized in the restaurant setting. Seamless already has all the restaurant connections, user network and the necessary tools in place. We can take advantage of their current resources to expand their delivery model into the restaurant industry. S O L U T I O N There is usually some stress and inconveniences when it comes to dealing with a group dinner check at the end of the night. We believe we can leverage the benefits of mobile payments, implementing it into the restaurant experience to remove the stress and friction out of the ordering and payment process. O P P O R T U N I T Y P R O J E C T 0 1 S E A M L E S S : MY ROLE: U X R e s e a r c h e r DURATION 1 0 b u s i n e s s d a y s R e i n v e n t i n g t h e R e s t a u r a n t D i n i n g E x p e r i e n c e 4 S E A M L E S S Restaurants Sketch 9:41 AM 100% Dining In - Your Current Location Open Closed Closed Check-In to Begin Dining http://invis.io/Y23OEI27A PROTOTYPE LINK:
  6. 6. C O M P A R A T I V E A N A L Y S I S01 F O O T P R I N T L A Y O U T A N A L Y S I S02 C O M P E T I T I V E R E S E A R C H U S E r F L O W S03 S e a m l e s s : I t e m O rd e r P a g e i s c o m p r i s e d m o s t l y o f b l a n k s p a c e . We c a n u t i l i z e t h i s s p a c e t o i n c l u d e i n f o r m a t i o n s u c h a s i n g re d i e n t s . D ow n t ow n : E m p l oys a c a ro u s e l w h i c h h e l p s i n l o c a t i n g p a r t i c u l a r i t e m s a n d re q u i re s l e s s s c ro l l i n g . We wo u l d a d o p t t h i s f e a t u re i n t o o u r p ro t o t y p e t o t e s t . D ow n t ow n : O n b o a rd i n g p ro c e s s i s e a s y a n d c l e a r, i t o n l y t a ke s 4 p a g e s a n d 8 a c t i o n s O p e n Ta b l e : P ro c e s s f o r a d d i n g p ay m e n t i s t o o l o n g , i t t a ke s 9 p a g e s a n d 1 0 a c t i o n s t o c o m p l e t e 3 M A I N C O M P E T I T O R S • W h a t wo r ke d ? • W h a t d o e s n ’ t wo r k ? • W h a t ’s m i s s i n g ? H e u r i s t i c A n a l ys i s • O n b o a rd i n g • Selecting Restaurant • Payment Avoid an overly long and cumbersome onboarding process Bill splitting is a missing feature to incorporate. We looked at at other competitors to adopt features that worked as well as learn about pitfalls to avoid M a p p e d c o m p e t i t o r u s e r fl ow s f o r : K E Y T A K E A W A Y S 5 S E A M L E S S
  7. 7. S U R V E Y S & I N - D E P T H I N T E R V I E W S The fact that people dislike doing math might shed some light as to why these dinner checks end up getting split rather than being paid by the item. # 3 T O P V O T E D I n c o n v e n i e n c e : D o i n g t h e m a t h ( 4 2 . 8 % ) “ Paying for the meal can be the most important part of the evening. You don’t want to sit there with your friends and a calculator. ” 04 C R E A T I N G U S E R P E R S O N A S05 F E A T U R E S P R I O R I T I Z A T I O N06 U S E R R E S E A R C H With the data collected from our surveys and interviews, we began to affinity map all the major points that stood out to us. We categorized our findings by:• Dining habits • Split payment habits • Current pain points in the restaurant experience Split checkS all the time Split CHECKS EVENLY 68.6% SPLIT CHECKS BASED ON ITEMS ORDERED 60% 40% PAINS · PLEASURES · BEHAVIORS · CONTEXT Brad “Hates math” Nancy “Pay for what’s fair” Rosie “Willing to pay more to avoid conflict” 6 S E A M L E S S 141 S U R V E Y R E S P O N S E S 11 I N - D E P T H I N T E R V I E W S 3 P E R S O N A S More people might choose to pay by itemized checks if we can simplify the payment process K E Y T A K E A W A Y S App needs to serve people who: • want to pay for the entire check • pay for certain diners • just for their portion • split evenly • Must haves or nice to haves • Hard or easy to develop P l o t t e d f e a t u re s b a s e d o n w h e t h e r t h ey we re : We chose features that overlapped with all 3 personas M u s t H ave s f e a t u re s t o p ro c e e d w i t h : We f o r m u l a t e d o u r q u e s t i o n s t o l e a r n a b o u t :
  8. 8. P R O T O T Y P E & T E S T I N G D E S I G N S T U D I O07 W I R E F R A M I N G & P R O T O T Y P I N G08 We u s e d t h e ex i s t i n g S e a m l e s s a p p a s a f o u n d a t i o n , m a k i n g a d j u s t m e n t s t o e a c h s c re e n t o s e e h ow t h e n ew f e a t u re s w i l l fi t i n t o t h e c u r re n t fl ow . POP prototypes allow us to quickly test and validate our design choices before moving on to higher fidelity prototype. We created our high fidelity prototypes on Sketch and InVision. The prototype went through multiple iterations based on feedback from our user testings. $4.30 $8.60 $4.30 My Table’s Order Sketch 9:41 AM 100% Luke Mixed Berries Crepe My Subtotal 1 + Add More Items Kristin (Me) Ready! Luke Still Deciding… Alex Still Deciding… Table # 9 Submitted - Waiting forYour Crew Split cost with Luke ea $4.30 SPLIT $8.60 $8.60 $8.60 My Table’s Order Sketch 9:41 AM 100% Kristin (Me) LukeLuke Alex Mixed Berries Crepe My Subtotal 1 + Add More Items Table # 9 SPLIT Continue to Checkout Cancel Pay for Mine Divide Bill Evenly Some Diners All Diners Select whom you would like to pay for $ 30.60Alex $5.60Mint tea1 $8.60Mixed Berries Crepe1 Split cost with Krisitn (Me) ea $4.30 Choose Diners to Pay For Pay for Some Diners Sketch 9:41 AM 100% Kristin (Me) $ 4.30 $ 9.90 $14.20Subtotal Sales Tax Luke $1.70 Process My Bill - $ 18.57 (20%) $3.09Update Tip Table # 9 10% $1.50 15% $2.30 20% $3.09 Custom $ U S E R T E S T I N G09 7 S E A M L E S S 6 I T E R AT I O N S P O P P A P E R P R O T O T Y P E M E D I U M F I D E L I T Y P R O T O T Y P E H I G H F I D E L I T Y P R O T O T Y P E 1 3 U S A B I L I T Y T E S T S 2 - 5 m i n s S k e t c h i n g s p r i n t s P O P P R OTOT Y P E H I G H F I D E L I T Y B e n e fi t s o f m e d i u m fi d e l i t y i s i t ’s s t i l l re l a t i ve l y q u i c k t o p ro d u c e b u t h a s a l l t h e c o l o r a n d s p a c i n g s o t e s t e r s c a n g e t a b e t t e r s e n s e o f h ow t o re a d a n d wo r k t h e a p p . It is important to keep language consistent and clear Use colors as indicators of who has/hasn’t placed their orders K E Y T A K E A W A Y S
  9. 9. We redesigned the landing page to tell a story of the Reserve experience rather than showing the users a feature tour. We also restructured the top navigation and footer so users will have better access to information that is prudent to their decision whether to download the app or not. S O L U T I O N The Reserve app is a product that serves a real market need, assisting users with restaurant search, making reservations and finally splitting and paying the bill at the end of the night. Now we need find a way to effectively translate this onto their website in order to tell an effective story that will encourage people to download the app. O P P O R T U N I T Y P R O J E C T 0 2 R E S E R V E : MY ROLE: L e a d D e s i g n e r & U X R e s e a r c h e r DURATION 1 4 b u s i n e s s d a y s R e d e s i g n i n g t h e D o t C o m S i t e 8 R E S E R V E http://2fbeub.axshare.com/home.html PROTOTYPE LINK:
  10. 10. C O M P A R A T I V E A N A L Y S I S01 F O O T P R I N T L A Y O U T A N A L Y S I S02 C O M P E T I T I V E R E S E A R C H 03 • H ow a re u s e r s n av i g a t i n g t h e s i t e? • H ow d o t h ey t e l l t h e i r s t o r i e s? A n a l y z e S i t e L ayo u t R e s e r ve L a n d i n g P a g e M u n c h e r y L a n d i n g P a g e M u n c h e r y A b o u t P a g e 5 M A I N C O M P E T I T O R S Cover 7 Main Pages 4 Sub Pages Reserve 11 Main Pages Reserve: There is a lot of confusion on who the “For Restaurant” page is for. The site is elegant but cold We wa n t t o g e t a b e t t e r u n d e r s t a n d i n g o f h ow R e s e r ve a n d o t h e r c o m p e t i t o r ’s i n f o r m a t i o n a rc h i t e c t u re c o m p a re . W h a t a re t h e u s u a l p a g e s t h a t g e t u t i l i z e d a n d h ow a re t h ey o rg a n i z e d ? Munchery: Showcases how they contribute to sustainability and help nourish the community. 9 R E S E R V E U S E r F L O W S Avoid feature tours on landing page Top Navigation need to include: K E Y T A K E A W A Y S H e u r i s t i c A n a l ys i s • Our Story • How It Works • Download App
  11. 11. S U R V E Y S & I N - D E P T H I N T E R V I E W S “ I feel like I’m missing information so I rather trust someone who had already experienced it. My peers have more credibility than the reviews. ” 04 C R E A T I N G U S E R P E R S O N A S05 F E A T U R E S P R I O R I T I Z A T I O N06 U S E R R E S E A R C H 10 I N - D E P T H I N T E R V I E W S • W h a t d o yo u t h i n k R e s e r ve i s a b o u t ? • H ow d o yo u fi n d o u t a b o u t a p p s? • W h y d o yo u d ow n l o a d a p p s? PAINS PLEASURES BEHAVIORS CONTEXT • Top Navigation • Human Touch (Storytelling) • Transparency • Highlighted Content • Explanation of Advantages of the App Must Haves: 10 36 S U R V E Y R E S P O N S E S R E S E R V E Benjamin “Word of Mouth” Dora “Takes advice and does some research” Dennis “Tech Blog Follower” 3 P E R S O N A S K E Y T A K E A W A Y S Need to address users who just want to download the app as well those who want to do deeper dives M O S COW M E T H O D : M U S T / S H O U L D CO U L D / WO U L D N OT 56.7% Friends / Family 20% Ads 13.3% Search 10% Other How are people finding apps?
  12. 12. D o w n l o a d b u t t o n c a n b e f o u n d o n t h e h o m e p a g e i m a g e c a r o u s e l , t h e t o p n a v i g a t i o n , a s w e l l a s a b o v e t h e b o t t o m f o o t e r o n e v e r y p a g e . P R O T O T Y P E & T E S T I N G D E S I G N S T U D I O07 W I R E F R A M I N G & P R O T O T Y P I N G08 B a s e d o n t h e f e a t u re s we f o u n d we m u s t p r i o r i t i z e d f ro m t h e M o S C o W m e t h o d , we s ke t c h e d p o t e n t i a l d e s i g n l ayo u t s w h i l e ke e p i n g i n m i n d t h e p e r s o n a l i t y o f t h e R e s e r ve b ra n d . O t h e r t h a n t e l l i n g a n e ff e c t i ve s t o r y, o u r m a i n g o a l wa s t o g e t p e o p l e t o t h e A p p S t o re s o t h ey c a n h o p e f u l l y d ow n l o a d t h e a p p . U S E R T E S T I N G09 4 I T E R AT I O N S 1 3 U S A B I L I T Y T E S T S 2 - 5 m i n s S k e t c h i n g s p r i n t s Included images of iphones to let users know this is an app based product People need to have easy access to the App Store on all pages K E Y T A K E A W A Y S H I G H F I D E L I T Y Home Page: Added locations with restaurant line-up since users stress this is a deciding factor to download app or not. About Us: Humanized the brand by including the backstory of how it all started. We created a sub navigation for users to click through so there is less scrolling and it’s easier to locate stories. How It Works: Created for those who wish to do a deeper dive on the product. Incorporated a looping animation to create a more visual and dynamic learning experience. We i n c o r p o ra t e d s eve ra l p o i n t s o f d ow n l o a d s o u s e r s c a n a c c e s s t h e A p p S t o re re g a r d l e s s o f w h e re t h ey a re o n t h e s i t e . 11 R E S E R V E
  13. 13. We incorporate a new “Build Story” option into the existing app that allow users to add more content on top of a specific moment. Users also have the option to add other contributors who shared that moment to add and view the content. S O L U T I O N Timehop has found success in the unique space of reconnecting users with nostaglic content. However, they can take their product farther and make it more dynamic and offer new value to users by adding a new collaborative element to encourage sharing and collaborating among friends. O P P O R T U N I T Y P R O J E C T 0 3 T I M E H O P : MY ROLE: L e a d D e s i g n e r & U X R e s e a r c h e r DURATION 9 b u s i n e s s d a y s D e s i g n i n g a N e w S h a r i n g F e a t u r e 1 YEAR AGO SUN ANNA’S DAY IN HISTORY: JULY 13 2 7 Share Lorem ipsum dolor sit amet, consectetur adipiscing elit. Build Swipe to see more S 12 T IM E H O P https://invis.io/HZ3JCB6TJ PROTOTYPE LINK:
  14. 14. C O M P A R A T I V E A N A L Y S I S01 C O M P E T I T I V E R E S E A R C H U S E R F L O W03 T h e a m o u n t o f e ff o r t a u s e r i s w i l l i n g t o ex t e n d i n t o t h e c o n t e n t c re a t i o n p ro c e s s d e p e n d s o n t h e c o n t e n t l i f e s p a n . 10 C O M P E T I T O R S 13 T IM E H O P GEOLOCATIONTAGS HASHTAGS B e l ow a re t h e c u r re n t m e t h o d s ava i l a b l e f o r o rg a n i z i n g c o n t e n t : As customizability options increase, so does the length of user flows K E Y T A K E A W A Y S Content lifespan is directly correlated with content creation effort Facebook: It takes 6 screens and 12 actions to post a photo Tumblr: It takes 4 screens and 7 actions to post a photo We s t u d i e d a p p s t h a t h a n d l e s c o n t e n t : • M a r ke t i n g P o s i t i o n i n g • L ayo u t F e a t u re ⁃ G l o b a l E l e m e n t s ⁃ C o m m o n E l e m e n t s ⁃ L o c a l E l e m e n t s • F e a t u re O ff e r i n g s • H e u r i s t i c A n a l ys i s
  15. 15. S U R V E Y S & I N - D E P T H I N T E R V I E W S “ I don’t like huge photo blast. I personally don’t like seeing too much content. ” 04 C R E A T I N G U S E R P E R S O N A S05 F E A T U R E S P R I O R I T I Z A T I O N06 U S E R R E S E A R C H Olivia “The Organizer” Anna “The Creator” Frank “The Curator” We f o u n d t h a t w h e n i t c o m e s t o s t o r i e s a n d m e m o r i e s o n s o c i a l m e d i a , t h e re a re o f t e n t h e m e s t o s t o r i e s b e i n g s h a re d , m o t i va t i o n s b e h i n d t h i s s h a r i n g , a n d t h e f o r m o f c o n t e n t i s i m p o r t a n t . • W h a t we re t h e m e m o r i e s a b o u t ? • W h a t d i d t h ey d o w i t h t h e s e m e m o r i e s? • H ow d i d t h ey d o c u m e n t t h e s e m e m o r i e s? 14 T IM E H O P 65 S U R V E Y R E S P O N S E S 8 I N - D E P T H I N T E R V I E W S 3 P E R S O N A S AFFINITY MAPPING Group by: Frequency & Similiarity Users don’t mass dump photos onto social media, they post specially curated content for each memory. K E Y T A K E A W A Y S There are concerns about privacy and people believe the content they put out is a reflection of their reputation and personal brand. • Connectivity to other users • Access to content on various platforms • Address privacy concerns We p r i o r t i z e d f e a t u re s b a s e d o n e a s e o f d e p l oy m e n t a n d h ow i t fi t s i n c u r re n t u s e r fl ow :
  16. 16. P R O T O T Y P E & T E S T I N G D E S I G N S T U D I O07 W I R E F R A M I N G & P R O T O T Y P I N G08 U S E R T E S T I N G09 15 T IM E H O P 1 YEAR AGO SUN ANNA’S DAY IN HISTORY: JULY 13 2 7 Share Lorem ipsum dolor sit amet, consectetur adipiscing elit. Build Swipe to see more S 11 U S A B I L I T Y T E S T S 5 I T E R AT I O N S Trigger point is the content itself Eliminate need for users to name and select dates for album to concise onboarding process K E Y T A K E A W A Y S P O P P R OTOT Y P E H I G H F I D E L I T Y We s ke t c h e d b a s e d o n u s e r t a s k . We s t a r t e d by s ke t c h i n g o u t h ow u s e r s wo u l d g o a b o u t b u i l d i n g c o n t e n t . We t h e n a d d re s s e d a n y t h i n g we m i g h t h ave m i s s e d . We d e c i d e d t o u t i l i z e t h e Ti m e h o p m a s c o t A b e d u r i n g t h e o n b o a rd i n g p ro c e s s t o ke e p t h e a p p i n l i n e w i t h t h e p l ay f u l n a t u re o f t h e b ra n d . We i n i t i a l l y d e s i g n e d a n a l b u m f e a t u re w h e re u s e r s g o t h ro u g h a w h o l e o n b o a rd i n g p ro c e s s t o c re a t e a s t o r y w i t h t h e i r f r i e n d s . H oweve r we f o u n d t h a t t h e a c t u a l t r i g g e r t o b u i l d a s t o r y i s s e e i n g t h e c o n t e n t i t s e l f. S o we re d e s i g n e d i t w h e re u s e r s c a n c re a t e a s t o r y d i re c t l y f ro m t h e c o n t e n t a s we l l a s c o n c i s e d t h e o n b o a r d i n g p ro c e s s s i g n i fi c a n t l y. 2 - 5 m i n s S k e t c h i n g s p r i n t s
  17. 17. C O N T A C T T H A N K Y O U w e b s i t e : m i c k e y l i a o . c o m e m a i l : m i c k e y. l i a o @ n y u . e d u l i n k e d i n : l i n k e d i n . c o m / i n /m i c k e y l i a o

×