An iMac displaying Chicwish Redesign in browser

Daily UI

UI/UX Design + Branding

2020

Daily UI is a 100-day design challenge for UI/UX designers of all experience levels. You recieve an email daily with a new design prompt, from “design a widget” to “design a checkout flow”. I’m always looking for new reasons or opportunities to create cool things. Since my formal education was in apparel design, I thought it would be helpful to do a UI challenge to help me build my portfolio. I knew it would not only provide new examples of my design work, but would also help me grow as a designer.

The Daily UI challenges I’ve completed thus far have included far more than UI design; they have given me an opportunity to work on branding, typography, and different types of illustration as well. The prompts allow me to design things that play to all aspects of my hybrid skillset, showing that my talents in illustration, branding, and design can all work together to make a great product.

Click to enlarge!

Create a sign up page, modal, form, or app screen related to signing up for something.

I chose to do a signup for a fictional legal defense fund for undocumented immigrants. It's 2020 and the news cycle is constantly revolving, but there are still men, women, and children being held in ICE detention centers. Often, they are not provided toiletries (i.e. toothbrushes and soap), a clean blanket, or appropriate healthcare.

Most of these immigrants came here for a better life for their family and themselves. Many have traveled miles and miles just to find themselves at our border being put in handcuffs. This is a frustrating system we've created on the backs of poor immigrants, and if you ask me, it's unamerican.

For more information:

Propublica's excellent reporting
Kids in Need of Defense [KIND]
Immigration Justice Campaign

#001

Click to enlarge!

Process:

My initial thoughts in designing this signup page was to create a clean flow, free of too many ads, images, or random text boxes. I wanted the signup to feel straightforward, trustworthy, and familiar, while still providing an emotional element. I created a repeatable chain-link pattern in vector for the background, and kept the color scheme somewhat dark and subtle. After some extensive digging, I found a really solid photo by @timmossholder at Unsplash; the content of the photo helps drive home the idea that undocumented immigrants of all shapes and sizes are being ‘disappeared’ into our behemoth justice center. Lastly, I kept the copy clear and straightforward, and only asked for a minimum of information from the user - just enough info to get them started in creating a more equitable world.

#002

Design a credit card checkout form or page.

For my second design prompt, I chose to design a checkout for a fictional sneaker shop. I was really inspired by the color scheme of the sneaker; the color combo felt new and fresh, and allowed me to create an interesting palette to complement it.

Click to enlarge!

Process:

Picking a sneaker company for this prompt provided me with a great benefit - the ability to be creative and somewhat ‘trendy’ with its design. I really wanted to design something that was full-fledged, no-holds-barred colorful. I started with a simple wireframe to establish content, and was able to design from there. The color palette was largely pulled from the sneaker itself, although I did add chartreuse for a nice, sharp pop color. The checkout flow was initially intended to be mostly monochromatic, but in my iteration I found that having white inputs and a black button helped with readability.

The top third of the page (displaying the sneaker) reflects a visual preview of the products being bought. Clicking through the left and right arrows would show you each item you’re purchasing. I attempted to use a novelty font here to really push some attitude, but ultimately found it too difficult to read and opted for a cleaner sans-serif.

Click to enlarge!

Design a calculator.

Remember the days of typing “80085” on your TI-96 to make your friends laugh? Entertainment was so easy to come by in high school. For my fourth design challenge, I decided to design a simple, kawaii-cute calculator for use as a desktop widget. I wanted to design something I would have loved to use in high school, rather than my brick of a Texas Instrument. Mission complete.

#004

Click to enlarge!

Process:

I anticipated this challenge to be pretty easy. Calculators are not something in need of drastic innovation - most calculators follow a similar pattern of buttons and layout. Rather than reinventing the wheel, I chose to focus on shape, color, and depth. The color palette was a given - I love pastels and have no trouble creating palettes from them. I spent a bit more time trying to 3D-ify the widget, giving it a pretty, rounded body shape, and pressable buttons.

One feature I did attempt to add was a calculation history. I’ve had a few occasions using a calculator where I’ll do one equation, and need to remember part of that equation for my next equation. My thought was that as you use the calculator, your equations move towards the top of the screen, eventually fading away with each new calculation. Unfortunately this idea ended up making the calculator look really busy, and I chose to exclude the feature.

#005

Design an app icon.

For prompt #005, I designed an icon for a fictional nonprofit that supports literacy in low-income communities.

Reading has always been a huge priority in my life. Despite being relatively poor, my parents gave me the biggest gift by encouraging my reading habits as a kid. Their encouragement created in me a love for learning, which set me up for success in both grade school and college. Learning has certainly been a major byproduct of reading, but books have also provided me with entertainment, made me more empathetic, and allowed me a space to adventure without leaving my home. I could write a thesis on the value of books and literacy, but I won’t do that here.

Here are some disturbing statistics that demonstrate Americans’ need for literacy support: 93 Million American adults read “at or below the basic level needed to contribute successfully to society”. By the age of three, there’s a 30 million word gap between the poorest kids and the wealthiest. Literacy is a huge indicator of future success in kids, yet only 35% of American schoolchildren are reading at proficient or higher levels by fourth grade. 50% of black fourth graders read below basic reading levels, while 47% of hispanic students and 49% of American Indians fall below basic reading levels.

These stats are unacceptable, and demonstrate that we’re not doing enough in our communities to support literacy and education for our poorest individuals.

For more information:

RIF’s Literacy Facts + Stats
ProLiteracy
First Book
Ferst Readers

Logo Iteration

Click to enlarge!

Process:

For this challenge, I used a 70’s-inspired rainbow palette with a bold sans-serif. I wanted the branding to feel colorful, approachable, and optimistic. The reasoning behind the name should be obvious, the preix ‘liber-’ meaning both ‘free’ and ‘book’.

This prompt ended up taking me longer than anticipated. Though I expected it to be pretty easy, creating a book in vector was somewhat of a headache. My choice of book shape/pose was difficult to execute in vector because of the movement in the pages - if I illustrated the pages incorrectly, it would throw the entire design off. I also struggled with deciding which details should be illustrated and which details would be too tiny or intricate to read well on an icon. An example of this - in some versions, the book has an orange headband in the spine. It looked great at large sizes, but the minute I resized the image, the headband was barely noticable. Ultimately I had to eliminate a few details and exaggerate the major shapes, which allowed the illustration to look great at small sizes.

Daily UI

UI/UX Design + Branding

Create a sign up page, modal, form, or app screen related to signing up for something.

Design a credit card checkout form or page.

Design a calculator.

Design an app icon.

Looking for my work in apparel?