Ushahidi is a global not-for-profit technology company that develops integrated tools and services to enable people to generate solutions and mobilize communities for good. They build our open-source software with the intent of strengthening communities and improving lives, empowering users to rapidly and purposefully gather, analyze, respond and act on data and information.
User Experience Audit (UX Audit) is a comprehensive examination and review that involves usability heuristics and laws of UX, such as consistency, standards, error prevention, accessibility and user control of his own actions. Expert reviews involve the analysis of a design by a UX expert with the goal of identifying usability problems and strengths.
UX Audit is a perfect way to conduct a detailed analysis of your interface to identify the strengths and weaknesses. After this analysis, you get a rated list of the suggestions by severity level, that will help you and your team prioritize the work. The report contains detailed findings and recommended solutions for improving the user experience and meeting business goals.
This audit purpose is to prepare the team to modify the product. It will be a combined methods of cognitive walkthrough and analysis of heuristics.
USER SCENARIO: As a beginner user, I want to create my own deployment and get to know all of the Ushahidi features.
| Screen purpose | Observations | Recommendations |
|---|---|---|
| The purpose of the screen is to create a new deployment in fast and efficient way. | Top bar (navigation): | |
| • Grayscale used in the overall appearance of the platform is not making a positive impact on accessibility. Gray color should be used only to show unclickable elements. | ||
| • “Plans” and “Solutions” pages don’t exist | ||
| • Too small distances between menu tabs | ||
| • There are 3 types of buttons with different look (weights, font sizes) | ||
| • Gray buttons on gray background - accessibility problem | ||
| Form - step 1: | ||
| • “Your deployment” text seems like it is clickable, but nothing happens after clicking on it. | ||
| • Naming of labels might be improved | ||
| • Labels are too far from the inputs | ||
| • Inputs are too small, size of font too | ||
| • Properly shown process of filling the form (3 steps, descriptions). | ||
| • Alignments might be improved, there’s no symmetry on the platform | ||
| • Platform might look more modern (different shadows, colors, fonts) | ||
| • After filling all of the inputs on the first step, the system shows if deployment URL is available. System is showing its status. | ||
| Form - step 2: | ||
| • Why does the “size of the organization” input have a green border line? | ||
| • All input sizes are different | ||
| • In “What are you using Ushahidi for” there’s no option to search for the answer. Also, we can’t choose more than one option. Clickable area of options is too small | ||
| Form - step 3: | ||
| • Terms and Conditions text doesn’t look clickable | ||
| • “All fields are required” may cause misunderstandings | ||
| Other: | ||
| • After scrolling, logotype of Ushahidi is cut, losing the visibility and brand identity | ||
| • There’s no smoothness between changing sections | ||
| • System always shows its status. (+) | • Consider new color scheme of the app | |
| • Delete “Plans” and “Solutions” from the navigation bar | ||
| • Delete button “More” and rethink elements shown on Navigation bar | ||
| • Make distances between elements bigger (at least 40px or 48px) | ||
| • Create Style Guide with structurized button types | ||
| • Delete the feeling of clickable element | ||
| • Correct naming of the labels, work on UX Writing (for example “Your deployment” to “Deployment details” | ||
| • Change distances, create input component in the style guide | ||
| • Change size of the inputs to 48px | ||
| • Change font size to 14px | ||
| • Work on alignments, consider the horizontal view of the form (with few steps). | ||
| • Work on modernization of the platform | ||
| • Delete green border line | ||
| • Standardize inputs sizes | ||
| • Add searching | ||
| • Consider multiple option choosing | ||
| • Make clickable area of options bigger | ||
| • Consider adding info, why do you collect this data | ||
| • Add color to “Terms and Conditions” | ||
| • Delete “All fields required” text, add asterisk instead | ||
| • Correct logotype after scrolling | ||
| • We can work on a smooth motion between steps in a form. |
| Screen purpose | Observations | Recommendations |
|---|---|---|
| The purpose of the screen is to lead users through the features on the platform and explain how it works. | Step 1: Howdy | |
| • Good informations, but can be improved | ||
| Step 2: Collect Data | ||
| • Not the best UX Writing | ||
| • Many informations on the screen might distract user from the onboarding | ||
| • Some element seems to be clickable, but they aren’t | ||
| • User is not getting to know how the process of collecting data looks like! It should be the most important thing in onboarding, to try to use the features with some kind of “guidance” | ||
| Step 3: Data Visualization | ||
| • “Every data set can be viewed in Map or Timeline mode. And you can compare trends using the bar and line charts in Activity mode.” While talking about this feature, the user needs to see how both of the modes look like. He also needs to see the bar and line charts. | ||
| Step 4: Filter, Search, and Save | ||
| • There are too many things that modal communicates, it might not be understood correctly. | ||
| Step 5: Customize | ||
| • Change the naming to “Customize settings” | ||
| Step 6: You’re all set | ||
| • Good informations, but can be improved | ||
| Step 7: Log in | ||
| • Is it necessary to log in again? If yes, we should explain why. | ||
| • Does the user get some kind of email when deployment is approved? | ||
| Other: | ||
| • After being off for some time, we need to log in again. The error modal occurs, but button “Log in” doesn’t work. Users can’t take any action. Also, there’s no information about what happened. | • Improve UX Writing | |
| • For example: “Success! You’ve created your deployment. | ||
| Now please, while we polish it up, get along with Ushahidi features” | ||
| • Consider to add some icons/illustrations/mikro animations | ||
| • Put buttons to the right side, next to each other. | ||
| • Use only 2 font sizes to create a good hierarchy. | ||
| • Improve UX Writing | ||
| • Highlight only described element of the interface and the modal with description | ||
| • Rethink the positions and sizes of the buttons. | ||
| • Don’t show the “clickable” mouse on elements that aren’t clickable | ||
| • Redesign the onboarding. Add illustrations/icons that might show the user what he can expect from each feature. | ||
| • Redesign the onboarding. Add illustrations/icons that might show the user what he can expect from each feature. | ||
| • There should be two dots from each tab in the menu: Timeline mode and map mode. | ||
| • Split it into showing (by simple animation) how to search, how to save and how to filter (show where they are on the interface). | ||
| • While showing the feature, we should “go into” this page and see the whole view. Then the user can see how it looks like, not only imagine. | ||
| • Improve UX Writing | ||
| • For example: “Congrats! You’re all set up! | ||
| Now you can continue exploring the app. In case of any problems, contact us by [...]” | ||
| • Consider to add some icons/illustrations/mikro animations | ||
| • Put buttons to the right side, next to each other. | ||
| • Use only 2 font sizes to create a good hierarchy. | ||
| • Add information about what happens after creating a post. | ||
| • When an error occurs, add information about what happened and what the user can do now. | ||
| • Give users a chance to take actions. |