Tackling the 100 Day Daily UI Challenge — Days 1–7

Taking you on a journey with me as I set out to improve my user interface abilities via the 100 Day Daily UI Challenge.

Like what you see? Follow me on Dribbble for more!

Back Story

I come from a background in SaaS sales and event sponsorships. For years, I desperately wanted more creative freedom within my career but had no idea where to begin. I craved being in a space where I could create something tangible to show for myself that extended beyond numbers, quotas, and event turnouts. More importantly, I wanted to help people and actually physically see how my support and my creations could improve the lives of others. After exposure to UX/UI design through the startups I worked for, my interest heightened and I asked my supervisors if I could get more involved. As a result, I was able to gain some hands-on experience which ultimately helped guide my decision to switch careers into the field of design. Following suit, I temporarily moved to Chicago (3 weeks before lockdown), where I graduated from Flatiron School in User Experience Design circa 2020. It was a chaotic time and A LOT of work, but I loved it.

Like countless other designers, I very much was feeling the “imposter syndrome” straight out of school — I mean there is still SO much more to learn. How could I claim to be a designer if I didn’t know the basics of UI?

After a failed attempt to complete this UI challenge last year — making it through a mere two days — I decided to redeem myself and swallow my fear of judgment (we can certainly be our harshest critics at times). So, here is to learning new techniques in the UX/UI realm.

Objective

I vow to implement a daily design practice to improve my skills as a designer, as it is something I am deeply passionate about. Taking a few minutes or hours of your day to commit to learning something you love takes discipline, and isn’t for the weak. I’m ready to take on this commitment as I have so much fun designing for myself, and I hope you can relish in the creations I came up with!

Check back each week for a recap of my completed design challenges :)

Daily UI Day 1–7

Day 1— Create a signup page, modal, form, or app screen related to signing up for something.

“Honeycomb Club” is a hypothetical web-based platform where you can purchase honey from local and global honey makers, learn how to make your own honey at home, or sell your honey to other honey lovers online.

Day 2 — Design a credit card checkout form or page.

“Funky Tarts” was inspired by a Pinterest I stumbled upon, in which a graphic designer created a bunch of outlandish pop tart flavors and labels to match. I created an entire brand from the concept called Funky Tarts — a site where you can purchase pop tarts of the oddest flavors. They’ll be sure to make your tastebuds pop.

Day 3 — Design a landing page

This “Moody Mylk” concept was inspired by my love for the plethora of milk alternatives + all the colorful and nutritious powders out there! I wanted to put a spin on milk delivery services by making shopping for milk a more playful, multifaceted activity! So I created a mylk company where you can design a mylk for every mood. The left-hand photo is an overview and the right photo is what the entire home page layout would look like if you were to scroll to the bottom.

Day 4 — Design a calculator interface

“Retro Mathematics” was inspired by several retro art pieces I found on society 6. I love these muted yet vibrant colors (I’m a huge fan of the rainbow). I wanted to keep it simple and leave the layout relatively traditional so here’s what I came up with! Creating this made me want to dive deeper into drop shadows and button making.

Day 5— Design an app icon

“Coffee Snob” was inspired by my affinity for frilly coffee drinks. I’m a sucker for regular coffee, but I love how creative coffee shops have been getting with their beverages — using unique colors and garnishes to make their drinks one of a kind.

The idea behind this fake app is a yelp for bougie coffee. Coffee lovers could use it to find the best-rated drinks (based on aesthetic, flavor, ingredients, etc.). Users would be able to see a map view of the coffee shops in their area and can scroll through photos and user ratings to help them make their decision of where they would like their next cup of joe.

Day 6 — Design a profile view

“Shoe Boss” was inspired by an old friend of mine who had an obsession with collecting and polishing his limited-edition sneakers. I wanted to create a digital space where shoe collectors can showcase their shoe collection with fellow shoe lovers, as well sell any of their items or create a wishlist for desired items.

This was by far the most challenging one of the week because I have so many outside influences of what a profile should look like that I had trouble deciding how the layout of the page would be structured. I think there is still room for improvement here, especially with organizing the content and presenting what is clickable in a different way.

Day 7— Design a settings view

“Animal Barn” is a space for children to collect animals they find out in the wild. They earn points for discovering each animal, and rarer animals are worth more points. I didn’t get too far into thinking out the details for this app (and in hindsight, if it’s for children I might have been better off going with a tablet for the device) but I enjoyed thinking about what the settings might look like because it is not something I have too much experience with.

Summary

My first week was a success! Halfway through the week, I started chunking my challenges — doing 2–3 a day twice or three times a week versus every day. It’s helpful to avoid an overdose of context switching and that way I can schedule out my future posts on Dribbble all at once to free up some time to tackle other projects. I think next week I’ll try tackling some different devices such as a tablet or Apple watch to spice things up a bit. All in all, this first week has made me even more excited to explore more unchartered territory in the UI world!

Learnings:

• Gathering design inspiration will give you an advantage. But seriously. Take screenshots of cool designs, create a mood board. Whatever. We aren’t trying to reinvent the wheel here, but we are trying to make it stand out.
• Setting a timer before commencing helps you avoid circling the drain. Sure, there were a few times I pressed the snooze on the timer because I didn’t feel my project was complete but it sure as hell helped me stay on track.
• Chunking Challenges is another way to save time. I realized doing these every single day can be a bit overwhelming. Spending seemingly excessive amounts of time on little details (grid lines, spacing, opacity, effects, etc.) can really add up. As much as I enjoy incorporating more of these challenges into my life, and while I do think practicing these exercises daily helps get the creative juices flowing
• Youtube tutorials are your friend. There were several times I had to google or youtube “How to ____” to complete a challenge. I’m not super familiar with effects, and memorizing the ios guidelines for each device can be a doozy. I learned so much about auto layouts and responsive resize, as well as drop shadow and layer blurs, masking, etc. by trial and error and ultimately looking to online resources when in doubt.
• Sticking to the guidelines for each device can be a headache. I know how important this step is but memorizing all the sizing, grid lines, columns and spacing, top navs, bottom nav, icon sizes, etc., is A LOT of pressure. I will say I am constantly finding ways to work more efficiently, such as putting the recommended pixel sizes and spacing from edges into my Figma doc so it’s right there in front of me.
• Dribbble has some restrictions with uploading. I created a really long landing page only to find out Dribbble’s uploads don’t support its length. I ended up downsizing it and slicing it to give viewers an overview of each of the pages but I was a bit bummed I couldn’t share it in its fullest expression. Sizing was also a big issue, especially for images that contained high-res mockups. Luckily, Medium doesn’t have restrictions with uploading :).

Thank you for reading!