Daily UI
A collection of daily design challenges, applying and experimenting with fundamental principles of design.
This case study is a collection of four mini-projects from the Daily UI challenge.
Timeframe
10 weeks
Role
UI Designer
Team
Solo
The Bridgeport Museum: FAQ
Project Goal:
Create a scannable and simple FAQ section for the Bridgeport Museum.
Challenge:
Creating a design to look the way I envisioned, modern, futuristic and colorful. These three characteristics are keywords to the brand of the museum.
What did I learn?
-
Trying different ideas and designs helps with creativity.
-
I did not feel bound to a singular design after presenting myself with multiple design strategies.
How do you make it scannable?
Scannability ultimately comes down to how much information does the user has to process in a short amount of time.
The answers are hidden unless the user clicks on the question they are asking. They do not need to look through every answer they don't care for, the user can simply skim the questions until they find one they want to know the answer to. This is a small but important design decision to elevate a user experience.
Clicking on a question animates the section's arrow to point up rather than down. Animating these small features communicates to the user what will happen next without cluttering the page with words.
Giving users the freedom to make their space their own is important to users and is prevalent in many social media platforms such as Tumblr, Instagrams Messenger, and WhatsApp.
I had to take a look at other messenger interfaces and find elements that contrasted in color. Usually the chat boxes were different colors from the background and accents such as lines and small texts were colors of their own.
Customizable Messenger App
Create a messenger app with the feature to customize the colors of your own UI to make each person's account unique to them.
Project Goal:
Building a customization feature.
Creating the customization feature that was both simple and intuitive. The most difficult part was narrowing down each interface into simple parts such as the background, the chat, and the accents.
Challenges:
Breaking down the interface and categorizing each element made me dive deep into how elements in UI blend and mesh to create something beautiful.
What I learned
Project Goal:
-
Using visual hierarchy, using shapes, size, and position to indicate the difference between different elements is an importaint and powerful tool.
Create a website where the main feature is a search bar that expands to give the user suggestions for what to search for.
The Homemade Handbook: Search Bar
Creating attention grabbing cards to draw users into recipes that are featured on the homepage.
Challenges:
Creating an interactive searchbar.
When animating the searchbar, it was importaint to give the user suggestions on what to search for. Having popular recipes that pop up when searching for recipes is a quick way to introduce users to potential options in a wy that doesn't feel out of the out of the ordinary.
What I learned
Bridgeport
News
Project Goal:
Create a local news program which is both immersive and informative.
Keeping the interface informative, scannable and simple for users to learn as much as possible from their local news program.
Challenges:
What I learned
-
The importance of labels. Each story comes with a photo and a category which is for giving users an insight into what this story will be about. Giving users context before they click on a button can save them frustration and unnecessary clicks back and forth through the app.
For this mini-project, I wanted to create an FAQ section for the fictional Bridgeport Museum. I wanted the FAQ to be easy straightforward and easy to scan.
I had a hard time trying to make this design look cool and modern, I spent hours and hours on the first draft only to be scrapped and redone by the mockup you see here.