Bedizen Wardrobe App


Summary

Bedizen is a wardrobe app designed make it easier to track your clothing and build a capsule wardrobe digitally. This is personal project that I am currently designing and building from the ground up.

Project Type

Branding, Web Application

Roles

UX Research, Information Architecture, Wireframes, Style Tile, Visual Design

View Project

In Development
View current prototype

Background

The Problem

I came up with the idea for Bedizen while I was trying to develop my own method for creating a Capsule wardrobe. I started out by opening a spreadsheet and listing out each piece of clothing I owned and all the data related to each item. Needless to say, I was scanning through my spreadsheet thinking there had to be a better and more visually pleasing way to do this. I looked up any potential wardrobe apps on iTunes and Google Play and only found very ugly interfaces or really expensive ones that didn't quite have what I wanted. I decided to create a wardrobe app using my own design and development knowledge to build it out as far as I could.

In my intial round, I designed the first set of comps based on which features I would love to have. Some features I really wanted was a an 'outfit builder' and a live shopping list connected to the wardrobe. Another feature would be a visual way to display the wardrobe's 'status' reporting the number of tops owned, or the color mix of the wardrobe. The main goal was to instantly see what 'holes' a user had in their wardrobe as a guide to help fix them.

Thankfully, the new Creative Director at my job introduced our team to the User Centered Design (UCD) process. I was able to leverage what I learned there and apply it to my wardrobe app.

Competitors

When I initially checked in late 2015, I didn't find any serious competitors that were making a wardrobe or capsule app. It wasn't until later in 2016 that I found Cladwell, whom was targeting only men at the time, and their sister company Capsules that was targeting women. With this knowledge, I decided to position my app towards young and trendy women with an emphasis on making it a fun app experience.

Scope

The primary features of the app would be: adding clothing items to the wardrobe, building capsules, building outfits, a shopping list, and a status screen. I decided to save social sharing and advertiser intergration to Phase 2 of the project.

There has to be a better way...
Early concept in May 2016, before UCD.

UX Research

Personas

I discovered 2 personas while running through the UCD process. The primary user was Jamie, a 20 to 30 something who wanted a fun and easy way to create a capsule wardrobe. The potential secondary user I discovered was Kate, a fashionista who has professional or aspirational goals of becoming a style consultant. She could use the app as tool to help build suggested capsules for her clients. Since many of the social sharing aspects will be in Phase 2, I decided to focus on the primary user for the app.

User Surveys

After some research into my primary user, I created a simple survey and sent it out to people within the target demographic. I gained some interesting insights, such as most people check the weather before they decide what to wear. I know this sounds like a 'duh' moment, but I thought it would be another fun way to make the app more seamless by adding a quick weather checker at the opening of the app to help the user choose an outfit.

User Survey Results

Experience Mapping

After I gathered my information from my surveys I created an Experience Map to help understand how my user would interact with the app throughout the day. This helped me really get into the mindset of the users in their day-to-day.

Experience Mapping

Information Architecture

The information architecture at this stage was crucial to determining how I would design the app. Many questions I had were how each piece of information would relate to one another. After listing out all of the types of data it would need, I conducted a card sorting session with my partner.

Card Sorting

We determined at this stage that a 'Wardrobe' would be defined as the user's entire clothing catalogue. However, a user could have multiple 'Capsules' within their Wardrobe, and each of those clothing items must come from their Wardrobe. The social aspect of the app would consist of people building their own capsules and sharing that capsule set with others by adding it to their Favorites. Then it would be added to the User's Public Favorites list. However, this brought up the issue of whether a User must own that particular piece to be added to the User's Wardrobe, or would there be a separate section for un-owned pieces? I settled on the idea to include each piece that wasn't owned by the User, to be automatically added to their Shopping List.

After we sorted the cards, I switched over to Mind Meister and created a site map showing the informational hierarchy and sorting out which features were in scope.

Card Sorting
Information Architecture via Mind Meister

Wireframing

I initially sketched out some of the layouts on paper. Then, I switched over to Sketch and built out the wireframes. I decided to go with the mobile design first, and then run through the desktop after working out the core features on mobile.

Example Wireframes

Visual Design

Style Tile

Since part of the goal was to make the app fun to use, included playful colors that would look good blending together. I was very inspired by the ombre hair color trend. I also decided on a serif font to use for headers and a clean sans serif to do the heavy lifting for the body copy.

Sidenote: All illustrations and photography are currently stock. I plan get professional custom photography and vector illustrations if I decide to make my app public.

Comps

Comps are a fun, but intenstive step in the process. Each screen needs to flow logically to the next piece of information. One tough area was determining how to display an Outfit. I played with a lot of layouts and really liked the collage idea similar to the one on Polyvore. However, I decided to layout each piece like a grid because the individual illustrations can be difficult to see if they overlap. I also made the decision that each outfit should only contain 6 pieces max at a time, since it would be difficult show the entire look of the outfit in one screen.

UI Design

Some UI elements that I wanted to incorporate in the google card material design. I think the clean and uniform look with add to the overall design. It is really important for me to make the user interactions as smooth and fun as possible.

Sound Design

I plan on including satisfying sound design in the final product, however given the limitations on the web, I will have to table it for the mobile app version.

Example Style Tile
Example Comps

Prototype

I'm using Principle to make the first prototype. I'm still learning to use this program and currently testing out new animations.

User Scenarios & Testing

At this stage I will continue to test each of my User Scenarios and determine where each screen needs editing.

Next Step: Development

Once the testing stage is complete, I will continue into the development stage. I am currently looking into using React.js to help build the app.

I am super excited for this project. Please keep checking back to see more of my progress!

Contact [or stalk] Me on Social Media