How Kobe helps me design

The UI Challenge

I do not endorse Nike, Kobe, or any affiliates. His shoes are decent, and that is all I will say about the topic.

Kobe Bryant. I’m not his biggest fan, but the guy is INSANE. Like so insane that he once practiced for 7 hours, 7 hours before his actual practice with the rest of the team. Aside from being a 5 time-NBA champion, MVP, Finals MVP, Scoring Leader, and (arguably) the most clutch player, Kobe is the living, breathing version of the phrase: Practice Makes Perfect.

So, what in the world does a living NBA legend have to do with my ambition to be an awesome product designer?

Practice.

Practice makes perfect. An if you don’t practice, then don’t expect results. I experience the consequences of not practicing everytime I design after not touching Sketch for a couple of days. It feels like re-learning a foreign language that I once used to speak (like Urdu, which I now mix up with Spanish).

Today, I stumbled upon Daily UI, an awesome site that emails you design challenges everyday for 100 days. Dope, right? Its basically Phil Jackson reminding a young, reckless Kobe to practice.

So I dived into it. First Challenge: A sign up page.

Easy money. These days designing a sign up page is like Kobe having a wide-open lane: he can’t miss. Or can he?

Since the Daily UI’s sign up page (and logo) was pretty disappointing for a service that challenges other designers, I decided to re-design its sign up page: mobile style.

I started with some basic sketches:

I went with the third one, seeing as the logo shouldn’t take away from the main purpose of the screen, which is to sign up. It would suck to lose a user just because they became to distracted from the logo, leading them out of the website or application. Keep is simple, and readable top to bottom.

Logo to some sort of value proposition or slogan to signing up.

Now for some logo-mania:

After reading Chen Ye’s story of using a visual approach with science, I wanted to use some sort of Chemistry symbol or equipment as a creative way of showing the countdown from 100 days to go to 0 days left (because I’m currently taking Chemistry and real world applications ftw), but they all felt out of place, difficult to design, and all too attention-seeking.

Instead of focusing on the countdown, I decided to focus on the keyword of the service: Daily.

Back to the sketch book:

A calendar, which is the only tool that we can use to see into the future. In this case, the future looks like a lot of design fun.

I thank god for Sketch’s grid feature, because without it, this logo would look as bad as the grid I sketched.

Here’s the final product, along with a mockup:

What’s really interesting is that the grid looks like a variation of the periodic table, but much simpler to memorize in my opinion. Wonder if Kobe ever took Chemistry…

Let me know what you think!

Follow my daily UI progress on Behance and Medium