The great architect Renzo Piano once said, "One of the great beauties of architecture is that each time, it is like life starting all over again." The same could be said for product design.
The Daily UI website has 100 challenges which get sent to your inbox each day. These are my responses to those challenges.
For this challenge, I thought it would be interesting to design the UI for a car's interface display. Unfortunately, there is no standard screen size across the automotive industry, so I decided to focus on the screen in the best selling sedan in America: the Honda Civic
I also did some research into best practices for car interface UI. Some considerations applied include starting on a dark mode to reduce glare/distractions, placing emphasis on controls over media images for easier interactions and placing the controls on the left side of the screen for easier access for the driver.
Why mess with a good thing? AllTrails again it is!
Error pages are frustrating - no one wants to have their flow interrupted or have to repeat steps. Not when we live in the age of connectivity and instant gratification! I'm just as guilty.
So my approach with the design was to both use some topical humor to defuse the situation and apologize for the user for the interruption in service. To allow better user control, I included two possible actions in response: users can either try to connect again or go back to the previous page.
For this challenge, I stayed with the AllTrails app and looked at the ways I could make small edits to the existing design to improve functionality and flow.
I noticed that many of the setting items had only two options, so rather than having the user click into an additional page to make a selection, I used selection controls to keep the decision-making on one page.
I also considered the writing and reworded "Facebook Connect" to "Connect Facebook,' making it now an active state instead of a passive state.
Finally, I changed the text color on the CTA to black because when I tested the white against the green, it did not pass the WCAG 2.1 contrast requirements.
As an avid hiker, I use the AllTrails app to research potential hikes, track my progress on the trail, and keep a history of the trails I've hiked or marked as trails I'd like to hike. While I love the services that this app provides, I've found myself wanting to make tweaks to the UX and UI, and the profile was a great example.
Granted, I don't have the pro account, so it's possible the layout would shift if I did? But either way, the current layout feels like it creates unnecessary extra steps for the user. From a previously conducted competitive analysis and my own experience, I knew that users want to see more information upfront instead of having to dig for it. So I brought the categories currently Iisted onto the profile landing page in a snapshot form, with the ability to click into each one for more information.
The image on the left is the current layout (a screenshot from my iPhone 8+), the image on the right is the updated layout designed on an iPhone X.
Rather than designing the icon for an existing app or an existing app concept, I wanted to tackle a new problem, and a brand new book (edited by my roommate!) called Nala's World popped out to me. Dean Nicholson was on an international biking trip when he met and rescued a kitten whom he named Nala.
I envision the app would allow users to see the world through Nala's eyes and could be an educational opportunity in addition to a visual journey. From listening to Episode 6 of 99% Invisible detailing the principles of flag design, I already understood the same principles applied to app icon design: keep it simple and design for size. While it would have been ideal to include the bicycle in some way, it was ultimately more important that Nala be the main focus of the icon.
I also considered the possible backgrounds that it would be placed upon, knowing that users have a wide range of device backgrounds and made sure it would look appealing on each one.
We've all been there: you're out shopping for the ingredients you need for the recipe you're trying out that night and it calls for 2 cups of ricotta cheese, but the ricotta cheese container is measured by ounces. How much do you need??
You go to your handy Kitchen Calculator, choose the units of measurement you need, type in the 2 cups and hit enter. Voila! You want the 16 oz package of ricotta cheese.
Animal Crossing has become all the rage during Quarantine (does anyone know how much turnips are going for these days??) and we're all dying to travel somewhere, anywhere so why not visit my roommate's island?
All designs and facts are 100% real, and it's purgatory, so why would the colors be appealing? Enjoy your trip and for those Buffy fans out there, just wait until you see the rest of Spike's crypt. Drusilla's doll room is just the beginning...
Dream Address is: DA-5258-9992-6131
Known Supply is an ethically sourced and manufactured clothing company. Their mission is to introduce you to the people who make your clothes. I can personally attest to the quality of their clothing (I'm not getting paid for this) and I believe in their mission of social, ethical and environmental good so I decided to update their checkout page.
Design considerations included alternate forms of payment, reactive forms (combining the credit card information onto one line) and streamlining the information to fit on one screen. For this challenge I also used Figma.
I love Sleep Cycle. It's one of those apps that I cannot shut up about (seriously you should check it out), so as I was looking for something to inspire me, that's what came to mind.
Because I already use it, I don't remember what their sign up page actually looks like, so instead I used the branding from the website as guidance for what I thought it might look like, and created my own.
Specific design considerations included icons with labels, multiple sign up credential options, and simplified input validation in the form of the green check marks.
Upping the ante for myself, I chose to complete the design and prototype in Figma which was still very new to me. Having a strong base love of design programs, I was unsurprised to learn that Figma is a breeze to use and the crossover of shortcuts made it even more intuitive. I'm excited to keep exploring its capabilities.
