PERSONAL INITIATIVE

100 Day design challenge

 

CHALLENGE

I've been seeing a lot of fellow designers post their progress for this challenge and I was intrigued to give it a try. The premise is you subscribe and Daily UI sends you an email a day with a very high level prompt. It is then our job to interpret and carry out the task. 

SOLUTION

I wanted to give myself a bigger challenge to think through (if time allows) on certain challenges to create animations of the anticipated functionality & flow. Find more details here of the 100 Day Design Challenge. Each design you see below is done within 1- 1.5 hours, and I tried to not use Pinterest or the internet to borrow ideas during ideation. #DailyUI #100dayChallenge

 

MY ROLE

+ Visual Designer

 

 

DELIVERABLES

+ UI Designs + animation 

 

TOOLS USED

+ Sketch

+ Illustrator (AI)

+ Proto.io

 

001. LOGIN FORM

The task was to create a login flow and I wanted to tie it into context. I'm always looking for new recipes and I wanted to revamp the "Allrecipes.com" login/ register pages. 

Thoughts:

So far so good... that wasn't so bad.

 
 

002. CC CHECKOUT

The task was to create a credit card checkout flow. Today I wanted to challenge myself to use a different set of iconography, new color schemes and typography. Since my last design was desktop, I thought I'd change it up with mobile for this challenge. (Click to enlarge)
 

Thoughts:

It's funny how we do so much online shopping, yet when I had to start this design without Pinterest or internet help, I couldn't remember all the form fields that were required for an online transaction.

 
 

003. LANDING PAGE

The task was to a landing page above the fold. This is by far my favorite design of all because of it's minimalism and simplicity. (click to enlarge)

Thoughts:

Honestly, this was the hardest one so far. It's hard for me to only think about designing a homepage "above the fold" and not consider the navigational structure or what other content exists on this page. I still condensed some of the navigation from their existing site, but would be a worthwhile future project to dig further and re-design their entire navigation structure.

 
 

004. CALCULATOR

The task was to create a calculator... Similar to Day #2's, it took me a second to remember the keys on a calculator, whether it's digital or a physical calculator. (click to enlarge)

Thoughts:

I wanted to explore with different fonts, colors and styles. This time, I approached using rounded shapes as my button styles. 

 
Day 4 | calculator.jpg
 

005. APP ICON

The task was to create an app icon. My inspiration came from my love for food, especially tacos. (Click image to enlarge)

Thoughts:

Today's task was actually a lot of fun. I played around with different overlays and opacities, went through a lot of trial and error with colors before I was satisfied with how it looks. (Still not 100% yet) I would definitely love to come back to this assignment to flush out more pages of the app! But I definitely spent the most time on this compared to the others.

 
 

006. USER PROFILE

The task was to create a user profile and I decided to go with the mobile version.  

Thoughts:

I channeled one of my favorite TV shows, Parks and Recreation and created a profile for the famous Leslie Knope. 

 
 

007. SETTINGS

The task was to create a settings page and I wanted to take a stab at revising the Spotify account settings. I also explored different typography and used rounder button styles.  

Thoughts:

No thoughts on this task. It wasn't as challenging at the other ones.

 
 

008. 404 error

The task was to create a 404 page and I was inspired by my favorite books, Harry Potter. I've always been an avid HP fan, so I wanted to use one of the quotes from the books for this.

Thoughts:

This was a lot of fun! I couldn't decide which is my favorite yet between these. I was also thinking of doing one more in the future, with an illustration of The Room of Requirements. " If you have to ask, you will never know. If you know, you need only ask."

 
 

009. Music Player

The task was to create a music player and I was thinking of a more engaging way to showcase the song playing at the time through clean icons and strong visual imagery. 

Thoughts:

This song has been on repeat for me for a very long time. Ed Sheeran has a lot of catchy songs and I love his music and lyrics. This was overall a very fun task because I used different colors and went for a more clean and minimal look.

 
 

010. Social Share

The task was to create a social share concept. Since I haven't played with the apple watch designs just yet, I wanted to use this time to explore that.

Thoughts:

I can't believe it's only the 10th day! Some of the tasks has been a lot of fun, while others, I really struggled with both the concepting, but also finding time to create.

 
 

011. Flash Messages

The task was to create a flash message to include a success and an error message. I wanted to explore using a different cartoon-y style. 

Thoughts:

This was overall a pretty fun one, mostly because I tried to challenge myself with more of illustrations.

 
 

012. Ecommerce Page (1 product)

The task was to create single product e-commerce page and I decided to use the product I've been recently thinking about purchasing. The embroidered details are to die for! 

Thoughts:

This was a really fun and different approach. I might come explore this a bit further later this weekend to flush out a full product detail page.

 
 

013. Messaging

The task was a messaging platform of some sort and I wanted to add to the previous day's task. So I ended up creating a chatbot as a part of the e-commerce experience to address customer questions while going through the purchase funnel.

Thoughts:

I briefly had a project while at GMR to work with chatbots and it was actually a lot of fun. I'd love to explore designing UX for chatbots in the future and would definitely love to flush this out as a future self initiative project.

 
 

014. Countdown Timer

The task was to create a countdown timer and I decided to use this opportunity to design a landing page for a side project I'm working on with two other friends.

Thoughts:

I  definitely will be coming back to animate this task and continue to tweak the site.