Daily UI - 100 Day Challenge
Duration: April 6, 2021 - 🤷🏼♂️ Sometime in the future
Research / Design
I decided to start Daily UI's 100 day design challenge because I felt it would be very important for me to enhance my deisgn skills, and because that this challenge would be the perfect way to do so. If you would be interested in taking on this challenge I'd strongly recommend giving it a shot. To begin the challenge, simply visit dailyui.co and insert your email. The following day you'll recieve the first day's challenge in your inbox, and everyday for the next 100 days, except on weekends which provides a nice break and time to review past challenges. Below are all of my current completed challenges. It would mean the world to me if you gave it a thumbs up on Bēhance and or Dribbble. Thank you!
Day 001 :: Sign Up Page
This is the first day of Daily UI's 100 day design challenge. I've done multiple takes on this first day of having to create a sign up form. Visit my profile to view my other take and consider following so you can see my next projects over the next 100 days!
Day 002 :: Credit Card Checkout
For day two, the challenge was to create a credit card checkout page. I decided to go with a checkout page for a mobile app. It's honestly pretty straight forward and simple. Starting from the top, The total amount due is shown with the tax rate listed just below the price. Moving down the screen, we have the actual payment method options. While this challenge was mainly focused on use of a credit card, there are also two express checkout options (PayPal and Apple Pay) that could be used. After a user has populated each of the fields, the lower, "Swipe to Pay" area will lighten up and the arrow will begin sliding from left to right indicating that the user must then swipe to complete their purchase. Again, the design is very simple and quite modern but easy to navigate and understand.
Day 003 :: Landing Page
This is the landing page I decided to build for day three. As many can likely guess, it's a mock of IKEA's landing page but with a change in bg color. This landing page features a main element ("Chairs for any room.") that users first see when entering the site. Within that same element is a button directing users to the entire chair collection in the shop. To the right of the main piece, there is a simple 5 button list that offers users easy access to any of the specific things they may be looking for that are listed. I may add more to this in the future, but we'll see. Thanks for checking this out!
Day 004 :: Calculator
For day 4 the challenge was to design a calculator, and that I did. When it comes to designing a calculator it's pretty straight forward as to what components and features it needs. While this calculator is on the simpler end, as it doesn't allow for more advanced calculations as the proper buttons to do so aren't in the app, I think we all can agree that this simple calculator can still do a great job at solving random math equations quickly. This calculator also has my favorite feature, one I wish more calculator apps offered, a voice component. Tapping the icon would initiate the voice feature and simply telling it the equation you need to solve will output the answer even quicker.
Day 005 :: App Icon
For day five, the challenge was to design an app icon. App icons are something I've never experimented with before. That changed today! The app icon I designed is very modern and while it isn't like most traditional app icons using a basic icon or lettering, mine features a modern logo that I created specifically for this challenge.
Day 006 :: User Profile
For day six the challenge was to create a user profile. So I did, and the design above is what I came up with! I thought it would be neat to have a social app that incorporates emojis in place of basic icons. In each user's profile the users will have the option to set the main colors, choose a background image that uses emojis, and choose their profile picture which also uses emojis. Only text posts would be allowed on this social app as adding pictures could take away from not having a real profile picture. Also, each post has a like feature just like any social app would. What do you think?
Day 007 :: Settings
In short, this is a minimal settings page with just about all the necessary settings options. The idea for the app was a mobile gaming platform. Below the username, and beside the user profile image is an "online" button. For the actual settings there's everything from typical Account settings to privacy/security, and even display theme options. Notifications are an important part of a gaming app because it allows each user to know when their friends are playing a video game therefore access to notification options are crucial. Besides those settings options, there's a contact us and support option.
Day 008 :: 404 Page
For the 404 page I decided to go with a very minimal page for a cafe. A simple image related to the cafe acts a a great, minimalistic background to the page. Below the 404 error text, is a button directing lost users back home. Again, this page is very minimal however, easy to understand.
Day 009 :: Music Player
For day 9 I needed to design a music player. A simple, easy to navigate music player is what I like so that's exactly what I designed. On the first screen (left), users will see a search icon to search a their current songs and albums. Below that is a now playing area allowing users to move to the actual player screen (right) quickly. Below the now playing section is an area where all of a user's albums live. For quick access to the albums users can scroll till they find the perfect one, however as they get more albums, that'll be a nightmare. So there is a button to view all albums in a full list on a separate screen. Moving to the player screen we can see the search button still remains and just beside it are a more options icon, allowing users to view more info on the album or song they're listening to and a favorite/heart icon that allows users to easily save songs and albums to the favorites section. Further down the screen is the literal player where users control the part of the song they're listening to, loop or shuffle an album/playlist, and pause or play a song.
Day 010 :: Social Share
The tenth day asked for a social share component/feature to be designed. The feature itself is quite straightforward and easy to understand. The coloration with a black and white contrast is something I thought would be different and appealing. That it is.
Day 011 :: Flash Message
For day 11 the challenge was to design a flash message for both a success and error. I decided to make my flash message for a newsletter sign up, informing the user wether or not they were successfully signed up or not. I honestly wasn't sure how my designs would look, but as you can see they turned out fairly decent.
Day 012 :: E-Commerce Shop (Single Item)
For day twelve, the challenge was to create a single item in an e-commerce shop. I wanted the design to be simple as I personally hate e-commerce sites that are hard to navigate and give every user a headache. Color themes can be overwhelming at times on various shopping sites too, so the colors for mine are simple and provide a warm feeling to each users. Under the product image and description is an add to cart button. Below that, a row of similar products is shown. While this design is minimalistic, it's also very pleasing to users.
Day 013 :: Direct Messaging
For day 13 the challenge was to create a direct messaging application. I designed this messaging app with ease of use in mind. In this design, I made sure that a user could easily navigate in and out of messaging with friends using the return to inbox button in top left corner of the app. In the top right, a user can click on their friend's profile picture to view that user's full profile. It's minimal, the color theme isn't overwhelming and it achieves exactly what was challenged.
Day 014 :: Countdown Timer
Day 14 involved creating a countdown timer. I choose to design one for an app. Starting at the lower, navigation portion of UI, there are three options: a clock, a countdown and a stopwatch. Each of these options are all very standard on most time tracking apps and sites, however changing the layout and adding a fast way to navigate between each time tracking option is crucial. In the center of the screen, the physical countdown is located, encouraging the user as they near the end of the set time. Above the timer, in the top right is the user's icon, keeping track of their past countdowns and stopwatches, as well as their favorited world clocks. In the top left is a create new countdown icon allowing a user to create up to 4 countdowns at one time. Each being displayed in a two by two, stacked format.
Daily UI 015 :: On/Off Switch
For these On/Off Switches I chose to design them as toggles between dark and light mode and they're fairly simplistic as most toggle switches are.
Daily UI :: 016 - Pop-Up / Overlay
Day 16 called for the design of a pop-up/overlay. This overlay is shown after a user purchases honey from this online shop. It informs the user that their order was successfully placed and allows them the option to get a receipt sent to their email inbox. Below the company name, is an x icon allowing users to close out of the overlay and return to the app or website. While this overlay is minimalistic, it achieves everything a user would need to know and do after making a purchase.
Daily UI 017 :: Email Receipt
Email receipts are typically overcomplicated and far from easy to understand. With that being said, the email receipt I've designed is one that any user can understand. This receipt reminds the user of what they ordered and the total cost, as well as allows them to track their order. This email receipt displays all the essentials that every customer would ever need to know.
Daily UI 018 :: Analytics Chart
For the analytics chart challenge, I decided to design a crypto trading app. The main page of the app allows the user to see current prices, trends on the actual analytical graph and also view their wallet balance. While it's minimal, this app could be a great way for users to track their investments as well as decide on future investments.
Daily UI 019 :: Leaderboard
This leaderboard is minimalistic, and informative for users. At the top of the leaderboard screen, the highest ranked players are listed. Players are given a crown beside their name if they rank within the top three and beside or below their name is the amount of gems they've acquired.
Daily UI 020 :: Location Tracker
For day 20, the challenge was to design a location tracker. Wether this app be used for setting destinations and choosing the fastest routes like most maps, or tracking you and your friends and family, it can do it all. The map is enlarged upon opening showing the user's current location. A quick search would allow the user to find places he/she would like to travel to. For quick searches, the app offers quick links to things such as restaurants, parks, stores, and supermarkets and others, based on the user's most frequented searches. While this design is quite minimalistic, it certainly offers the same features and more of most map apps.
Daily UI 021 :: Home Monitoring Dashboard
On the main screen of the home monitoring dashboard, it allows the user to be informed of everything they need to know and more. Everything from the user's Nest cameras to their curtains, they can access every smart device in and around their home from this one app. They can control the sprinklers, the indoor and outdoor speakers, lights and temperature from the main screen. Other, not frequently used devices, can be accessed from the "more" screen of the app. It can be visited by selecting the three dots in the bottom navigation tab. The design is simple and easy to understand, allowing the user to quickly and efficiently control and check on all the smart devices within their home.
Daily UI 022 :: Search
Designing a search screen is fairly simple and making it user friendly is extremely important. Adding quick search options is also a great way to help users out when searching a site or app and making it minimalistic is key so that the users aren't overwhelmed.
Daily UI 023 :: Onboarding
For this onboarding screen I wanted to incorporate the user and create hype around them joining. Though this screen is minimal, it welcomes then informs the user of the next necessary steps in this case checking email to verify account.
Daily UI 024 :: Boarding Pass
This boarding pass is minimalistic, modern, and digital which is something I find very unique. Simply arriving at an airport, train station, bus station, and any other transport facility and showing their ticket via their phone for a contactless, and headache free check in. They'll never forget their boarding pass again. A user can also email themself the boarding pass so they can share or print out.
Daily UI 025 :: TV App
This tv app is specific to college sports. It offers users every sport, from every college in North America. The idea sprouted from the fact that it's hard to find where to watch a college sports game, that is if it's being streamed at all, but with U Sports, you'll never have to miss another game from your favorite college. This app was designed with quick access to specific games in mind. In the nav, various popular sports are listed, below that is a live section for every currently live game. Continuing down the screen, a list of popular universities, based on the user's watch history and favorited teams, allows for quick access to on-demand sports and live. U Sports the perfect streaming app for any college sports fan.
Daily UI 026 :: Subscribe
This subscribe button allows a user to be added to a mailing list that sends various recipes to their inbox each day. This form is minimalistic, yet informative as it explains to the user what they're signing up for.
Daily UI 027 :: Dropdown
This dropdown allows a user to access other important info such as contact support, account info, and settings. It's simple and straightforward yet very functional.
Daily UI 028 :: Contact Us
This contact form is concise and enables users to easily get in touch with the company. Regardless what a users prefers when it comes to contacting someone, this form offers two main options, email and phone. If a user doesn't want to submit a form right away they can save the company's email and reach out later. The design isn't overwhelming and the font and color is welcoming to every user.
Daily UI 029 :: Map
This is Mappy. Mappy allows users to easily search for restaurants, parks, stores, and more. Users can choose between car, public transport or walking so however they prefer to travel, they can find the best routes. This map application is designed to be easily understandable and not overwhelming.
Daily UI 030 :: Pricing
A well designed pricing page should be concise so that a user understands what they're paying for. Offering various plans at different price points allows users to choose the most suitable plan as well as a plan that is within their budget.
Daily UI 031 :: File Upload
This is designed to be a popup window for an app, website, and or software allowing users to easily upload necessary files. After selecting the file/s, the uploading process begins automatically and a progress bar appears informing the user the completed percentage.
Daily UI 032 :: Crowdfunding Campaign
Fundy is a great way to support organizations, charities, events, projects, and so much more. Each individual Fundy campaign page gives lengthy info about what you and other are helping support, as well as statistics on total money raised, the percentage of the set goal that's been funded, and how many backers have chosen to support the campaign. Supporting campaigns with Fundy is easy and allows a user to feel good knowing they are lending a hand to whatever cause they choose.
Daily UI 033 :: Customize Product
For this product configuration/customization page, users are able to choose the color of their new car. As a user switches between available color options, the digital version of the car updates to display the corresponding body color. a back arrow in the top left returns to product page, and a lower continue button brings the user to the next configuration options. This product customization page is concise and minimalistic.
Daily UI 034 :: Car Interface
For this challenge I wanted to make a minimalistic interface that any user could easily navigate. Simple buttons and icons achieve just that. Each UI has a customizable rgb background color. The digital speedometer is located in the top left of the interface. To toggle between park, drive, reverse, and neutral. The main portion of the interface features a map, access to music, games, range and trip info, and streaming services. There's also toggles for AC, heated seats, and audio volume.
Daily UI 035 :: Blog Post
This blog post preview is concise and stylish. This preview includes the post title, a header image, preview text from the post's body, the author, number of likes, number of comments, a share button, and a read button to open the full article. This blog post preview is exactly what a writer would want as it allows for readers to get a glimpse at what the post discusses.
Daily UI 036 :: Special Offer
This special offer pops up when a user enter the app. The offer screen incorporates two main shades of blue (#0C24FF & #092CE1), each of which are warm feeling, drawing the user to read what is on the screen. Below the description of the offer is a claim offer button that's concise, and because of the proportion of button it would be difficult for a user to miss it.
Daily UI 037 :: Weather
This weather app is extremely concise because it's for a smart watch. A simple icon immediately informs the user of the current weather outside such as sunny, rainy, cloudy, windy, etc. Below the weather icon is the current temperature. Further down is the user's current location, followed by an arrow leading to other weather data and saved locations.
Daily UI 038 :: Calendar
This calendar is very minimal, although very informative. The general content of a calendar app is pretty straight forward, therefore it comes down to designing a stunning theme and fully accessible features. In the top left is an arrow that expands the view of the calendar from a singular month to multiple. Below is the calendar itself followed by a scrollable list of all upcoming events. To add an event, a user would press the plus icon in the bottom left. By pressing the search icon in the bottom right, a user can search all previous and current events.
Daily UI 039 :: Testimonial
This testimonial is very concise, but also eye catching to users who want to read them before purchasing a product. The purple background, met with the white color used for the testimonial card, compliment each other very well.
Daily UI 040 :: Recipe
This recipe app allows users find recipes for their favorite meals, explore new ones, and save time. The home page of this app includes a search bar with customizable filters, popular recipes, and popular food types. Quick access to recipes based on food types makes search for a new recipe fast and enjoyable.
Daily UI 041 :: Workout Tracker
This smart watch app tracks a user's distance in both miles and steps, as well as the total flights they've climbed. Below the distance stats is the heart rate display. For the main UI colors I chose blue and black because they compliment each other very well and the neon blue inspires energetic users to stay active.
Daily UI 042 :: ToDo List
This mobile app allows users to easily manage every task they need to achieve. Using simple buttons a user can mark tasks as completed and add new tasks to the list. The use of black and white for the UI allows the design to be both modern and minimal.
Daily UI 043 :: Food/Drink Menu
Digital menus are a great way for users to save time when ordering from a restaurant. A user can choose their desired meal before even arriving at a restaurant, therefore a digital menu should be concise. A digital menu that's overcrowded can cause a user to feel overwhelmed and not important. A complex UI could ultimately change the users mind on where to order from based on how easy it is to a restaurants digital menu. This menu is modern and concise, keeping the user in mind.
Daily UI 044 :: Favorites
These profile cards feature a favorites icon for users to mark their friends, family, etc. as favorites, an alternative to follows. A user can mark a profile as a favorite by pressing the greyed out star. After a profile has been added to a user's favorites, the grey star will become gold. This design is simple, different, and effective.
- Front-End Development:
- - Html
- - CSS
- - JS
- - Laravel
- - Extensive work using Shopify
- - Experience using Squarespace
- - Responsive Web Design
- - Rapid Bug Fixes
- UX Design:
- - Research
- - Writing
- - Wireframing
- - Design
- - Prototyping
- - User Centered Research, Design, Testing
- - Experience using Figma & Adobe Xd
- - Social Ad Campaigns
- - Mailchimp Campaigns
- - Photography
- - Graphic Designs
- - Music Producing / Songwriting
- - Digital Photography & Cinematography
- - Hardcore Tennis Player
Part-Time : 2020 - Present
Designed & developed a modern, user focused website while using graphic design skills to create high quality ads used in the company's various marketing campaigns across their social media profiles.
Part-Time : 2020 - Present
Selected to lead the sales marketing & customer experience for CQC, using and increasing my knowledge of Mailchimp email campaigns, website development and maintenance of a Shopify and Squarespace site, as well enhancing their social media presence.
Harvard CS50 - Introduction to Computer Science
Goldsmith's, University of London - Mathematics for Computer Science
Google Professional Certificate - UX Design