The Project: Part 1
Interview 3 classmates to learn about their needs on the topic of fashion. Narrow your focus and discover a problem they have that can be solved with the design of a mobile app.
The Challenge
People like the convenience of shopping online using a service like Amazon Prime. It’s great. You know whether or not that cool jacket you want is in stock and you get it delivered to you quickly. The hassle comes when you try the jacket on and discover you don’t like the way it looks on you. Now have to repackage it, and then drop it off to either the post office or UPS.
The Solution
So you don’t have any packing tape and you are way too busy to deal with having to take your package to UPS. What if there was a mobile app that you could use to schedule someone to come to you, bring packing tape, repack your jacket, and take your package to UPS for you?
My Role
This was an individual project, so I did it all: user interviews, user flows, paper sketches that I converted to medium fidelity screens using Illustrator, importing those into Marvel to create a prototype that I could test, and user testing. During part 2 of this project, I designed the “Take It Back” app logo in Illustrator, then I used Sketch to design and mock-up a landing page, and I used Sublime Text to code the landing page.
The Prototype
The idea was to apply the technique of rapid prototyping and then user testing to come up with your product idea. So many people just imported photos of their sketches into the Marvel app to create their prototypes. I took it a step further and created cleaner-looking screens in Illustrator. I realize later that was a mistake because the prototype looks a little too polished for something that is supposed to be just a quick sketch idea. Here’s a video walkthrough of the prototype. Or you can view the prototype I did using Marvel on your phone.
The Work
Project Kickoff
I started the project by interviewing 3 classmates on the topic of fashion. I decided to narrow my focus on shopping for clothes. I really had no idea what my app was going to be, and that was a good thing. It forced me to come up with the app idea by thinking through the responses I got in the user interviews (which was the point of the whole exercise). The one thing all 3 guys agreed on is that while online shopping is convenient, returns are annoying. That’s what gave me the idea for an app to make returning items easier.
Amazon Prime is a very popular service for buying just about anything and having it delivered to you. I decided to make my app specifically for making Amazon returns easy. So anyone using the app for the first time can simply log in with their Amazon credentials, and then select the item they are returning from their purchase history.
Sketching
I started sketching the content for each screen. I also worked on a user flow (this is a later version of the user flow). In my initial version of the prototype, I didn’t have a confirmation screen. But after testing it out on people I quickly realized that I needed one.
Part 2: The Landing Page
Later we were tasked with designing a landing page to market our app. We were to first design the mock-up in Sketch; then we were to code our page. The design part of the landing page project was familiar to me, but the coding part of the project was tricky, especially since we only had a day of coding instruction. We had done online tutorials on our own in preparation for this project. I managed to “kludge” my way through it.
I designed a logo for the app, and created higher fidelity mock-ups of a couple of the app screens to use in the layout. And I used the actual Amazon brand colors from their brand guidelines.
