DailyUI

To keep my creativity flowing, expanding my knowledge, and improving my UI design skills, I decided to join Daily UI challenge where everyday, I design different User Interface elements for web and mobile. I will continue to update this page as I go through the challenges for each day.

Design tools: Sketch, Principle

Day 01 - Sign Up

"Design a sign up page, modal, form, app screen, etc. (It's up to you!)"

My solution: I imagined a signup page for an app that users would use everyday for daily inspirations. Upon downloading the app, users have options to sign up with Facebook or email. I also added an option for when a user might not want to get an account just yet, but still want to give the app a try. I find that really makes experience more pleasant when you‘re not forced to give up your information when you’re unsure about it.

Day 02 - Credit Card Forms

"Design a credit card checkout form or page. Don't forget the important elements such as numbers, dates etc.“

My solution: Checkout process is one of the most important part of almost every business. Having a simple UI and great UX is the key to make user experience seamless and effective. I designed the interface to display the product(s) and total price on the left so that users can review what they are buying at any time. On the right section, credit card(s) is shown and users also have an options to choose a different card or add a new one.

Day 03 - Landing Page

"What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements.”

My solution: REI has a social campaign encourage people to just simply go and enjoy yourself outside. Many people around the world participate by posting their pictures on social media with #OptOutSide. I thought it would make the experience even better to have a landing page as a main hub to showcase selected photos from this campaign. The images are shown full screen in the background to create strong visual impact and to capture user’s attention.

Day 04 - Calculator

"Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?”

My solution: What’s more useful than calculator? A tip calculator! This’s an interface for a tip calculator app for users to quickly figure out how much they should tip at a restaurant. It includes the most common(and suggested) tip percentage options (in America.)

Day 05 - App Icon

"Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?"

My solution: I designed this icon for a mail/delivery tracking app. The icon represents an owl. I got my inspiration from, yes, Harry Potter! For those of you who don’t know, in HP, owls carry message and items from one person to another. I chose orange on yellow so that the icon would stand out from others when viewed on a phone. Also, these color are associated with happiness and optimism.

Day 06 - User Profile

"Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile?”

My solution: This’s a user profile page for a rock climbing app. I notice that there are not a lot of app in the market that dedicated for people who do indoor rock climbing. So I had this idea of Facebook for indoor rock climbers. Users create accounts and share anything rock climbing related. Connect with other climbers by browsing profiles sorted by location, level, and more! Beside social aspects of the app, users can also log their climbs and track climbing progress.

Day 07 - Settings

"Design settings for something. Is it for security or privacy settings? Game settings? What is it and what's important?”

My solution: This’s a light setting page for a smart home app where you can control lights in your home. You can change color, adjust brightness, set a timer, and turn off/on - all from your phone!

Day 08 - 404 Page

"Design a 404 page. Does it suit the brand's style? Is it user-friendly?"

My solution: If there’s a site for Stranger Things, this’s what the 404 page should look like :) Taking inspiration from the show itself, the error page depicts the famous alphabet wall scene with a warning message from Will.

Day 09 - Music Player

Spotify x Tinder

"Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc.”

My solution: In today’s fast paced society, not everyone has time to browse through an endless list of playlists to find what they are looking for. Many music apps now offer "Top Recommendations For You “ but the problem is you still have to click one by one through them to check out the songs. So I had an idea of using Tinder functionality as a way to quickly browse through the list. You can swipe left (or tap ‘x’) if you don’t like the music or you can swipe right(or tap the heart icon) if you like it and it will automatically be saved to your playlist. This’s a fun alternative way to browse for favorite music that targets millennials who have short attention span.

Day 10 - Social Share

"Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing.”

My solution: I designed a social media sharing for a travel blog. When reading an article, users can share it to their social media by tapping the share icon. The icon is fixed to the bottom corner so users can share at anytime no matter where they are on the page.

Day 11 - Flash Message (Error/Success)

"Design a Flash Message with both the outcome for an error and success. Is it for a sign up form? A download/upload message?"

My solution: This’s a flash message for hotel booking site. If the booking is completed successfully, you will be served with a congratulation message as well as a short summary of your booking. On the other hand, if it didn’t go through, the error message will appear with options for you to either go back and try again or get help from customer service. I added cute little animation to make the process more fun and user-friendly.

Day 12 - E-Commerce Shop (Single Item)

"Design an e-commerce shop. Is it simple for a local business or a large online retailer? Is it for clothing, shoes, handmade soap, or something else?”

My solution: This’s an e-commerce shop for polaroid instant mini. Since there are seven color options for this edition, I thought it’d be fun to add a little interaction where the color of the background and the camera seamlessly change as you click through the options.

Day 13 - Direct Messaging

"Design a Direct Messaging app, profile, or chatbox. Consider the parties involved in the messages, images, placement, and context of the messages. Are the messages for social purposes? Customer support?”

My solution: I love it when a business offers customer online chat support. It’s convenient, fast, and reliable. I designed this interface having that principle in mind. To ensure that a user is talking to a real person, I added representative’s name and photo at the top to make user feel more personal. The little green circle indicates that the representative is currently online (in case there’s a connectivity issue). At the bottom, there’s a camera and attachment icon in case there's a need to send over any visual reference. At the end of the chat, user will be prompted with a screen asking to rate the experience. This’s a fast and simple way to get user’s opinion in stead of asking them to fill out a form. There’s also an option to obtain a copy of the chat transcript as a peace of mind for future reference.

Day 14 - Onboarding

"Hint: Design something onboarding related. Are you recruiting people for an organization? To sign up for a new website? A mobile app?"

My solution: I found that even though I regularly use Dribbble as a source of inspiration, it took me some time to understand the whole process on how to contribute to this community. So I created a simple and easy to follow guide of how one can become a Dribbbler. See it in action︎

︎ Previous

Next ︎

UX/UI ENTERTAINMENT INFO ︎