Day 11-20

Daily UI Challenge: Day 11-20


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 11: Success/Error Message


Design justification

Day 11 involved designing a success and error message. This was a very interesting challenge as there are little details that play a big part in this experience.

  • I used solid colours, red and green to bring familiarity to the design. This way the user will understand right away that they have either succeeded or failed.
  • The copy has to be clear and straightforward. I noticed some other designers used casual tones and messaging but I thought that could confuse someone. I kept the messaging simple and clear on purpose.
  • These messages appear during a sensitive stage in the user experience and I incorporated some playful imagery, in the form of the monsters, to make it more enjoyable.

Day 12: E-commerce 

Design justification

Day 12 was an interesting challenge, as I had to design the page with a sprained finger (from Jiu Jitsu). This meant I could only use my right hand which made things different. As for the design, I created a standard product details page for my favourite shoe:the Adidas Boost

  • Used a standard E-commerce template to create a details page for an e-commerce shop
  • Focus on important elements: images, product title, color and price
  • A clear Buy Now CTA

Day 13: Direct Message

Design justification

I really enjoyed Day 13 which was to design a messaging app. I love the app Intercom and got my inspiration from them. Some key points:

  • The app takes up a lot of real estate which makes it rather comfortable and allows for the conversation to be prominent when necessary.
  • Human profile pics add a sense of realism to the conversation
  • Close button makes it easy to exit and close the window to get back to the site

Day 14: Timer

Design justification

Day 14 called for designing a timer. I thought this would be a good opportunity to try my hand at an Apple Watch canvas.

  • A small canvas size means you have to be really deliberate in the design
  • Large and easily accessible buttons
  • Simple interface with few distractions

Day 15: On/Off

Design justification

I really liked this challenge as these buttons can be super confusing in my opinion. In the above you'll see a version I found on the web, where it's quite difficult to tell whether the button is on or off. To resolve that I implemented the following:

  • The ON state is much more active than the off state, and the color green provides the contrast to the grey to indicate that it's ON
  • In this case I didn't include text inside the button but that is also an option, so the user knows when the state is active or not.

Day 16: Pop-up

Design justification

I got some design inspiration recently from a great article on UI that helped with today's challenge. With pop-ups there's a lot of emphasis on the offer and messaging, so my marketing background really helped.

  • Add some personality by including 'Yo Sneakerhead' to get the user's attention and allow them to enjoy the pop-up.
  • At the same time, have a clear close button that give's them the option to close the pop-up right away; in case they are annoyed by it.
  • From the article mentioned above, I started this design in grayscale first, focusing on placement, alignment and spacing. Then I added color. That was a new process that made a huge difference for me.

Day 17: Email Receipt

Design justification

Whoah this challenge was super fun! I keep getting inspiration from an article that Erik Kennedy wrote that has been helping me with my designs. In this case I really leveraged his principles:

  • Started with a greyscale design and focused on layout and text
  • Added color (red) once the layout was done to add dimension. Even the grey is saturated with red.
  • From a marketing/messaging perspective, the emails receipts are important, especially after placing an order. You have to include assurances like: delivery date, order#, shipping address, and a pricing summary.

Day 18: Analytics

Design justification

Day 18 called for an analytics page. My marketing background helped with this screen as I'm familiar with Google Analytics.

  • The star of the show is the graph element which communicates the metrics clearly
  • Navigational elements are clear and presented on the left side-bar
  • The calendar drop-down makes very easy date selection

Day 19: Leaderboard

Design justification

Day 19 was fun since I got to design something around my fantasy league and team. Naturally this design has my team in first place:)

  • I used a grey palette with saturated blue to tone down the entire look
  • I used alternate row colours so that it made it easy to read the standings
  • Used strategic font weights and sizing to call out certain metrics

Day 20: Location Tracker

Design justification

Day 20 was a location tracker. This is always an important screen and should allow for zooming in and out easily.

  • The pin has to be prominent and easy to identify
  • Search bar has to be easy to use with plenty of space for text input
  • I used a hamburger menu for more map options