Tackling the Daily UI Challenge
My Approach and Process
This past week I started the Daily UI challenge, and it was a challenge indeed. I’m the type of person who likes to take time to think things through and can easily jump down a rabbit hole. This week’s exercises were a great way to exercise flexibility and practice prioritizing what to design. In addition to learning how to scope down and not overthink things, I also wanted to practice interaction design by considering and showing how the product works. If you’re a planner type of person like me, I hope this article can inspire your own way of approaching these exercises.
Daily UI 001 — Design a Signup Screen
The first day was rough — I was having trouble just jumping in and design something. The wheels were turning on Monday, but I didn’t start designing on Tuesday. To get the ideas flowing I started mind-mapping ideas of what type of product to design a signup screen for then created some messy sketches to get an overall understanding of the layout.
What came out of it was a Password Vault. For the signup screen, instead of having a password to get to your passwords, I thought of a password vault app where you can sign up through your thumbprint ID and confirm your account via your phone number.
Daily UI 002 — Design a Credit Card Checkout
For this challenge, I was very much inspired by the credit card payment flows that I saw on Dribbble. Unfortunately, I wasn’t able to make it unique or different from what I saw. This was very much a prototyping exercise, learning to have each screen automatically advances when each was field filled. The only difference was that for the cardholder name field, the users need to lock what they entered by pressing the “return”. In hindsight, it would have been better to use the keypad with the “go” key.
Daily UI 003 — Design a Landing Page
I immediately knew what I wanted to do. I’ve always wanted to try a parallax interaction and the images of lantern festivals. This time I jumped Adobe XD to following along with a tutorial that showed how to create a parallax effect using the program. I also loved that you can record a video of the prototype directly in XD — a game-changer. It made easy to capture my interactions and convert them into GIFs for Dribbble.
Daily UI 004 — Design a Calculator
For this challenge, this idea came to me quickly. I was inspired by my frustration of having to take recipes that were meant to serve families and parties and recalculate the ingredient portions to serve one or two people. I hate to waste food and wasn’t into having leftovers especially if the recipe doesn’t turn out well. Hence the Recipe Calculator!
I did quick sketches of the UI and then sketched a really messy flow. Ideated some color scheme by jotting down some competitors that came to my mind. I jumped into Adobe XD again because of its prototype recorder. It made it super easy to capture and create a deliverable to publish.
Daily UI 005 — Design an App Icon
The challenge day was simple and straight forward and was able to design it right after completing the Daily UII 004 challenge. I decided to do the app icon for the Password vault app. I simplified the style of the logo because the shadows got lost when it was small. However, I left a little 3D dimension look to the middle nob to give it some depth.
At the end of this week, I got to learn a new tool, practice some rapid prototyping, and exercise my visual thinking skills. I still have a lot of room to improve my ability to think and design quickly. To help manage and optimize my time better, here are some lessons learned for the next time I take on this challenge:
- Use UI Kits. Can’t stress that enough. I had the iOS kit, but it didn’t have all the components I wanted to have the flexibility to be creative. Next time, I’ll save a few different UI Kits for both web and mobile and have them on hand. That way I won’t waste time creating new components and more time thinking about layout and how the user interacts with the design.
- Use free icon and image resources. Since I wanted to focus on practice my UI and interaction design skills. I took advantage of free resources like Noun Project and Google Images to source the graphics I needed. (Be sure to credit the source!)
- If you’re stuck take a break away from your laptop. The first day I had major designers block. I took a step away from my laptop, washed some dishes, did some cleaning, and I found my brain churning and mulling over some ideas. By the time I got back to my laptop, I had a better idea of what I wanted to design.
- Learn and study the common design patterns. This week’s exercise had me realize that I need to do a deeper study into common design patterns. You want to make your UI visually appealing but they still need to usable and feasible.