30 Minutes to HIFI, Day 4

Overview:

Some people are really good at UX. Some people are really good at UI. I however, am good at working really really really fast (3 reallys). In these challenges, I give myself 30 minutes to come up with a user persona, complete ideation, and create a low and High-Fidelity prototype. Most of the time, the result is pretty ugly; but sometimes I get lucky.

The Rules:

• I use designercize.com to come up with a challenge prompt.
• Once the clock starts, I have thirty minutes to ideate, create a persona, attempt UX, and come up with the HIFI prototype for an application.

The Challenge:

Create a networking app for foodies.

UX:

If I’ve learned one thing from doing this every day, it’s that creating a user persona is the most important part of lean UX. I could be wrong (I often am) but that’s been my experience so far. Naturally, I started off by creating a user persona.

Meet Jamie the Fabulous Foodie:

Why is her nose a triangle? And why are her eyes closed? Also, what’s she wearing? I don’t know.

Because I’m short on time, my personas only have three things:

• A beautiful picture
• A cliche name with an attached alliteration (heh) explaining what they do
• The persona’s core wants which I’m usually totally guessing on because who has time for research?

After creating my persona, I came up with a few aspects of the app I think Jamie would want:

• I think Jamie would rather be able to follow foodies that she likes and make recommendations than try to gain as many friends as possible. #Quality over quantity.
• Jamie would probably use this app to decide where to eat and leave reviews. Think of a snobby Yelp.
• Jamie doesn’t want reviews from peasants that can’t tell a grilled cheese from a melt. There needs to be a higher threshold for reviews.
• Finally, I bet Jamie would love to find food critics she trusts and follow them, twitter-style.

With that being said, I moved onto UI.

UI:

Because my last projects were ugly AF, I did research on typography and UI in general. Here’s what I learned:

• Gotham is a beautiful font. I kind of think that it’s cheating to use in your designs, but like coach always said, “If you’re not cheating, you’re not trying.”
• Monochromatic color palettes are always in fashion, but mostly right now.
• Kerning. Omg.

I started with a few wireframes. Explaining it is boring, and you’re probably skimming the article anyways, so I’m gonna let you kinda look at it and try to figure out what does what. The only thing I’m gonna say is that red is an appetizing color, so I chose red as the primary color; as should every other food application.

Here’s a timelapse because they’re fun to watch:

Lookout world. Here I come!

Final Product:

This is the home page

Can you spell 508.a compliant?

You might notice the top pick and the review are the same

I don’t know how to make the ‘ above the e’s

“Hey Ben, how did you…”:

Make the images monochromatic?

To get a monochromatic look on the images, I would create add two flat layers to a design. I would add a white layer and set the blending to ‘color’ and then I would add a red layer and set the blending to ‘multiply.’ Multiply replaces all of the dark parts of an image with whatever color you choose.

Make the words look so good?

Three words: Kerning, Caps, and Gotham. It’s like the dark triad of design. It’s beautiful, bold, and super duper easy to do.

Work so fast?

Custom shortcuts yo. They really do make the work way faster. I use ⌘+SHIFT+E to horizontally align items, ⌘+SHIFT+F to vertically align items, and ⌘+4 to bring up FontAwesome. It’s super-duper-helpful.

Know that typing in that specific hexcode would give you red?

If you watch the video, you’ll see I initially didn’t use the color picker to get the shade of red I used.This one will take a little bit to explain, but it’s pretty simple once you understand it:

Hex codes use a hexadecimal number system for the values of R,G,&B, which means that instead of base 10, it uses base 16, but instead of using made up numbers to represent the ’10–16’, it uses the letters A-F. Imagine it like this:

1 2 3 4 5 6 7 8 9 a b c d e f 10

Yup.

If you keep this in mind, you can ballpark a hexcode based on the amount of red, green, and blue a color has. After a while of picking numbers this way, you get pretty good at knowing what hex code will give you what color.

Takeaways:

Gotham is amazing. Kerning is amazing. Monochromatic color schemes are amazing. I need to learn how to put the dashes and squiggles above letters. Sketch is super buggy sometimes. Typography will make or break an app.