ModCloth's First App

Summary

ModCloth is an e-commerce website for women's retro and vintage fashion. They are most known for their adorable dresses and cheeky personality. Over half of their website traffic was coming from mobile devices, so they knew it was time to consider an app. ModCloth had their own team of designers and engineers, but they needed a team that specialized in iOS apps. Hey! That's where we came in.

Temporary Relocation

Since we’d be collaborating closely with ModCloth’s designers and engineers, Prolific sent a team to San Francisco to live for the duration of the project. Three of us shacked up in a flat while we were there, and we worked out of the ModCloth office.

Brainstorming

After some quick onboarding, breakfast burritos, and knowledge transfer, we leapt into brainstorming. It was actually the first time I had participated in the "design thinking" method. There were post-its and huge drawings everywhere (seriously, everywhere). The Prolific team locked ourselves in a room with all of the ideas and started to distill, seeing which themes were most interesting and feasible.

It was important to ModCloth for us to create the iPad app first (based on their data) and the iPhone app later. Ideally, we'd have built them together, but their timeline permitted us to start with one.

Initial Ideas

We came up with some pretty snazzy concepts for the app. “Streams" of content and results (think TweetDeck) would save categories or searches you were interested in, saving you from weeding through the hundreds of new products each day. You could easily swipe through each customized feed to see all new "red striped dresses" or items with the word "fox" in them, and even get notified when a new item was added to your saved search.

In the end, our timeline was tight, and we realized that we just needed to cover the most basic functionality before getting too clever. You know, browse the inventory, view a product, and be able to buy it.

Paper Prototypes

The fastest way to communicate my ideas for the basic app structure was to sketch it up and cut it out. This way, I could simulate the animations that would happen when a user interacted with the app. It took about 3 minutes and got everyone on the same page immediately without spending a day or two coding a prototype or speaking in hypotheticals.

Wireframes

The engineers were ready to start building immediately. We had no idea what the UI would look like, but they could start on the basic framework. I was about to become a bottleneck with four hungry engineers ready to go, so we prioritized the main features. I created wireframes based on our approved paper prototypes, and we were back on track.

User Testing

ModCloth started bringing people in for usability testing as soon as we had a workable [ugly!] prototype that they could interact with on an iPad. We tested whatever we had built every two weeks, and because of the continuous feedback from users, were able to course correct as we built the app.

User feedback helped validate designs or highlight problems immediately. Some things we adjusted due to user testing were the way a user navigates to subcategories in the menu, naming conventions, and other interactions like adding an item to a wishlist.

Style Tiles

Although ModCloth has a distinct look on their website, it wasn’t completely obvious how it would translate to an app. I created some style tiles to get a conversation going about the range of possibilities. Style Tiles combine a few UI elements to convey an overall look for the app, without wasting time creating specific layouts. It's kind of like an interior designer's swatch board before they do the whole room.

I reviewed the style tiles with ModCloth's Creative Director and CCO, and she let me know her preferences. I often encourage clients to choose a mix (70% A and 30% B), since it's rare to nail it on the first try. After a couple of small tweaks, we were good to go.

Launching the app

We were delighted to see the app featured in Apple’s App Store and riding in the top 10 for a while. Even more rewarding was the 5-star reception from the community. It proved that we didn't need some overly clever concept. Customers were thrilled to have something that worked well and was easy to use. Prioritizing the features and cutting things that weren't crucial had paid off.

A few months later the iPhone app launched with similar success and tied up our work with ModCloth. We were all sad to leave San Francisco and a wonderful office full of new friends, pugs, and whimsically dressed west coasters.

Lessons

MVP. Prioritization is hard. When you're racing toward a deadline, it's hard to cut features that you really love, but won't actually affect the core functionality of a product. I learned how to trim the fat and get the most important stuff out first.

Engineers are designers too! I couldn't believe how thoughtful the engineers (both Prolific and ModCloth) were about UX. Whenever the smallest of UX questions came up, they came over and we had a quick discussion about it. Many times, their suggestions were better than mine, and they considered technical implications in ways I wasn't capable of.

Let's work together!

Get in touch →