Day 2: Fluent Feedback Hub
Today is day two of my 30 Fluent Designs in 30 Days Challenge, the day started out rough but ended up turning out pretty cool.
Several people have requested that I design the Windows 10 Feedback Hub, it’s a critical app for Windows Insiders and so I though I’d take a crack at it.
This is a big application, I only focused on the “Feedback” page — there are numerous other pages and design requirements but I stayed away from those for now. Check out the final concept design I came up with…
As a refresher, here is the default Feedback Hub in use today…
Let’s explore the “issues” with this design.
- This page is white and sterile, it’s so boring to even look at.
- There is a lot of wasted space on the right side of the screen.
- Text in general can be quite boring and this page does nothing to make it interesting.
- There is mixed list items, some have just the title and some have title and additional text (this is up to the user who submitted it). The problem is that it makes the page feel broken.
Here is my thought process behind my concept design.
- To make the page feel a bit more alive, I pulled in some color, both in accent colors and with Acrylic and letting the desktop image come through.
- I wanted to include the new “Sets” feature as that will be coming to everyone in the near future.
- I opted for a horizontal navigation rather than the vertical one, with really only 5 core navigation items, having a huge sidebar just didn’t make a lot of sense to me.
- The primary navigation is now horizontal, with the back button off to the left and User Settings, Profile, Name and Profile Photo.
- Selected navigation item has a nice accent color along with a nice subtle glow effect.
- I removed the big two “pivot” items for “All Feedback” and “My Feedback” and simply included that in the main filter system for consistency.
- The “New Feedback” button I shortened the label and made the button green to make it stand out and to imply action. This could be blue if wanted to stick with consistent theme color, either way.
- The large search box looks more elegant than the original one and fills the extra width nicely.
- As I mentioned before, the original design has a lot of wasted space. I decided to go with a 2 panel layout, but a grid layout for the feedback items.
- The grid layout allows us to see more feedback items at one time. I removed the “extra” paragraphs and stuck with the title only. This allows for a consistent grid item size. Lastly, it allow the content to flow and scale to fill the entire useable space no matter what size device you are on.
- On the far right, I have a refined sidebar. First off I added a block of color with some of the user information.
- Next, I pulled the same basic design from the “Home” tab and dropped it on this page as a default filler across the app. It seems to have some useful things in it so why not make it global.
Ok, so that was the default feedback view — now let’s look at an “Active” card…
- When a card is hovered over or clicked, we have this scale, depth and secondary functionality pop up.
- This active state allows the user to see how many upvotes the feedback has, if the user clicks the blue bar it adds an upvote.
- If the main body card was clicked then the sidebar changes to show the details of the full ticket item.
- The sidebar has all the relevant information, Ticket Title, Categories, Full Description and of course comments and other useful information.
- Here is what happens when the user clicks the “Upvote Feedback” on the card…
- As you can see we change the colors on the card and the sidebar to indicate that you have taken action on that feedback item.
- There is one more final view…
- When a card is clicked again, it scales back down to the default size.
- The sidebar reverts back to the default content.
- The card background is more transparent as it has now been viewed.
- And lastly, since we voted for that Feedback item, we have a simple green indicator at the bottom of the card.
- Bringing the whole effect together, check out this poor animation of all the various states put together… (used the prototyping feature in Adobe XD)…
- These have just basic dissolve transitions, in theory you could do some really nice effects using Windows UI Composition.
Wrapping Up
When I first started this design it was a real battle, I couldn’t get anything to look good. I ended up wasting about 3 hours on it, decided to take a lunch to take a break and when I got back I jumped right back in and things started coming together nicely.
I think that is about it, it’s not quite as sexy as Day 1 Design, but most applications are more about function than they are about being artistic.
Source Adobe XD File: Download (.zip)
Thanks again for following along, leave your feedback and suggestions.
Micah
