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)

 

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. 

 
 

015. On/Off Toggle

The task was to create an on/off toggle and I wanted to do something that showcases simple geometric shapes.

Thoughts:

I'll have to admit I took a break from #14 for a couple of weeks because things got chaotic at work. But getting back into this is nice and I forgot how much I miss visual design.

 
 

016. Popup Modal

The task was to create a pop up modal.

Thoughts:

After some brief time off, I picked up this 100 day design challenge again with Day #16, which is a pop up modal asking users for live feedback on a new feature launch.

 
 

017. Receipt

The task was to a create a receipt page and seeing that it was a day after Black Friday, I thought this was fitting.

Thoughts:

I purchased the new Google Pixel 3 phone over black friday with their deals and thought it was fitting to showcase a different receipt UI.

 
KatherineKRichards_100daychallenge_day16
 

018. Dashboard

The task was to create a dashboard and I decided to showcase analytics on top ROI measurements we measure when doing digital work.

Thoughts:

There are so many ways we can approach dashboard designs, but I went with a more minimal and simple approach.

 
 

019. Leaderboard

Today’s task is to create a Leaderboard and I decided to switch it to mobile view compared to the previous day.

Thoughts:

Gamifying a simple task is always fun and gives users an incentive to want to participate. I created a simple mobile leadership board that shows the top winner, with monthly and yearly views.

 
 

020. Location Tracker

The task was to a location tracker. Iconography is from flaticons.com

Thoughts:

I wanted to showcase a location tracker that ties back to day #17 to track the status of my Google Pixel 3 phone. Needless to say, Fedex delivery is the worst.

 
 

021. Home Monitoring

The task was to create a home monitoring dashboard.

Thoughts:

This was very fun and pushed me to do a more minimal design than I’m used to. I was thinking back to the thermometer app that we have at home and what are the key elements they show.

 
 

022. Search Hint

The task was to create a search hint so I created an autosuggest search dropdown.

Thoughts:

I actually just did something similar for a client project so this was by far the easiest one. I challenged myself by focusing more on the hierarchy of content and utilized simple blue linear UI to keep it simple.

 
 

023. On-boarding

The task was an on-boarding screen and I went through a 4 step on-boarding flow.

Thoughts:

I love thinking through on-boarding scenarios, especially ones with cool animations and micro-interactions that engages the user. I’m currently thinking through an app solution related to Travel, so I wanted to create an on-boarding experience that relates to that.

 
 

024. Ticket

The task was to create a ticketing UI and I decided to do a flight ticket using clean and flat design.

Thoughts:

This was actually a lot of fun and I’d love to come back and think through a bit more of the animation, as well as adjust the barcode.

 
 

025. TV UI

The task was to create a UI for a TV application.

Thoughts:

In anticipation for season 8 of Game of Thrones, I created a TV application UI to show my excitement, utilizing typography and photography as the main focal point.

 
 

026. Subscribe

The task was to create a subscription UI.

Thoughts:

I can’t say I was very excited to do this challenge… subscriptions are rarely fun. But I might come back to this and make it more interesting.

 
Day 26 | subscribe.jpg
 

027. Dropdown

The task was to create a dropdown and I decided to redo the navigation dropdown/ mega menu for a website I recently visited.

Thoughts:

This was a lot of fun rethinking through their dropdown navigation. It’s a bit more clean and engaging for users.

 
KatherineKRichards_100daychallenge_day27
 

028. Contact Us

The task was to create a Contact Us page or form field and I wanted to challenge myself by using a different font and UI style.

Thoughts:

I’m noticing that I love sans serif fonts and linear iconography…

 
KatherineKRichards_100daychallenge_day28