Day 41-50

Daily UI Challenge: Day 41-50

 

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 41: Workout

 
 

Design justification

Day 41 called for a workout interface. I used a Fitbit design as inspiration and incorporated a few points:

  • As in my previous designs I used a grid and layout to ensure that all elements are aligned and conform to the grid. This makes the design consistent and balanced.
  • For a workout interface, the key workout metrics must be prominent. At first glance the user will have a good summary of all of his metrics and know where he stands right away.
  • I used a nice icon set to associate the metrics with easy to grasp icons.
 

Day 42: Task List

Design Justification

Day 42 asked for a task list or to do list. I enjoyed this challenge as these types of apps are some of my favourite. Asana does a great job with their app as they keep things simple and clean:

  • This view shows Incomplete tasks with an easily accessible drop down that allows the user to toggle between incomplete and complete, etc.
  • I used a row format for mobile that allows the user to click on each row and quite easily access the task.
  • The design is broken into easily recognizable sections and at the top the user can add a task at all times.
  • I used a faded look for any tasks recently completed
  • Overall I found this challenge incorporating simplicity, and easy access to an intuitive list
 

Day 43: Food

Design Justification

Day 43 was up my alley as my recent portfolio project was a food app. I leveraged some of its design and made some tweaks.

  • One of my favourite food apps, Ritual, inspired my concept as I kept the menu clean and simple. The most important elements on a menu are the dish titles and the price, so I made these stand out.
  • I placed less emphasis on the dish descriptions but they are easily legible if the user wants more information.
  • This menu style is easily collapsable and because it's text based the user can view menu items very quickly. The information is organized well.
  • Finally, I made some initial tweaks to the grid and layout from some recent lessons I learned and everything is lining up much more nicely.

 

Day 44: Favourites

DUI_044_favourites_color.png

Design Justification

Day 44 is a favourites design. I really liked how the Ritual app allows you to select favourite restaurants so I did something very similar.

  • The favourite button (heart icon) when activated must be distinct from the off state. I did this with a nice color contrast so when you select a favourite you are certain of your selection.
  • The favourite button is easily toggled on and off. The app should provide instant feedback so that the user knows that they have added a restaurant as a favourite. 
  • Ritual uses an additional micro interaction that demonstrates the favourite is selected. I would do something similar in the next iteration.
  • The rest of the design follows the similar lessons I've learned in using a grid, layout, grey tones and color.
 

Day 45: Info Card

Design Justification

Day 45 said 'info card'. I didn't quite understand what an info card was so I thought about an example that does a good job of displaying information. It made me think of my childhood and how I would spend hours looking at baseball cards and devouring the stats. 

  • One of the biggest challenges was to incorporate a player's statistics on a small card. At a minimum I used a 12pt font so when the card is printed it is legible. Spacing and alignment are important to keep the rows and columns clear.
  • A trick I learned by looking at an old baseball card, is adding some color columns in the background of the stats. This breaks the sections up and categorizes the data nicely.
  • I used some retro colours to give it a baseball card look and feel. And a condensed font for the player name.
 

Day 46: Invoice

Design Justification

Day 46 was an invoice. I got a haircut from a place called Throne in Toronto and they sent me over a receipt that caught my eye. It was nicely designed and had the right information presented.

  • The key bits of an invoice that a user will look for are invoice#, the amount, and the due date. So I placed these in strategic positions and called them out, especially the amount.
  • I included a large pay now button that lets the user settle the invoice easily. In a receipt version, the button doesn't have to exist.
  • There are some subtle design elements that I included that add some depth to the overall feel including a ridge pattern at the top and in the footer, some subtle dashed lines-that break up content- and some social icons.
 

Day 47: Activity Feed

Design Justification

Day 47 was an activity feed. This was a monumental design for me since when I started my training course at Bitmaker labs I completed a very similar assignment. Only then, I remember the challenge taking almost an entire afternoon. Whereas after countless hours of design, I was able to complete this one in about an hour.

  • This design was straightforward with the pertinent information presented in rows.
  • The challenging component was ensuring the text wrapped properly and contained enough space. If the feed item was particularly long then the row height would have to expand.
  • I used a convenient tool called Craft that auto populated the images from a site called Unsplash.
 

Day 48: Coming Soon!

Design Justification

Day 48 asked to design a 'coming soon' page. I think there are a few sites that design these pages well. I prefer the ones with a timer so that I know specifically when something is available.

  • I put a countdown timer and emphasized it with color and contrast so the user knows when to expect the program to begin. Ideally this would be animated and countdown in realtime.
  • Another feature is to include notifications via email, so the email form serves two functions: it provides the user with an update a few days before launch and it allows the site owner to capture user information - a win-win.
 

Day 49: Notifications

Design Justification

Day 49 asked for a notification design. I thought Facebook is probably the king of notifications and so I designed modelling them:

  • Each notification takes up a row and must be easily distinguishable. One way to do this is to use different row background colours.
  • Each notification is time stamped so the user has a sense of timing and how fresh the notification is. This is critical in our always on social media environment.
  • Icons are used to give a sense of the type of notification. For example you can easily tell which one is a video in the case the user is in the mood to watch something on their phone.
 

Day 50: Job Description

Design Justification

Day 50 asked to design a job description. This design was straight forward with an emphasis on a few points:

  • LinkedIn does a good job of applying to a position by providing a one button application process. Indeed does something similar so having this option is important for the user.
  • Knowing who the hiring person is and providing a way to contact them is also a good opportunity for the user to stand out.
  • The job description text is expandable in this case the job searcher wants to read the description in its entirety. Otherwise there's room for other design elements.