Brandon Siu
UX | Visual Design


About
   

Zealery

SERVICES
 User Research
 User Flows
 Wireframing
 Brand & Identity Design
 Interactive Prototyping
 Mobile UI Design
 
ROLE
Studio Designer @ Scout

YEAR
2016

A SOCIAL SHOPPING EXPERIENCE. 

Zealery is social e-commerce application aimed to encapsulate the feeling of shopping with friends on Main Street an online experience. Through machine learning and image recognition technology, shoppers can see recommendations based on their style profile collected from tagged photos on Facebook. From there, users have a platform on which they can share, comment, and compare items on their wishlists with their social circles, in real time. Zealery facilitates shopping together in a fun and effortless way.

Adopting Agile for this project, the 5 person design team began with an extensive Research and Discovery phase, where we sat down with the client to define the brand and goals for the project. Following that brand dive, the team conducted a user survey to confirm the assumptions made about who would be using the app, how old they are, and what their shopping habits are like.

THE CHALLENGE 


Shoppers online already create wishlists, bookmark pages, and load their shopping cart online to share images in group chats or over existing social media platforms. They share to seek opinions, recommendations, and approval from their social circles before purchase. Our ambitions were to create a social platform that can tie all these elements that contribute to the experience of online ‘social shopping’ and deliver it back to our users in a form of a mobile application.

GOALS 



1.

Define, and embody the feeling of shopping with friends in a social app platform.

2.

Design a platform that allows for effortless decision making for deeper engagement.

3.

Create an experience that feels unique to each individual and allow for discovery of new items.

DESIGN PROCESS  

The Kickoff

EARLY OBSERVATIONS FROM THE FEILD

At the outset of the project we didn’t have a clear mission or specific goals for the shopping experience. Without pre-existing insights, I partnered up with some friends for an afternoon of shopping fun on Boston’s Newbury Street to explore how shoppers made buying decisions.

The opportunity cost problem.

Shoppers were hesitant to buy an item on the spot for the fear of finding something better or cheaper down the road. Not being able to compare items between different stores led to walking back and fourth between stores to complete purchases.

An endorsement or suggestion goes a long way.

Shoppers who get re-affirmation or encouragement from friends are more likely to pick up or buy an item.

Shoppers are not just there to shop.

Shoppers who invite their friends out for a day of shopping don’t just shop the afternoon away but they  also spend time socializing at restaurants, cafes and the occasional ice cream parlors in-between.  

Shopping as a chore vs shopping for enjoyment.

Certain shoppers who know exactly what they want, tactically plan their shopping experience to minimize time spent shopping. Whereas certain shoppers enjoy assessing their options and taking their time with their purchasing decisions.
  

UNDERSTANDING THE BRAND AND IT’S AUDIENCE


Adopting an Agile Methodology  for this project, the Zealery team continued research with an extensive Research and Discovery phase, where we sat down with the client, Zealery’s founder and CEO, Wentao, to define the brand and goals for the project. Following that brand dive, the team conducted a user survey to confirm the assumptions made about who would be using the app, how old they are, and what their shopping habits are like.


NARROWING THE NET 

Adopting an Agile Methodology  for this project, the Zealery team continued research with an extensive Research and Discovery phase, where we sat down with the client, Zealery’s founder and CEO, Wentao, to define the brand and goals for the project. Following that brand dive, the team conducted a user survey to confirm the assumptions made about who would be using the app, how old they are, and what their shopping habits are like.

Designing

PAPER PROTOTYPES 

From there, the team began to wireframe, turning to paper cutouts of different pieces of the interface to explore the ways the app could work. Kevin and Julie worked with many iterations of the app’s structure to make the many necessary features fit in a seamless and easy to use way. The paper wireframes were brought onto the computer to make an entirely clickable digital prototype. After the first round of wireframes, developer Sabrina began to work on the front end of the app, first with building out the structure, and when the team moved into design, she continued to adjust the code she had already written to allow for structural changes and styling the entire UI.

Building a brand

It was important to create a brand for Zealery that would shape the way we designed the UI. Our lowercase cursive Z evolved into the Zealery hanger, and we pieced together typefaces that served as inspiration for the completely custom Zealery logotype. The coral color was one that the team and the clients liked from the beginning, and we later added the teal to differentiate the runway feature, the section of the app that required the most thought and iteration.

The Outcome 

THE RUNWAY 

Gameplay was a unique feature of the Zealery app– users can send up to 9 items of clothing to friends who then rapid-fire decide which items would look better. The team worked on many iterations of what was originally called “battle” as well as renamed it to “runway.” Early wireframes and design put a user’s runways in their profiles, but the final designs gave runway it’s own tab in the main navigation, calling attention to what makes Zealery different, as well as allowing room for expansion of different gamified features in future versions of the app.

HOMEFEED AND WISHLIST

At the end of the semester, the Zealery team was able to deliver research results, a complete brand and brand guideline book, a fully designed and clickable prototype, front end development, and an animation to imagine the microinteractions that might occur while playing a runway.

LIVE-DEMO

                           
 DID SOMEONE SAY MORE PROJECTS?

Liberty Mutual 

Mobile UX Design

WHIM

Experience Design

Alignable 

Product UX Design


             

Made with  by Brandon Siu 2019