I was asked to create a conceptual prototype of an iPhone app at the request of a prospective employer, that I repurposed to use as a portfolio example, since I have some mobile experience, but not as much with native apps as I would like. Fresh ID has mostly focused on responsive versions of sites and apps we have done, so this was a good exercise and I learned a lot.

The app’s original purpose was customizing an item of clothing for new employees, so lots of artwork choices would be available, and I had only 4 days to design it and set up the prototype at inVision, my favorite platform for simulated prototyping. In my head at that time, I could not figure out how to make it all interactive and instead did more of a “walkthrough”, linking only what was meaningful to guide them through the product in a deliberate way but I don’t think they understood the choice to not have everything linked, so I corrected that in this adjusted prototype.

If you want to see Shirtee now, check it out at inVision.

My Design Process

The first thing I did when told about the app was rough sketches, but I felt I was missing information I needed. So I went on a secret Field Recon at one of their stores 45 miles away, to check out the employee situation and answer some questions I had.

Following my field trip, these are the steps I took to design this mobile app. I decided on the purpose of customizing t-shirts with no minimum order, and sending them to be printed on demand and then shipped with 3 couple of delivery options.

meet-shirtee1 | I randomly asked my friends on Facebook for app names, in the height of laziness. This was a brilliant idea, as they came up with some amazing names. I was a bit surprised at how creative and on target some of them were, and I googled as they came up with them to see what was already in use or not. I combined two of the names to come up with “Shirtee” and whipped out a brand in 5 minutes, so please don’t judge the branding too harshly.

2 | I sketched a bunch of new screens to figure out what I needed to change and add. This is an example from those papers. I cannot draw by hand, the bane of my existence, so my sketches are rough but they’ve always gotten the job done. You may notice the words “Speed, Simplicity, Creativity”. These are the key goals of my app, and the tenets I wanted to keep in mind. Everything has to come back to some purpose that you pre-determine, and this is one way I keep my work and a team’s work on-task.

shirtee-app-sketches

2 | I gave the brand in question a workflow document that I can’t show here, of the finished screens, placeholders for what was missing and how they all connect to each other with dev notes, which is something I would likely do in a real scenario.

Since I had not done a wireframe for them, and to help me think about all the screens I needed to do to change the purpose, I created a wireframe which you can see and/or download here instead of that document that is high level. It did help me re-think the app in the context of customizing and ordering a few types of shirts.

3 | I had downloaded a template from Envato to use for speed, but in reality only wound up using the header as everything else I designed myself. Oh well. It did help me think things through though, when I was under the gun the first time, and is a clean style I thought would be appealing to an enterprise-related crowd so I’m sure it will come in handy for ideas.

4 | I downloaded a few t-shirt apps and played with them. I did not like much of what I experienced. An additional goal became to make this app better, if possible… slicker to use, more appealing to look at, in general just a little easier to use. The three I tried out are Yoshirt, Ingubo and Levatee. The only thing I really liked was the way Yoshirt let you move text and images around very simply, so I, ahem, borrowed this idea for my concept.

5 | I downloaded a million icons from flaticon.com and painstakingly hacked them together and recolored them for this project. I wasn’t going to do it that way – I could have just used the simple shapes and perhaps should have. But I’m an icon girl – in a dry, enterprise-related piece of software icons are often the only little bit of delight in a given area, in addition to being directive/informative. I kept the color scheme from the other work I had done so I only had to do some more new icons, not replace everything I had done. These are some screenshots of my Illustrator files, so you can see how I work along the way to create a product brand utilizing colors and icons in a consistent style.

APP-icons_ai___33_33___CMYK_Preview_

6 | I needed artwork for the t-shirts in Shirtee, so grabbed some creative vector files from Envato to work with and recolored them to use in the image gallery screens and on the t-shirts.

type-quotes_ai____25___RGB_Preview_

7 | Since one of the complaints was that everything in my prototype was not a working link, you know I had to solve that problem. But I was still facing an issue of HOW. I noodled on this a full day, and even dreamed I was sketching stuff on my bathroom wall as if were a whiteboard. It was in pencil at least! When I woke up, the bathroom walls were thankfully unharmed and I dumped tons of screens out of inVision and re-organized screens into sections so I could better get a handle on how to fix this problem AND see what else I needed to design. This image shows you a couple of sections on the platform.

I decided to link everything, but it is not always the shirt design that the user had been viewing. This allowed me to show text color edits and font choices without it being “real” on that shirt that they had just seen perhaps. I mean, it is a prototype, not a dynamically-driven app from a database.

Shirtee_Screens_-_InVision

send-to-print8 | I realized my initial “Send to Printer” and ordering process had to be scrapped and redesigned. The reality is, I don’t have time right now to do that. I have one active client at the moment and they are ready for some more work on their project, so I will come back and design those screens later. That is why you see a giant pink X on the wireframe.

In the original prototype, the item was one single piece of clothing in one color, to be printed in-house within an hour, with no cost to employee for the first two. Multiple shirt options in a real ecommerce situation means I need a shopping cart and different way of approaching ordering entirely. In the prototype, so I could link to this section, I made a creative fail screen for now that will send them back to the screen they clicked on. Later when I get these screens done that first screen will already be linked everywhere.

tshirt-mockup-street-edition9 | I used various t-shirt mockups for the walkthroughs that I bought from Envato or found free online, to get some real people and shirts in the app. My idea is that at the end, to “Send to Printer” the user will preview their chosen design on a real t-shirt mockup rather than as a vector graphic piece of art.

10 | I had to make the decision to stop and show this, rather than getting this app perfect with every screen finished. I have done another interview and want that company to see this. So the Help Center screens are not done yet either, but would be a very important aspect of a real app and I have those screens in the wireframe.

Here is the link again to the prototype so you can experience it yourself. https://invis.io/WQ8ADXM2A

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *