The “Urban Renewal” Clothing App Project

Good design should tell a story. Follow the journey of how I designed the Urban Renewal app, and see how my customer would purchase an item for a family member. Below I outline my process, provide a video detailing of the wire-frames, a link so you can check out the prototype, and a step by step visual walk-through of each frame.

 

A video walk-through:

I used Adobe XD to prototype my wireframes and then captured a screen-recording of how I would walk-through the app if I were purchasing a plain white t-shirt for my aunt. If you would like to play around with the wireframes yourself, please access the prototype here.

Methodology:

The problem: So many of us have clothes that we do not wear, just idly sitting in our closets. I wanted to design an entire clothing brand that specializes in what I like to call “outfit sustainability”. All of our clothing would be made out of sustainable materials. As an added bonus, we would offer redesign services for any of our customers’ unwanted gear: drop it off, wait a few days, and come pick up your new piece (hence the name Urban Renewal). The goal for the app was to be just as transparent and bare bones as the business model. Get what you like, with no fuss. 

Who I worked with: I completed this project solo and took a few design suggestions from my mentor at the time. I also give credit to Urban Outfitters, because I built my design as an imaginary subsidiary brand that could be affiliated with them.

What tools I used: I used Adobe illustrator and Adobe XD to create the wireframes and prototypes for the app. I used Adobe InDesign to create the brand guidelines and the brochure. And I used QuickTime to screen capture my progress. 

Discovery phases: A huge part of my problem came in with the overall branding. I was afraid that my designs were too simple and that the logo wasn’t clever enough. I also didn’t feel too confident with yellow being one of my main company colors. As I continued to design, however, I began to fall in love with the simplicity of the business model and how the app was turning out. The simplicity coupled well with the overall mission of “outfit sustainability with no fuss.” The overall point of the app was to solve the problem of hyper-consumerism in the clothing industry, while still offering a solution on how to turn a profit. 

Creating personas and a user journey helped me to see the project more clearly.

 

A step by step walk-through:

The Opening Credits…

It all begins with a strong opening screen. In this instance, I chose a bright marigold yellow with the company logo “Urban Renewal” to grab the customer as soon as they open the app.

The Call To Action…

Imagine a shopping app that makes you sign in as soon as the credits roll away. My imaginary app sure does! It’s great for the user - they can save their shopping cart and “love” items they want to come back to later. It’s also great for the company - they can add new users to the email marketing lists every time someone signs up!

The Main Page…

Once you’re logged in, you will be greeted with coupons and deals as well as sales and discounted items. The bottom card will always feature what the company is specializing in for that season. Right now? It’s sweater weather. Click the left navigation menu to reach the categories page.

The Categories Page…

Decisions, decisions, decisions. Am I shopping for mom, dad, Aunt Velma, or Uncle Shaggy? Whatever your shopping needs are, it’s all made simple after you click on the left navigation menu. Drop down menus under each category make browsing simple and streamlined.

The Simplified Menu…

Okay, so we decided we’re shopping for Aunt Velma today. She has run out of basic t-shirts to lounge in, and she mentioned it to us the last time she called to complain about how the neighbors dog, Scooby, woke her (and half the neighborhood) at 4am again. Don’t worry Aunt Velma, we’ve got you covered.

The Final Selection…

Aunt Velma sure does love her sweaters. But we must stay focused! She asked for a t-shirt. Do we want to buy her a plain white tee with a fancy color? Or are we in the mood to buy her a colorful blue tee that is a bit out of her comfort zone? Whichever we decide, the Urban Renewal app has large enough pictures for us to view the clothing choices, before making a final selection. Since Aunt Velma can be a bit particular, we’re probably better off calling Uncle Shaggy to make sure we’ve scoped out the perfect surprise t-shirt for her!