Day 1-10

Daily UI Challenge: Day 1-10


The Daily UI challenge is a 100 day project in which I work on improving my design skills. You can follow along by viewing my design progression below.


Day 1: Sign Up


Design justification

The first Daily UI challenge was creating a sign up form. This wasn't too difficult as my course at Bitmaker had several apps that involved a sign up page. My philosophy around sign ups:

  • Use social logins to allow for one button sign up
  • Keep the fields minimal and straightforward
  • Dynamic password validation

Day 2: Credit Card Form

Design justification

The second day of the challenge asked to create a credit card form. I wanted to create something very simple. This is a step in the checkout phase that is very critical and so I wanted to eliminate distractions.

  • Credit card type (Visa/Mastercard) is auto-detected upon number input
  • Security message at the top of the page provides a sense of security
  • Button includes final purchase cost, providing the user further assurance

Day 3: Landing Page

Design justification

Day three asked to create a landing page and to pay attention to key elements. Some ideas I implemented:

  • Clear call to action to download app in the header
  • 8px grid for consistent spacing and layout
  • Clarity with a prominent CTA button

Day 4: Calculator

Design justification

The challenge today said 'Calculator'. So I went to the source and designed after Apple's built-in calculator which uses a flat design. I had a lot of fun with this exercise, especially with spacing.

  • Used rulers strategically to create even layout
  • Used Apple's San Francisco font to replicate the look
  • A flat design eliminates unnecessary details

Day 5: App Icon

Design justification

On Day 5 I was asked to create an app icon. I decided to design an icon for my Hangry case study. I incorporated my Hangry mascot into the icon for easy identification.

  • Bright gradient that makes the app easy to identify
  • Monster icon also makes the app icon easy to remember
  • Fun and colourful, creating a positive mood when using the app

Day 6: User Profile

Design justification

Day 6 was a fun day! I was asked to create a user profile. I decided to take a page out of the Bitmaker book and mimic my student profile

  • Replicated a best in class design to learn for myself
  • Multiple layers in the header with a blur effect
  • Incorporate a variety of icons to tie in the design

Day 7: Settings

Design justification

I had to do Day 7 rather quickly as my schedule was full. I decided to do a settings page for an iPhone app. I timed myself for this design and it took about an hour.

  • Used repeated elements for efficiency.
  • Used Sketch's Mirror functionality to ensure spacing was right on an actual device.
  • Sped up the design process to fit a hyper tight deadline.

Day 8: 404

Design justification

The 404 page is always a fun page to design. Yet at the same time, it's a page that many companies neglect. Here are some pointers:

  • I used a fun monster, that matches the site branding, and gives a sense of calm or lightheartedness.
  • Injected some humour so the user finds value from the page in the hopes of reducing frustration.
  • Indicates it's a 404 error to provide some familiarity and so users understand what is happening based on conventions.
  • Provide next steps and links for further navigation so they can get back to what they were doing.

Day 9: Music Player

Design justification

The challenges continue to be fun and insightful. For the music player I really had to pay attention to usability.

  • Are the buttons (play button, volume control, forward and backward) easy to control. That is on a real device can someone press them easily.
  • Initially the controls I designed were too small. I realized I had to make the fonts and buttons much larger so people can use them

Day 10: Share Button

Design justification

Today's challenge was a bit ambiguous as they asked to create a share button. There are many ways to go about this and I decided on creating a simple mobile drop down.

  • Include a straight-forward drop down and overlay
  • Allow to instantly share the article to the main social hubs
  • Easy scalable downwards to add more social sites
  • Good spacing for touch devices