Daily UI Challenge: Day 11-20

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