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
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
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
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
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
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
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 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
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 first and focused on design with no color and a focus 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
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 and has communicate 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
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
Day 20 was a location tracker. This is always an important screen and should allow for zooming in and out easy.
- The pin has to be prominent and easy to identify
- Search bar as to be easy to use with plenty of space for text input
- I used a hamburger menu for more map options