In this folder you should be able to find the following:
- Heuristic Evaluation (google slides)
- Affinity Map (image)
- Proposed reorganization of the settings page (site map image)
- Persona (image)
- Prototype (figma file)
We didn’t want to needlessly overhaul the UI as neither the client nor the users seemed to find it a hindrance. As a result, we won’t be recommending completely rebuilding aspects of the current website that are only slightly different in the prototype (the modal windows for adding content, the search bars for the information tables, pagination, etc).
Something we would insist on changing is the highlight color as the dark green on the dark blue presents an accessibility problem.
Dashboard:
Problems tackled:
- Freeing up vertical space by removing images
- Add in customizability
- Reduce button redundancy
Problems to face:
- Make sure the design isn’t trying to load too much at once
- Balance freedom of customizability with admin restrictions
- Removal of images makes the page less engaging for new users. Feels a bit bland.
One thing we wished we had more time for was experimenting with the dashboard. The current iteration focuses on maximizing the space on the page, as what’s currently live uses up a lot of vertical space on images instead of information. We also had some user feedback about wanting to be able to see all their items at once and, more importantly, be able to add and customize areas to be able to track what they wanted (the example being a tab where they could track contracts their co-worker made).
Some concerns were how long it would take to load 3+ tables at once, and how much freedom you can even give to users that aren’t admins. Chris suggested experimenting going back to tabs (below)
The only thing I would note about the tab system is that the original page suffered from some button redundancy (Make a Request button, and also an Add New Request button). My guess is that only happened because the “request” tab wasn’t the default page and users liked having the option handy. Something to keep in mind just to make sure we don’t reintroduce a problem we tried to solve away.
Sidebar:
The main thing to note here is we just wanted to find a more graceful way to open and close the bar that wouldn’t put the arrow next to the back button.
Before:
Images:
Problems tackled:
- Freeing up vertical space
- Images drew the eye to the image instead of the text
- Size, spacing, and photo choice reminded one user of cheap advertisements
Problems to face:
- Retain the engagement that the images provided the user
In testing the images were quite polarizing, with some users expressing distaste with them immediately and one user suggesting we add even more. We tried to strike a balance with putting the text over the images, but the blue filter makes them much more muted. We don’t want to lose what they were doing well even if we felt that they ultimately detracted from the initial design.
Horizontal Menu Scrolling/ “More” Button:
One of the most universally disliked features of the current site is the amount of horizontal scrolling that you had to do when searching menu options. We tried to show every menu option we could by reducing the size of the buttons, but ultimately built in a dropdown for times when there are too many options to fit on the page (hopefully built to be responsive to changing window size).
Another direction we almost went in was just having a simple dropdown menu as default, so if the more button isn’t working that’s another option.
Settings:
Instead of having the users page be the default with a lengthy horizontal scroll, we built a new settings dashboard for easier navigation.
Organization: The current groupings and headers are just our best suggestions. Someone with more knowledge of compliance and admin might have a better idea of how to group them, we just wanted to provide a template to make moving them around easier. The Settings Site Map jpeg will show the full suggested layout.
Icons: We also wanted to find a good icon library to match with all the settings options. We had some concerns of redundant icons with those in the sidebar, or how to get icons for more abstract settings options. There was also the concern about having too many icons, as while there are comparative programs with icons in the settings (that look great) they typically don’t also have that many icons in the sidebar. Not a concern that would stop us from trying it out, but something to consider if moving forward with more icons.
Global Search:
Something that came up in the research and usability tests was the desire for a global search button. A bar at the top where you could type a company or consultant’s name and be able to navigate directly to the relevant information.
There were quite a few logistical concerns with our initial iteration as we wouldn’t know how much would come up with one name since there are so many areas and functions in the system. One extra click to get to consultants or contracts didn’t seem like a big enough hurdle to justify adding this into the scope of our current design with the time frame we had, but is something to consider in future iterations.
We hope this helped make sense of the figma designs and deliverables. Best of luck in future development of the system!