Wireframe: A visual guide that represents the layout, interface, and content flow
Wireframing is my favorite part of any design project since it allows me to flex my creative muscles. For this stage, I usually take out pen and paper, and sketch out ideas. Sometimes, I use a drawing tablet in Photoshop. Once I have something I’m satisfied with, I go on to a digital wireframing tool. For a simple wireframe, I will be using Balsamiq. Balsamiq sticks with a lo-fi sketch style to keep things casual. This allows us to prioritize the general feel and layout of the interface, instead of stressing over specific design decisions and elements. Later on, I might use a robust wireframing/prototyping suite such as Figma or Adobe XD to polish the UI after creating graphic assets. Moqups is also a good free alternative to Balsamiq.
Home
I start with the home page, the first page a user sees when they open the app (we’ll think about login later). I aim to keep the home page as minimalist as possible, opting for text titles. Tapping on each article of clothing takes you to your closet where you can search and add it to the outfit. Once the items have been added, you get an overview of the outfit on the right.
The menu bar at the bottom takes you to Home, Search, New Item, Favorites (or Wishlist, I haven’t decided yet), Settings.
Item
We bring up this screen whenever we deal with items. This might be when selecting an item for an outfit, adding a new item, or managing items in the closet.
We need a photo of the item. If no photo is provided, it should be just a square with its color. You can enter a short 1-2 sentence description such as where you bought it from or it it was a gift. It could also be a specific collection/season from a brand. Think of it as a caption to the photo.
The rest are forms common to all items. You could leave these forms blank but it would make everything harder to search. Every item should be associated with a brand, or no brand (can’t use Unbranded because that’s a jeans brand). Some people might not want to add a photo for each item, so instead they can use the color or a link to an image. This would save up a lot of space since no photos are stored locally or on GDrive.
Every time you add this item to an outfit, it increases the Times Worn count, as well as updating the Last Worn date.
I like keeping track of the cost per wear of item since it helps me make a decision whether to sell or replace an item. For example, a very expensive item that has only been used a few times is a good candidate for selling. The lower it is the more use you get out of it, which implies more value to you. Perhaps when it gets down to $0.01, I can replace this with Sparks Joy.
We can view, add, and delete tags by hitting the Tags button. Photo allows you to take a photo using the camera, upload one from the file system, or fetch one from a url. I’m not sure yet if Edit should unlock all fields, or if clicking on the field will allow you to edit it. I would prefer an Edit mode since it prevents the user from making unwanted edits while scrolling.
Search
We can use this Search page for both items and outfits. Maybe somewhere at the top we can select Item or Outfit, or it can be a Filter option. Filter should let us filter things by the preset data fields or user-created tags. For example, there should be a menu inside Filter that allows us to select colors, or a list of brands. A good idea is to research how online shopping implement their filters. Some of the ones I’ve enjoyed using are East Dane, and END Clothing. Both allows you to check the tags you want, but only END displays the currently selected tags. This is a great option instead of having to scroll through the entire list, same with Clear all.
Sort should sort by name, price, recently worn, recently purchased, cost per wear (only for items, not outfit). I should look at how other apps do this, but also how Music Library programs handle their sorting. Just like Music apps (such as PowerAmp), we should be able to choose the display style as grid, text list, or big list with icons.
Outfit
This is a pretty dense page. If no photo was selected, it’ll be an outfit grid on the right. Pressing the plus button allows you to add items to this outfit, and the bottom fields are automatically updated. We should support multiple items for every catagery: Top, Bottom, Jacket (two jackets sounds ridiculous but sometimes it’s really cold), Accessories. Multiple Shoes make no sense at all. Bags, hat, socks should go under accessories.
A cool feature inspired by Instagram tags allows us to pin the item title directly onto the photo. The app Identify is practically built entirely around this feature, as well as providing a social network. I find this tooltip element to be highly intuitive. Tapping on the photo should bring this up, or maybe there should be a little tag icon in the bottom left of the photo to display tags. Holding on the photo will pin an item already in the outfit pane, or if it wasn’t found, it’ll add a new item to the outfit. You’d have to go to the search menu to add an item not in the outfit already. We shouldn’t allow the user to add a new item to the closet directly from the Outfit page. Altogether, the tag pinning keeps the functionality the same for when there is and isn’t an outfit picture. Sometimes an outfit grid is pretty nice too.
Want To Buy List
I’ve been throwing everything I want to buy onto a Wunderlist shopping list. This is terrible for several reasons I won’t get into. One thing that is nice though is that I can put date reminders for preorders or sale dates. It would be a good idea to have something like this with Push notifications. For the most part, everything in this list should be similar to when browsing Items.
This concludes most of the necessary pages enough for a prototype. I will continue to add certain pages as I see fit.
The next post will cover setting up the Android Development Environment.
Resources
UI/UX Design and Wireframing