Daily UI Challenge: Day 21-30
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 21: Home Monitor
Day 21 was a fun challenge. It involved designing a screen for a home monitoring app. I decided to use an iPad landscape art-board as I can see an iPad being an excellent display for this type of interface.
- I started out with the layout first and made sure that the right emphasis was placed on the correct metrics (temp, water and electricity)
- The next section provides controls for the different inputs in a house, like locking a door or adjusting lights. I provided a simple on/off switch that I designed prior
- I also included text labels for the switches to really ensure that the state is clear. In these situations (like locking a door), the user needs comfort in knowing they have selected the right setting. So there is little room for ambiguity.
Day 22: Search
Day 22 was search. I wanted to create a simple search home page.
- Prominent search bar with easy to use search bar and button
- Stunning photography as the main background image to generate interest and appeal
- I used an overlay on the image to ensure the text is legible
Day 23: Onboarding
On day 23 I was tasked to create some on-boarding screens. I created a motorcycle community with an intro carousel to entice users to sing up.
- Stunning photography to make the community look relevant and interesting to CBR owners.
- Fun verbiage to relate to the community, speak in their words
- Easy sign-up process using social login to get users started quickly
Day 24: Boarding Pass
Day 24 was more straight forward than I thought. It was an exercise in mostly text layout and ensuring the proper information is presented and accessible.
- Emphasis was placed on the gate so the passenger knows where to arrive
- The destination and arrival is also clear and I've included the terminal #s of the airport so the passenger knows the correct terminal
- Finally, I simplified the boarding pass time by including only the boarding time, so that the passenger will not miss the flight. The boarding time is the minimum time required and so I saved space on the overall design.
Day 25: TV App
Day 25 was a TV app. This is a project I was looking forward to as I had a good idea for a TV app prior to starting. A lot of designers participating in the challenge decided to design the interface for the actual TV screen (Netflix style) but I went a different route and created an app remote with mirroring functionality.
- With my design, the user can toggle between preview mode and live mode (button), meaning that you can get a sense of a trailer or an episode on your phone while the main episode plays on the live screen
- In live mode, everything is mirrored, so what you see on the iPhone screen is what is happening on the main display. This allows for hyper control of the progress bar and the play/pause buttons
- The feed scrolls up and down for a wide selection of episodes
- Swiping the feed back, would bring you to a higher level menu, perhaps by categories, or even a search bar
- I used Sketch Mirror to ensure the layout and buttons are well designed for the user and everything fits on the screen
Day 26: Subscribe
The designs are getting faster as I'm able to put together basic components quickly and more efficiently than when I started almost a month ago. The grey first principle that I've mentioned earlier is really helping my designs because I find it's powerful adding color towards the end of the process, while only using a single color or palette.
- For a subscription box, the marketing messaging is really important. In fact it's probably the content that matters more than the design. Does the user actually want to subscribe to the content? Does it provide enough value?
- I used a catchy title for the newsletter and a good call to action (learn how to make $1000 per month).
- The subscribe button is large and legible. I used green as it's a good color for conversions and relates to the money theme well. Orange is another button color that is good for conversions.
Day 27: Dropdown
Day 27 was a simple dropdown menu. I didn't find this too challenging and the design was quite straightforward. Some points:
- A nice large, round and soft font (Poppins) that makes the search text legible and easy to read/use.
- The drop-down includes an auto suggest menu that provides suggestions based on the most popular items sold (e-commerce site).
Day 28: Contact Us
Who doesn't love a good contact us form?? I wanted to design a user friendly contact us 'experience' instead of a generic form. After all, most contact us forms feel like your inquiry is being submitted into a deep void.
- By breaking the form into steps, I've made it feel inclusive and something that communicates a response.
- Form only needs minimal information to reduce friction and increase completion rate.
- Providing a time frame provides the user some assurance and ables the user to provide some prioritization
- I leverage text to form a hierarchy so the user knows where to input information. I made the buttons large and bright to guide them through the process easily.
Day 29: Map
When I saw that my challenge today was a map, I didn't want to repeat another street map from a previous challenge (the Pin). So instead I changed things up and created an internal grocery store map to help someone find an item easily and quickly.
- I used font-weight to put the right emphasis on the aisle number, which at a glance you need to know right away
- The map provides walking directions with directions on the map and listed below in the map details.
- Tells you exactly where the item is. The search bar is at the bottom and can be easily accessed so as you're shopping you can search for items continuously. My idea would have the map scale and orient itself based on GPS as you walk through the store.
Day 30: Pricing
Day 30 asked for a pricing page. My marketing background helped with this challenge as I've designed pricing pages for start-ups in the past.
- With any pricing page, it's best to state the obvious and make the prices clear and prominent.
- I included a 'most popular option' to let the user know which package most customers select.
- The learn more button will provide more details about each package.