Daily UI: Implementing Feedback
My #dailyui journey, and how I implemented feedback to improve my visual design skills.
Also: Endless gratitude to Josh Bruce and Dennis Cortés for your thoughtful and consistent feedback. You push me to grow.
#001 Sign-up Page
“Feedback — Love the color palette and graphic, I feel ‘grow’, for sure. Dig the validation also. Question — What if I land on this page somehow and already have an account?”
“The text is a bit hard to read, could you increase the blur on the background image?”
After increasing the background blur, I threw in the “login” microcopy at the bottom. I would imagine a screen before these that gave the user an option to sign up or log in, but providing an easy way to change a course of action is definitely useful.
Design Principles Addressed:
- Visibility
-Contrast
#002 Credit Card Checkout
Feedback Pending
#003 Landing Page
“I really appreciate the radial pushing force to the center, curious shifting the center to the sign up would do (a/b test?).”
Here, I moved the sign-up button right to the visual center of the image. I also increased the darkness on the opaque overlay to increase contrast, seeing that this space was very busy (hands, colors, movement).
Design Principles Addressed:
-Direction
-Contrast
-Visual Hierarchy
#004 Calculator
“There appears to be two minus signs? What happens when the result gets really long?”
This one was simple to adjust: replace the second minus with a percentage sign (a silly mishap) and re-align the values screen at the top to account for larger equations.
Design Principles Addressed:
-Consistency
-Learnability
-Alignment
#005 App Icon
“App icon for what device? Transparency and outcropping may not be possible. Just FYI. Very nice.”
“Decide what type of app icon you’re using and push the content inside those parameters. Also, if you’re going for a “scrabble effect,” be more intentional.”
Taking my instructor’s advice, I created a rectangle with the exact size and border radius of an iOS icon. Working within this space, I realized that my first approach didn’t actually look that great within the constraints. While the second iteration is more minimal, it still has the scattered/3 dimensional aesthetic of my original icon.
Design Principles Addressed:
-Constraints
-Consistency
#006 User Profile
“Recommend tightening the kerning on the letters or increasing the white space around the image. Might make it stand out or fit in more as a letter/part of the word.”
“Or try creating an intentional overlap of the profile pic and the adjacent letters. Nothing too crazy, though. Also, the left alignment of the headline doesn’t quite meet the left margin”
On this one, I decided to decrease the kerning and change the font of the “About” background. After playing with the original idea (picture for the ‘O’), I abandoned the literal approach. I wanted something simpler to the eye.
Design Principles Addressed:
-Typography
-Alignment
-Visual Pollution
#007 Settings Page
“What happens when the user enters the wrong information or forget to fill out a field? What does that error message look like? Also, do you want them to be able to change their profile picture?”
I tried a lot of different tactics on implementing the error message here. I wanted to go with something minimal, and utilize the button as a place to communicate task completion. Someone suggested outlining the missing text field in red. This brought up questions of color theory — I know that red suggests error and would draw the eye, but a flat red didn’t feel like it matched the ui style. I ended up going with a standard red at about 25% opacity.
I also played with the location of the error message. Should it be a snack bar at the bottom? A modal? Should it be above or below the missing information. I ended up with adding it as microcopy to avoid overcrowding the user if they missed too much information (all of the text boxes were empty). This way, they would get a spatially consistent point of feedback on the places they missed without too much load.
For the photo upload, I went with a standard indicator used by many social media apps — a simple border on the photo to imply interactivity.
Design Principles Addressed:
-Feedback
-Errors
-Color Theory
-Proximity
#008 404 Page
“I like the call to action and the slight humor. I would suggest going higher fidelity on the stick figure/question mark. If you’re going to go for a “sketching” vibe, you want to commit. Also, saying “we” are lost might imply that the user has done something wrong.”
Instead of changing the copy on “We’re all a little lost,” I decided to remove the question mark on “Try a search.” I felt like removing the “we” from the message would dampen the human, humble tone I was aiming for. It seemed to me the title copy in combination with the question mark behind, “Try a search?” made the tone more uncertain than I had intended. When I removed the question mark, it maintained the tone, while giving the user a clear and certain path forward.
What’s more, I wanted to give more movement to the stick figure. I tilted the question mark and used a vector instead of font. With the yellow, cartoonish details and the movement in the face, the stick figure is vitalized.
Design Principles Addressed:
-Direction
-Tone
At this point in the process, I realized I wasn’t getting the kind of feedback I needed. I consulted with my mentors and collected some valuable insights:
- Join local groups on Slack that host design reviews. Ask for feedback on your daily UI’s — but be sure to give feedback in return.
- Be prepared to sift through opinion vs principle
- Start challenging yourself to design in ways that are opposite to your “style.” Ditch the pastels. Use more white space and bright colors.
#009 Music Player App
“First, the dark purple in the header has poor contrast against the black. The carousel on the album cover seems irrelevant to what that design pattern implies. If it’s the same album with different songs, I wouldn’t suggest using that approach. The plus button feels like a volume increase, especially so close to the time scrubber. The accent on the scrubber is nice, but use it in other places to implement consistency.”
“When you’re thinking about using gradients and shadows together, you have to be conscious of where your light source is coming from and how that mixes with the direction of your gradients. There should be uniformity and consistency across all elements. Lastly, the background image is distracting. I didn’t even notice it was the album cover until you told me.”
I’ll be honest — I struggled with this one. Mostly, I found it difficult to design something that wasn’t a direct copy of other interfaces. The first things I changed were the issues with contrast, proximity, and color theory (with light sources). These changes definitely helped create a more enjoyable and understandable look, but I still struggled with laying out the interface.
I decided to move my design onto an actual device screen to get a better understanding of how the layout would look in context. This aided me in my layout, margins, and giving things room to breathe. One thing I also realized in my initial design was that my repeat button didn’t export from my sketch file. I’m not certain why, but I just decided to redesign one that matched my interface’s aesthetic in the end.
Design Principles Addressed:
- Contrast
- Proximity
- Light/Color Theory
- Uniformity
- Consistency
#010 Social Share
“The body font feels incredibly small in comparison to the rest of the page. In addition, Didot as a body font is difficult to read. I would recommend making it bigger and choosing a better Serif for the body.”
“Looks like your spacing is off between your social icons. If you’re intention is a FAB button, it doesn’t follow the guidelines. The placement is outside of the frame, the shadow should be bigger, the shadow should reflect the light principles implied by the gradient, and the shadow should reflect the actual color of the button.”
Personal Notes: Yes, those are still pastel colors. Yes, you should change them.
In an effort to work more outside of my comfort zone, I redesigned the color palette. I’m making it a personal goal for the rest of the project to push myself past my own likes and diversify my designs.
In response to the copy, we had a long conversation about serif vs sans serif in body text. It wasn’t necessarily serif as a choice that made it unreadable, it was the specific serif font I had chosen. After looking at other websites I determined that Georgia was safer. I used that font and bumped up the size, then increased the line height to give it more breathing room.
I also removed the gradient from my buttons, fixed the spacing, and edited the shadow per FAB guidelines (Material Design).
Design Principles Addressed:
-Typography
-Contrast
-Color Theory
-Material Design
-Spacing
More Personal Notes: It seems that Contrast, Color Theory, and Typography are my biggest weaknesses thus far.
#011 Flash Message (Error/Success)
I’ve been unable to receive much feedback on this one so far, so I decided to analyze previous feedback and deduce how it might apply to this design.
First, I lessened the shadow intensity on both cards, as well as the background saturation. In a later design, it was pointed out that the intense gradient on the background distracts from viewing the actual design.
I also decided to remove the secondary button on the success pop-up — it seemed relatively unnecessary, as most sites have tracking information on the home page. Ideally, this button would do both.
By removing this button, I was able to align the pop-ups on the same grid.
Lastly, I created more hierarchy in the typography. On the initial design I used Avenir Next Condensed Bold on the buttons, which almost seemed too dense for the space. I decided to use News Cycle instead — as it had a similar style. I also increased the size and weight of the headers.
Design Principles Addressed:
-Visual Hierarchy
-Light/Color Theory
-Typography
-Spacing
#012 E-Commerce Check-out
Pending Feedback
#013 Direct Message
Good times for the most part. Not sure on the monochromatic color palette. For example, the Messages app on iPhone can tell you whether the message is you (gray) or the other person (blue or green) and what network they are on (iMessage or Non-iMessage, respectively). Light gray with ellipsis = someone typing.
Also, from a business perspective, the bevels on the corners (and other custom UI elements) might be difficult to do outside of the UI elements provided by the platforms (unless this is web). So, being able to scale the design back to the more default UI elements provided by the platform might be worth considering.
I struggled with this one. Mostly, it was difficult to design something that wasn’t a direct replication of standard chat windows (iMessage, Slack, etc) — that also didn’t stray outside of our mental models.
Direct Messager Interfaces are pretty standard across most mediums. In my original design, I tried too hard to implement something unique. So on my re-design, I toned down the colors, widths, and sizes on many elements. I ditched the background and kept as much white space as possible, using the dark aqua as my primary color, with grey as an accent.
Design Principles Addressed:
-Mental Models
-White Space
-Contrast
#014 Countdown Timer
I wish I had more context as to where this would live and what the menu would be, but I think my main point of feedback would be the typography and hierarchy.
The typography feels a little outdated to me in terms of trends. San Francisco is a go-to font for me if you want a safe bet that’s also on-trend.
From this I can’t really tell what the timer is for or get much info about it, I’d recommend a title/logo if this would live on a website. Or for example if this is a live show of some sort than a short blurb about it maybe.
My goal with this redesign was to give the user more information about where they were, why they were there, and what they could do next. I added the “sign-up” option to increase user engagement, as well as the top nav to give more context and options. The ellipse menu on the original design was more of a mobile element used for smaller spaces, and did nothing to improve the interface/usability on a larger screen.
I also updated the typography for a more modern look, specifically the condensed weight on the timer. In addition to a sharper and more contextually appropriate background image, I added a scrolling cue with the bottom of the page having a slightly lower alpha channel. This way, the user knows exactly where they are and all the possible next steps; in addition, the business could add more content to their home page than just the CTA.
Design Principles Addressed:
-Typography
-Hierarchy
-Context
-Call to Action
#015 On/Off Switch
Might be more animation than is necessary. If it’s used with a thumb, most of it won’t be watched. Not a dealbreaker, of course, it is the little joys that make life worth living as well and knowing it’s there might be worth it. Having said that, it’s sometimes good to think in terms of, “If I had to delete something, what would it be.”
1. Prioritization
2. My favorite quote on design: Elegant design isn’t running out of things to add but running out of things to take away.I think any critiques on this would have to be done relative to what the Switch is doing. Only then can we tell whether or not this would work, cause friction, enhance the interaction, or etc. From just a visual design on the surface perspective, looks fun and interesting.
I decided not to redesign this particular animation. We spent a day this week discussing invisible design, and how animations play into meaningful experiences.
I appreciated the above feedback that any critiques on the design would need to consider the full context. Later in this project, I will implement this switch into a larger interface to determine what adjustments need to be made.
Design Principles Addressed:
-Invisible Design
-Interaction Design
#016 Pop-Up Overlay
I received no feedback on this particular design, but after looking back I realize that it was a throw-away. I didn’t put much thought or intention into the initial solution, and I knew eventually I would need to go back.
Lately, I’ve been using this app called Sleepiest to help me get to sleep at night. I am a HUGE fan, and so is my well-rested body. I decided this would be a great opportunity to practice designing something within a defined brand-ecosystem, and implement small design changes that I think might improve the UX.
Generally, the app lets you know there is a new story on your “dashboard/home” page, and you have to go to the stories tab to find the story. In my redesign, I made a clear CTA to listen to the new story. I also moved the “x” button down the screen, closer to the user’s thumb than they normally put it (far upper-right corner), and rounded out the button and story photo. Softening the edges created a calmer look and feel than the normal squares that are used in the app do now.
Design Principles Addressed:
-Tone
-Look & Feel
-CTA
-Thumb Zones
#017 Email Receipt
The background plate seems to cause too much vibration for me to focus on the content. Consider it this way. When you go into a museum, how much attention do the walls call out for? Similar in design, we want to call attention to and not away from where we want the viewer to look, yeah?
Aside from that, would check to make sure the contrast of the body copy is WCAG 2.0 compliant. I’m not sure how I feel about the grid and breaking of it. Three vertical columns with three (or four) rows).
There was a lot of alignment to clean up on this design. I deeply appreciated the feedback on the text color and the column alignment, as these were things that I felt looking at the design but couldn’t articulate in my head.
So I began by getting rid of the background completely, then applying the layout grid to my design as I worked. No matter how much I moved pieces around, I couldn’t find a way to include the image in the receipt. Then, I realized that if I *did* include the image, there would have to be a separate design for every single thing ordered from the site. This would have been a huge load on designers, for really no reason at all.
Once I got rid of the image, I wanted to find a way to highlight the order information, but also give room for a personalized message (as I know Sam and Sierra would love). I made their names and the recipient’s name large and italicized in an effort to give it a more “human” touch.
I also increased the size and pigmentation on the body copy for the necessity of accessibility.
Design Principles Addressed:
-Column Layouts
-Visual Hierarchy
-Consistency
-Accessibility
#018 Stat Analytics
I think hierarchy here could go a long way for you! Playing with the sizing, placement, font weights, and even adding in some grays or an accent color instead of all black for typography are some things you can try.
Instead of hiding things in two menus (top left and top right), maybe break them out into a tab bar for a user to navigate up front. This lets the user have other places to go and not have to guess where things are and frees up space from hiding everything in a hamburger menu (it’s better to organize tab bars well and have sections or places to navigate there instead of a hamburger menu [hamburger menus aren’t great for accessibility and frustrates users typically]).
For this redesign, I spent some time upfront creating a more standardized hierarchy for my color and typography. (I used this wonderful article by my friend Dennis for reference.) In addition, I sketched out what information a user might want from this view, and how easy it was to access it. I valued the feedback about the user having places to go, and also realized there were no real points of interaction across the interface.
Instead of transitioning my hamburger menu to a tab bar, I kept the drawer icon (with a more modern look), and moved the interactive elements closer to the bottom of the screen (within thumb distance). This way, a potential user could easily pin-point their statistics without having to move anywhere off the screen. I also increased the font weight of the most valuable information ~ total views and peak times ~ and moved it to the top of the screen. In addition to changes in typography and architecture, I added small details to refine the view (lines extending up the chart, and a singular point for peak times.)
Design Principles Addressed:
-Information Hierarchy
-Typography
-Color Theory
-Gestures
-Interactivity
#019 Leaderboard
Pending.
#020 Location Tracker
Pending.
#021 Home Monitoring
The icons aren’t clear as to what they do/where they will take me. I’d consider labels for them in this case. As a rule of thumb, labels on icons and inputs should typically be added 90% of the time unless it is extremely obvious or a very common pattern
The colors throughout seem to be a bit inconsistent with different blacks and blues with the added yellow and red. I understand the use case for the red and yellow as a key but in this context it feels like it is for different heat temperatures or something. I’d keep variations of the same color for cases like this unless you need to use a specific color for something (a warning, a brand color, etc.).
The spacing feels a bit inconsistent as well, a general rule of thumb that is helpful is using an 8pt grid and having the same padding and margins (spacing) around elements horizontally and vertically. You did this with the content inside the top card, but the spacing around the bottom cards and between the top and sides of all the cards seems a little off visually in my opinion.Be careful with your accessibility for color contrast in a few spots as they would be hard to read/see for visually impaired users.
I think overall you nailed the content and what would be useful, but try and think more as to what the most important elements are in the hierarchy here. I’m assuming this would be on the wall in someone’s house or on an iPad, people would typically want to see the temperature first and foremost and be able to easily change this. Personally I would make the temperature front and center and provide an easier way to change the temperature (+/- instead of a slider).
I decided to scrap most of the elements of my first design in favor of something cleaner and more modern. I tried to imagine what I would want to see and control immediately if I were using the interface (along with asking a few friends what they would want to see). I reorganized the information hierarchy, as well as add a space for notifications (any applications linked to the device, energy saving tips, etc).
My biggest concerns for this redesign involved: improving my color palette (using only variants on the primary color and the brand’s “black”), create more hierarchy with text, and improve the accessibility (adding labels to icons and ensuring that all of the contrast colors were accessible via colorable).
#022 Search
Pending Feedback
#023 Onboarding
Pending Feedback
#024 Boarding Pass
“Couple of consideration considerations: When aligning with strings, try to choose the longest you would deal with in that font. For example, August is 6 letters long. September has nine. What would happen in September? Would everything shift to the right? Any solution is fine, the consideration is the important part, which you totally may have already done. :)
The hierarchy of information feels odd to me for my own traveling history. What information is helpful to the passenger? What information is helpful to TSA and the flight staff? What information overlaps, satisfying both? Is digital or physical? Curious about the perforation and whether that is a component of the overall flow or there as a skeuomorphic feature.”
“One consideration I know is important to airlines is the printers they have available. They are simple and B&W. How much are you willing to adopt your design to accommodate current infrastructure?
Also, for flight number, what about airline name? Would you use name or code? If name, you have the length issue again.
Oh, and what about different languages? Could the design take into account ESL or even non-English speakers?”
This was a fun and refreshing design challenge from start to finish. It gave me a lot to think about from multiple perspectives, especially during my redesign. The choices I made were largely in response to balancing the User/Flight Staff needs, creating a more responsive layout, and considering the project constraints.
I took my design into grayscale to be certain the contrast was accessible, and I added more TSA-relevant information to the very top of the pass — airline, date, and location. The information in the gray box — passenger name, boarding group, and boarding time — seemed most relevant to the user (granted, from my own travel experience). Increasing the space and alignment consistency across groups also helped create more responsiveness in the overall layout. While the bottom row of information will likely not be any longer, the two above have room to grow without outgrowing the ticket itself.
Design Principles Addressed:
-Information Hierarchy
-Skeuomorphic Design
-Responsive Design
-Constraints
#025 Smart TV Interface
Pending Feedback
#026 Sign-Up Page
Pending Feedback
#027 Drop-Down Menu
Pending.
#028 Contact Form
As with some of my previous designs, I realized that my initial attempt didn’t consider the context of the design enough. Without the context, the design is aimless at best.
For my redesign, I focused the contact form around a current project I’m working on — redesigning a massage therapist’s website. We spent a lot of time refining how the booking would happen, what colors and tone he wanted to convey, and what information he would need from any potential clients.
In my original design, I failed to integrate the grid system, spacing, contrast, context, and more. In retrospect, I think that I ultimately got attached to an idea and when it didn’t come to fruition the way I’d hoped, I didn’t allow myself the honesty of admitting that.
Design Principles Addressed:
-Grids
-Spacing
-Contrast
-Context
-Consistency
-NOT ALL IDEAS ARE GOOD IDEAS!
#029 Map View
Looks great! But watch the redundancy on info. You’ve got “Australian Capital Territory” or “ACT” in some form 3 or 4 times (including the map). If you can find a solution that takes care of it all to represent it just once, you have more real estate to show other things. I know Google Maps is one of the only other options people use out there, but despite having a monopoly on the industry, they do a really good job of anticipating why you’re looking at the certain place on a map. They show me current weather, a brief overview of the area (from Wikipedia), and even offer travel options (hotels, car rentals, flights, etc). If I’m looking at a map, I’m not sure I’m gonna care too much about the governing political body of the area, personally. Looks great though!
Ideally I would love a simple way to select what info I want displayed on the map. Maybe selectable overlays for various census items (like Zillow does somewhat), weather, roads, businesses, parks, borders, etc. One thing I think we all suffer from is what a friend calls “Yet Another” syndrome. One place for weather, one for real estate, one for general info, one for trip mapping, etc. having a true one stop shop for all things map/geography related would be awesome. So this trick is how do you build in lots of configurable items without overwhelming the user or stealing valuable screen real estate?
For this redesign, I addressed the content available first and foremost. I removed any redundant information and offered applicable buttons to easily connect the user to relevant external sites (Zillow, Mapquest, Wikipedia). I also changed the typography to similar font families (FreightSans and FreightText), as well as adjusted the color of the fonts to increase legibility and harmonize the color palette with the action color (the bright green).
Design Principles Addressed:
-Typography
-Color Theory
-Accessibility
-Content
#030 Pricing Page
Pending Feedback.
#031 File Upload
Pending.
#032 Crowdfunding Campaign
Pending Feedback.
#033 Customize Product
Pending.
#034 Car Interface
Good stuff! If this is to the right of the driver, I would contemplate changing the hierarchy of the radials - shrinking and placing the RPM close to the speedometer. I’d also think about increasing the visible click area for the controls on the bottom left (unless this is a big screen). I really like the color palette, radial designs, audio information and time!
Visually looks awesome! Modern, clean, professional. fairly minimal. I agree with Kevin, that context is KEY in auto display design. I REALLY like my jeep display — speedometer is right behind the wheel where i can see it without taking my eyes off the road.
For center display, I want the clock to be bigger. Also i have NO idea why RPM’s are still displayed. It feels like an antiquated design that was useful for manual cars, so you could see (along with hear) when to shift. “Engine is overheating!” is a MUCH more effective communication tool. Most of the time your RPMs are fine and SO much real estate is dedicated to it! Also i think the main menu is pretty good, but contrast is kinda low. Also i’d be curious if people recognize those icons in lower left? Depending on how big the display is, the closeness of all the up/down arrows might get accidentally pushed. All this being said, I REALLY like talking to Siri or the car with voice and not taking my hands off the steering wheel.
For my redesign, I decided to split the views into a behind-the-wheel view and a console view. This allowed me to focus the context of each screen’s content. I asked myself what I would want to be most easily accessible when I’m driving. Navigation was a definite, as well as the standards like fuel, speed, and headlights.
I enlarged the touchpoint areas for the arrows on the console view and spread them out for easier interaction points that would hopefully be less distraction on the driver. I also updated the visual design, adding a more modern typeface, improving the contrast, and making the navigation match a standard mental model.
Design Principles Addressed:
-Contrast
-Context
-Typography
-Visual Design
#035 Blog Post
