Daily UI
Daily UI is a series of daily user interface design challenges, meant to help you become a better designer. Below are my attempts at some of the challenges, as well as some notes about my design process and lesson learned while completing the challenges.
My Process:
My background and prep work for each challenge is done handwritten in a notebook. After reading the prompt, I first decide a project that I could create that relates to the challenge. Once I have a basic scope for the project, I write down a list of all of the features or elements to be sure to include, thinking especially about the user of the site or app and what they might need. I then draw a rough wireframe sketch before creating the prototypes below in Figma.
Lessons Learned:
-
It can be difficult to come up with a project for the very open prompts. Unlike a real project where there is a problem to be solved, these challenges are really about designing independent elements. To move beyond the basic UI challenge, I've been trying to move away from something too simple and often try to come up with a backstory or a whole product that could be designed, but just focusing on one element of the product based on what the challenge prompt is.
-
Sometimes the best way to implement a feature in a design is to do it the way it’s already being done by others. You don’t need to reinvent the wheel. If you get too creative or unique, it will confuse the users. The point of UX is to design something that users can easily use, and if the design is too unique, complicated and unintuitive, the user could get frustrated and leave.
-
Prioritization is key. It can be very easy to crowd the interface with too many elements, so as I complete more challenges, I find myself focusing more and more on prioritizing the most important features, which can, in turn, make the interface more accessible and usable.
-
On a more basic level, these challenges have made me a faster worker, especially when it comes to making the prototypes in Figma.
001: Sign-up
I've created a sign-up page for an imaginary event hosted by the Friends of Washington Park for a weekly clean-up volunteer event. In addition to the basic identifying necessities, I've also included a drop-down menu to allow the volunteer to choose which week they will attend the event, as well as a check box to allow volunteers to sign up to receive a newsletter from the organization. Overall, I tried to keep the form short and simple to hopefully encourage people to sign up.
002: Check-out
When designing a mobile check-out page, I wanted to make sure it was easy to see and navigate through the various necessary elements. I decided the process would seem simpler to the user if it was broken into three short components, each on it's own collapsible menu. This reduces the amount of things the user needs to see at any given time, while giving them an easy way to navigate back to an earlier step in the process should they need to update any information prior to finalizing their order.
003: Landing Page
I love when authors have websites to easily find out what other books they have written. For this challenge, I designed a website for author Alka Joshi, most known for her book The Henna Artist. In July the sequel came out, so I focused the website on promoting the release. To fit with the cover of the book, I wanted to use bold colors. Initially the white space was magenta to match the dress, but after receiving feedback, decided it was too much, so switched it to white to make the overall look a little bit cleaner.
004: Calculator
I wanted to challenge myself a little bit with this one. Instead of a simple calculator, I designed a mobile app that home cooks can use to scale their recipes up or down in quantity. From the home screen, users can choose to import a recipe from a URL or type it themselves. In the type-it-yourself module, users input quantity and ingredient name and choose a measurement from a drop-down menu. Once the standard recipe has been entered, the user uses the sliding scale to decide how they want the recipe to change (ex: doubled or halved). The final screen shows the scaled recipe, with options to share the recipe or start over on a new recipe. In hindsight, one change I would like to make is to increase the size of the boxes in the type-a-recipe module. They are a little too small for a mobile device.
005: App Icon
This challenge truly is a UI challenge, rather than user experience. I decided to make an icon for the app I designed for the previous challenge (004). I know that icons are best when they are simple, since the user will be seeing a small version of it. I used the red scales from the logo on a black background, leaving off the text from the logo on the app as text can make the icon too crowded and can be hard to read at times.
006: User Profile
For this challenge, I was inspired by the plant I'm attempting to grow in my living room to design a social media site for gardeners. It's a way for people to share photos and information about their gardens with others with similar interests or perhaps living in the same grow zone. This was definitely a challenge because I initially came up with quite a long list of features to include and needed to figure out the most logical and user-friendly layout for them. Overall, I'm pleased with the side column for basic information, and especially with the tab design to divide different types of information a user may need access to.
007: Settings
I've been known to enjoy a mobile game or two, and what is more of a classic than Tetris? For the challenge of creating a settings page, I decided to make game settings for a Tetris app. I made sure to include the basic setting features that all mobile games seem to have - sound effects, background music, and the option to pay to remove ads - as well as a couple of options that are specific to Tetris. I also wanted to give people a color option: light mode vs. dark mode. This lets people choose their preference, but perhaps more importantly, can aid people with visual impairments or other disabilities.
008: 404 page
When trying to decide for which site to design a 404 page, I knew I didn't want to make one for a site that already had one. I thought about the archival CMS, ArchivAuth, I designed that is featured as a case study here. I reused some of the elements (header, button) as well as utilizing the same style guide, to make the page feel cohesive with the rest of the site. I kept it simple, but included a button to return to the home page. In this case, it takes the user to the site home - the login page - rather than the repository home, where the home button in the rest of the website links because there is no guarantee that the user reached the 404 page from a repository page, which requires a login.
009: Music Player
My first time designing for a smart watch, I knew I needed to keep the interfaces simple to make it harder for the user to accidentally select something they don't intend on. Because of this, I've created four separate screens starting with the broadest category down to the individual song being played. The user can navigate between the screens by clicking to select an option on each - triggering a move to the next screen - or by swiping left/right from one to the other, using the dots on the bottom of the interface as the guide. The second and third screens are also scrollable with the item to be selected bolder/larger than the rest of the list.
