AMO Heuristic Evaluation
Heuristic evaluation for the external facing AMO app called the "trainee app" as a design challenge prior to my internship with AMO.
Design Challenge
AMOpportunites (AMO) is a web based marketplace that provides clinical training solutions to medical trainees, schools, and hospitals to increase access to U.S. medical education for international students. Students are able to purchase program packages that allow them to partake in a medical rotation in a U.S. clinical setting.
Timeline
Tools
My Role
1 Week
Axure
UX/UI Designer
Interactive Mapping of Design Heuristics
Determine the strengths and weaknesses of the current AMO trainee app marketplace search page, create a heuristic evaluation, and propose a redesign to improve the user experience.
Below is a screenshot of the page I conducted a heuristic evaluation on. Feel free to browse the screenshot and click on key hotspots to be taken to my heuristic evaluation thoughts.
Map Key
"✓" symbolizes that the design passed for the respective heuristic.
"-" symbolizes that they did alright.
"X" symbolizes that the design fails that heuristic.
Visibility of System Status - Pass
Strengths
While the system is reloading when a user presses on a popular category filter, there is a bar that radiates from right to left across the screen to let the user know the system is filtering the results.
Hovering over buttons changes the color of the buttons so you know you are hovering over a button, and also once you’ve clicked on a filter button it becomes circled and colorless so you know you’ve clicked on it.
Weaknesses
There’s not a way to tell what page of the search you are on because the search goes unlimited down the screen. Yes you can tell when the page is reloading those extra searches as you continue to scroll, but might be useful to have pagination so user can see what page of results they are on.
back up to interactive mapMatch Between System and Real World - Pass
Strengths
Clear icons that match and go along with the users mental model for filter, clear all filters, sort by. These help to orient the user without just having words.
Horizontal navigation bar at top also includes these kinds of icons which helps differentiate between the type of places you can navigate to. Marketplace overall very much resembles a marketplace.
Weaknesses
Some of the verbiage isn’t reflective of what the verbiage is supposed to represent. For example, months actually relates to the placement date, but could be confused with how many months the placement is for.
back up to interactive mapUser Control & Freedom - Fail
Strengths
Lots of options for navigation including filtering functions, search function, and tiles indicating various medical placements that will suit user’s needs.
Weaknesses
“Select filters” looks more like buttons that navigate to a place versus a dropdown menu due to the rectangle border and this can confuse users.
Users are able to sort by certain criteria, but aren’t able to search within a range, like with price for example.
Users aren’t able to search the entire database of placements by words, and have to use filters only.
back up to interactive mapConsistency and Standards - Fail
Strengths
Font and font color are universal across the platform promoting brand identity. Consistent placement of price and medical placement name / description across the tiles representing search results.
Weaknesses
“Select Filters” and “Filter by Popular Categories” is not consistent in style, and this could confuse the user on which is the actual filter and which is a button.
Having the blue color bubble for the filter by popular category “bundles” button isn’t consistent with the standard of orange buttons. Yes, it highlights this selection, but I think there are other ways of doing this without breaking the consistency of color.
back up to interactive mapError Prevention - Okay
Strengths
Clear message indicating to users when there are no options in a search with certain criteria. User is quickly able to clear all filters and start from scratch if they want to.
Weaknesses
Some title words don’t align with what the title is representing. Ex: Under “Select Filters”, the word “Months” is actually referring to date rather than how many months the placement will be.
Also, the search button could be mistaken to search anything on the website, versus searching for medical placements, and this could lead to error.
back up to interactive mapRecognition Rather Than Recall - Fail
Strengths
User doesn’t have to recall the state in which a city is in because the city filter still has the format ‘city, state’.
Icons in the navigation bar have a word next to it to reinforce the meaning so user doesn’t have to recall what the icon might mean based on other app conventions.
Weaknesses
Can’t tell if you’ve favorited a certain medical placement unless you navigate to favorites. Would be helpful instead to be able to favorite with a heart icon directly through the placement tile and unfavorite upon scanning results.
User only can choose one filter at a time for the popular category filter.
User has to remember if a particular placement is available under one filter and compare it to another filter versus being able to just recognize that the placement could have two potential categories and being able to search based on that.
back up to interactive mapFlexibility and Efficiency of Use - Fail
Strengths
So many options for how to look at particular types of placements based on filters for more senior medical professionals, and lots of recommendations for newer medical professionals who are flexible in the type of medical placement they can take.
Weaknesses
The popular categories filters only allow you to choose one filter at a time versus multiple filters. A user might want a ‘last minute’ program that is ‘research based’, but can only search for either research or last minute. Not super efficient because user will have to go back and forth scanning through each filter versus being able to have both filters activated at once and find what they are looking for.
back up to interactive mapAesthetic and Minimalist Design - Okay
Strengths
Nice clean white background. Rounded edges on the elements which makes the design very aesthetically pleasing. The actual medical placement cards highlight key information about the placement without going into unnecessary detail.
Weaknesses
“Filter by popular categories” breaks the minimalist principle because there is a large amount of space wasted on screen and dedicated to these buttons. The main function of the marketplace is to book medical placements, and so these opportunities should be front and center. I would recommend collapsing these popular categories down to only the top 3 popular ones.
There are also a lot of options at the top of the page to click on which could lead to user overload and them abandoning the application. The horizontal navigation bar either needs to be more distinguished from the rest of the filter options, or moved into a vertical space that can collapse if the user isn’t interested in viewing those navigation tools.
back up to interactive mapHelp Users Recognize, Diagnose, and Recover from Errors - Okay
Strengths
User can clear all filters if they accidentally click on a filter.
Under the filters option for cities, there are not only cities listed but also the state so the user doesn’t have to go back and click on state and try to recall which cities are in which state. Since our user is international, it’s probably helpful to have the city accompanied by the state too since there are some cities with the same name across multiple states. This will reduce error in an international user choosing the wrong location.
Weaknesses
Under select filters, when I click on medical specialty, I can only select one medical specialty at a time before the medical special option collapses. But what if someone is interested in more than one medical specialty?
Also if a user accidentally clicks and checks off a medical specialty criteria, they have that information auto load onto the page and the medical specialty options close and the user will then need to reopen it to uncheck the criteria they accidentally clicked on, if they realize it. Would be best to leave the collapsible criteria open until user closes it themselves so they can see whether they checked off something by accident.
back up to interactive mapHelp and Documentation - Pass
Strengths
Total number of results is provided based on your search.
There is a help option on the horizontal navigation bar and at the bottom of the page.
There is an information bubble by the filter by popular categories word and this helps to explain what this type of filter is.
Weaknesses
Having things in buttons when they’re actually not really a button isn’t super clear. For example, ‘the number of results’ figure to the right of the screen above your results is in a gray bubble that appears it can be clicked but nothing happens when you do click on it. Documenting it is good, but it must be clear that it is a documentation and not a call to action.
back up to interactive mapRedesigning AMO Marketplace Search Page
Based on my heuristic evaluation, I redesigned the search page to improve the overall user experience. Below I provide notes on how the changes I made improve upon weaknesses found in my heuristic evaluation.
BTW, the image below is dimmed 20% to allow for pins to show more clearly:
Visibility of System Status
Search results tell you how many results you will view on the page. Great for a quick reference but also can let you know when the system has loaded the new results. Down to the small details, when a user marks a program as "favorite", the heart will fill in white letting the user know this program has been added to their favorites. They can easily access their favorites in the left sidebar.
back up to interactive mapMatch Between System and Real World
Navigation icons are easily recognizable because they represent real world objects and are good signifiers for where the button navigates.
Also, the new title of the page "Book Your New Clinical Experience" not only lets users know what the purpose of the page is, but does so in familiar language.
back up to interactive mapUser Control & Freedom
Sort feature allows users to sort the programs based on criteria that is most important to them, like price point. Since most of these medical students are in the beginning of their careers, things like price point are of importance when deciding to invest in their career.
back up to interactive mapConsistency and Standards
In the previous design, the filter buttons were not consistent in style. That could cause a lot of confusion on the purpose of the buttons. This design really simplifies the filtering process by having all of the filters in one place and with the same color and style.
back up to interactive mapError Prevention
Error prevention in this static image can be shown through the date picker feature. There is clear verbiage in grey to let users know to enter a date. In the real product, the date picker will not allow a user to choose a date in the past, and won't allow a user to choose an end date that happens before the inputted start date.
back up to interactive mapRecognition Rather Than Recall
Heart icon in the placement cards allow users to know whether or not they favored a program. They can click on favorites in the new sidebar (which also has the same heart icon) and easily locate a running list of programs that they favored, all in one spot. All of this is helpful so users won't have to instead remember which programs they liked and which they did not.
back up to interactive mapFlexibility and Efficiency of Use
Map toggle allows users to easily access a map feature to more easily visualize the location of available programs. This is especially useful for the type of user that engages with the AMO marketplace because these users are international. Having the map for international users will allow them to see how far apart proposed programs might be in a country that might be unfamiliar to them.
Another example of flexibility is the sidebar which can be collapsed to allow for more room on the page to view another set of program results per row of results.
back up to interactive mapAesthetic and Minimalist Design
Keeping with the tiles from the previous design, I rounded out the edges more and created a drop shadow to really modernize the look of the tiles. The tiles are cleanly laid out, with key tags that help users determine whether a program suits their criteria.
The sidebar is very organized, utilizing the same contents as the top navigation bar from the previous design. Having two navigation bars is confusing, and so I eliminated that from the previous design. Having the sidebar be collapsible allows for users to focus on one task at once if needed, and gives users more space for navigating the search page.
Lastly, I modernized the harsh colors from the previous design to allow users to get a better sense of brand identity.
back up to interactive mapHelp Users Recognize, Diagnose, and Recover from Errors
When users decide to filter, they can utilize a set of check boxes and can easily get feedback on whether a box has been checked. Unlike in the previous design, users will be able to use multiple filters at once and easily uncheck filters that no longer suit their criteria.
back up to interactive mapHelp and Documentation
Clearly laid out on the side navigation bar is an option for help. Having the help here will allow users, no matter where they are on the page, to navigate to find help and learn more about how to utilize the application.
back up to interactive mapReflection
There were a lot of limitations for this heuristic evaluation given it was a design challenge without much knowledge of the internal system, but overall I learned a lot about key evaluation tools that I can access as a designer if I have limited research resources.
How I Would Improve My Redesign Process
In order to improve my design process for this design challenge, I'd need a few things:
1. Clarification on users and their user journey. Due to this being a design challenge prior to my employment, I didn't have in depth knowledge of key users, which is actually one of the most important parts of UX.
2. Clarify design system guidelines. I changed the colors from the original design because I wanted a more modern feel, and the colors from the previous design were not very modern. However I realize now that this could be a big change for development to make and not necessarily a priority for a startup to update their entire brand colors.
3. Clarification on system limitations. At the time of design, I was unaware of the state of the backend development and of the current designs limitations. Since the company is a startup, resources are deployed in a way that might mean that there are limitations in available features, like with the ability to filter results with more than one filter.
4. Conduct usability testing. Since this was a design challenge, I didn't get the chance to run the design by real users to determine its weaknesses. I think feedback is extremely important in a redesign process to ensure resources are being effectively deployed and we aren't wasting time on a solution that doesn't address user needs well enough.
What I learned
1. There are always going to be limitations on your design, and designing without taking these into account is a waste of resources.
2. Not all redesigns are feasible. It's not always going to be the case that you can completely change brand colors or overall a structure of a page. In some cases, there are limitations based on what users expect from already having used the product.
3. Design heuristics are very general but specific at the same time. A lot of design features can hit on multiple design heuristics at the same time, and in fact that is good if a design satisfies multiple design heuristics at once.
4. I'm getting really confident in using Axure! Great, robust software in general for wireframing and prototyping.