100 days UI challenge

100 User Interface design prompts 

BRIEF Receive a daily User Interface design prompt for 100 days at Daily UI.co and interpret and design the UI element. Be creative!

PROJECT INFO  Personal project, ongoing

SKILLS  UI design, micro-interactions, UX design

TOOLS  Sketch, Principle, Illustrator

 

Day 001 ⎢ Sign Up

001_sign_up

Purpose All in one sign up page where you can sign in with email, sign in with social media and login. Instead of having 2 screens, I combined everything into one screen.


Comments 👍

Day 002 ⎢ Credit card checkout

002_credit_card_checkout

Purpose Price tag as a price confirmation which makes the link with previous screen. The card is automatically detected by what number it starts with. 

Comments 😕 Adding secure to pay, I didn’t put a lock with “your transaction is secured”, instead I put pay secure and I wonder if people would feel more trust in that way? Additionally, visual design is quit poor but action is completed easily.

Day 003 ⎢ Landing page

003_landing_page

Purpose Landing page have the goal to make discover the app, learn more about the app features and sign up


Comment 😕 Since it is viewed on desktop, it would have been better to have a call to action to sign up, so to make the sign up button more obvious

Day 004 ⎢ Calculator

Purpose A simple calculator app. My aim was to make computational signs different than the numbers to understand their function at a glance. Deleting numbers and pressing = for the result is highlighted in different colors. Visual style of the calculator is inspired by ET 66 calculator by Dieter Rams and Dietrich Lubs (1987) for Braun.


Comment 👍 Animating the prototype helped me get a sense at how and what computational information is displayed on screen after tapping on touches.

Day 005 ⎢ App icon

005_icon_app

Purpose A calculator app icon with a yellow background to call back the distinctive = button of the calculator. Additionally, yellow background catches the eye.


Comment 😕 There are too many buttons on the calculator which makes the icon less readable from afar.

Day 006 ⎢ User profile

Purpose A user profile page for a Book review app. I got inspired by Goodreads app and designed a profile where users can see Books status (currently reading, want to read, read), Bookshelves (categories of book defined by the user) and Groups (with a button to find a group). Visual style is inspired by paper, typing machine and books are displayed as on a bookshelf.


Comment 👍 I think I succeeded in putting a hierarchy between content, making it no to visually crowded (even if book covers represent a lot of information). I achieved to create a feeling of scrolling through book on bookshelves and looking at book covers to get inspired.

Day 007 ⎢ Settings

007_settings

Purpose Settings from a podcast app. I designed the screen selecting podcast preferences. Visual design is inspired by 70’s and is selected by the users under Theme.


Comment 👎 Podcast preferences screen ends up being too crowded yet it allows users to have a quick overview of almost all their preferences on one page.

Day 008 ⎢ 404 Page

008_404p

Purpose A 404 page with a Space theme. I cut 404 onto the blank page canva to see the space/void.


Comment 👍 Visitors could get unstuck from 404 Page by accessing useful links and going back to homepage. Additionally, visitors could also click on COSMOS and hamburger menu to go back to pages from the website. The copy is framed according to the space theme and visitors get the information that the page is no longer existing (it disappeared into the void).

Resources and inspirations

Designers

Accessibility

Sketch

_

Skype MemoriesCollect moments and share memories with friends

TuneMusical brooch to cope with Chronic Pain

BolleMonitor and train breathing for COPD patients

100 daily UI challenge100 User Interface design prompts

Crowdsourcing_empathyShare emotions with strangers at home in 2035

Forestry 2020Enhance field communication between teams

Working condition evaluationRaise awareness of work toughness in a factory

Design exercisesShort learning projects

ClémiEnhance hospitalized children involvement during class