PROJECT DESCRIPTION

Daily UI

A 14 day challenge to grow my design skills

Type

UI Design

Date

June - July 2019

DAY 1

Sign Up

Sign Up

I Learned

  • Adobe Illustrator is definitely not the right program for mockups.
  • There are many different designs for input fields. Some have icons, some don't, some are rounded, dark, light, etc.
  • A large hero section might help someone feel more comfortable about signing up for a product.

DAY 2

Checkout

Checkout

I Learned

  • Visualizing copying a physical object like a credit card might help someone fully understand what it is in a digital space.
  • My "Buy Now" button doesn't look right and could probably do without the total displayed on the left side.
  • Drop shadows can also be effective with color instead of just black.

DAY 3

Landing Page

Landing Page

I Learned

  • The button text is really really important. I read that there are already proven words that help lead to more conversions.
  • My daily ui logo might not be important to include on all of the designs.
  • It's important to pay attention to contrast especially if the images might change over time. This format may not work if tested with images that have lower contrast with white.

DAY 4

User Profile

User Profile

I Learned

  • MOBILE TEXT SIZE. It's definitely too small in this design for it to be useful on smaller phones.
  • Contrast between the 2 heart buttons, the one on the left should be the same color as the play counter. Maybe combine the like counter with the actual button to clear up space?
  • Negative space. It's great but I have too much above "Recent Tracks" thats prime real estate that in reality would be used better.

DAY 5

Product Page

Product Page

I Learned

  • That fancy color bar on the left is not realistic as products would need to be transparent.
  • Soft drop shadows on important buttons may be effective in increasing the hierarchy.
  • I need to use the space more efficiently. The buttons could be shifted down to allow for more customization options and better information for the user.

DAY 6

Boarding Pass

Boarding Pass

I Learned

  • Boarding passes have 2 different sides to them. If their scanner went down they can take the larger size which overall is easier to carry to the gate. They can then take off the larger side and give you the smaller side which is easier to fit into your pocket.
  • The most relevant information to the user should be the largest. Things like the terminal and gate information should be larger and in order of how they will be used.
  • Using familiar design language and icons seen on apps and digital screens can also be implemented on physical objects.

DAY 7

Dashboard

Dashboard

I Learned

  • Recreating real world objects on a 2d surface may be beneficial to the usability and learning curve depending on what it is.
  • The "+ Add Device" button looks like its disabled and not something you can press.
  • Visual negative space is important and I think there are areas for improvement in the home preview area.

DAY 8

Leaderboard

Leaderboard

I Learned

  • Navigation icons can be shown as a dark color whereas the inactive icons can be lighter.
  • Allowing room for larger names is important to think about. I personally don't like it when the same type of text is different sizes due to space restrictions.
  • I should probably have added more room on the top and bottom of the screen to allow for the default OS UI elements.

DAY 9

Pricing

Pricing

I Learned

  • Bright green and saturated blue do not mix very well.
  • The colors are vibrating making the highlighted features hard to read.
  • Contrast is important for accessibility and there is lots of room for improvement for this design.

DAY 10

File Upload

File Upload

I Learned

  • Areas for people to drop their files are typically outlined with dashed lines.
  • It may not be probable to add individual file extension types as an icon but rather a general icon for images, pdf, etc.
  • Multiple file icons in the drop your files here area represent that you can upload multiple.

DAY 11

Group Invite

Group Invite

I Learned

  • Using skeletons or general wireframes of potential content in the background can help enhance a mockup.
  • Colored drop shadows may not be the best option as it doesn't really represent depth.
  •  Button width matterns and is situational. For this I made them both equal because there may not be a reason to have priority over accepting vs declining.

DAY 12

July 4th

Fireworks (July 4th)

I Learned

  • The hamburger menu doesn't need the blue background behind it.
  • Firework selection doesn't really tell me what it is im looking at. What type/colors/sizes etc.
  • The screen might need more room on the top and bottom for native OS UI.

DAY 13

Refresh Animation

I Learned

  • If I used wireframed content inside the modules it could help with understanding what's going on here.
  • Haptic feedback should be used to enhance this animation engaging more senses.
  • Circular dots can represent touches and opacity can represent how hard the press is.

DAY 14

To-Do

To-Do

I Learned

  • Using consistent colors throughout can help with the learning curve and people who are more visually oriented.
  • The buttons are most likely too small leading to unwanted presses.
  • If I were to re-design this, I would create a better way to show/collapse lists.

PROJECT DESCRIPTION

Daily UI

A 14 day challenge to grow my design skills

Type

UI Design

Date

June - July 2019