Zealery

Fall 2016

  • Branding
  • Identity
  • Mobile
  • UI
  • UI/UX
  • UX

Zealery_FloatingScreens

Zealery is a social shopping app aimed to encapsulate the feeling of shopping with friends on Boston’s Newbury St and bring it to online shopping. People create wishlists and load their shopping cart online to share images in group chats or over existing social media platforms. They seek opinions, recommendations, and approval from their social circles, but the way they do so is clumsy and requires multiple applications, websites, and messages. Zealery facilitates shopping together in a fun and effortless way.

Adopting Agile for this project, the Zealery team began with an extensive Research and Discovery phase, where they sat down with the client, Zealery’s founder and CEO, Wentao, to define the brand and goals for the semester. 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.

BrandAnswers2Once the team felt comfortable defining the users of Zealery as 16-24 year olds, Julie got to work writing users stories for the audience that was established as Active Online Shoppers, Passive Social Media Users/Online Shoppers, and Influencers.

“Creating a list of all of our app’s features and what needs those features fulfilled for our users was so helpful in narrowing our scope and keeping us in check to make sure everything we designed was user-centered.” —Julie Tennett, Designer

IMG_1367 copyThe final deliverable of this phase was a creative brief that outlined the goals for the project and summarized the team’s survey findings. To help define and narrow the scope of the project, the team created a “spectrum of shopping” to explore what shopping feels like, from window shopping to shopping on a mission.

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. IMG_1693

“Working on Zealery taught me about what goes into producing professional work while also using the skills I had developed in class.” —Sabrina Kantor, Developer

In tandem with wireframing, Christina and Brandon worked on building Zealery a brand that would appeal to young users and create a solid foundation for styling the app in the design phase. The lowercase z and hanger hybrid logomark was a favorite from early on, and Brandon created a custom logotype to accompany it.

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.

IMG_1455

“Working with Agile was the reason that we were able to finish such a robust app– I’m so proud that we were able to not only conduct research, build Zealery’s brand, and design the full UI for the app, but also develop the front end. I don’t think that would have been possible to do in a semester any other way.” —Christina Allan, Project Lead

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.

Zealery-All Screens