UX Review (General Discussion)

[stevejgordon]

As the project has matured and evolved to meet the requirements and feedback from testing, the flows have become quite complex. Most specifically, the design of the UI/UX has been very form based and may not suit non technical users.

Therefore we are starting a site wide UX review. This issue will act as a master point where larger, general discussions can be had, requirements verified and ideas to be shared. As we progress, we'll break out smaller, specific issues to focus on individual parts of the site and flows.

[stevejgordon]

Let me introduce my friend @PracticalUX (aka Chris) a UX designer who is kindly helping to review the site and provide recommendations. We spent an initial 2 hours recently walking through some of the functionality which was extremely useful. In doing so we identified a number of quick wins regarding UX changes we could make.

Chris also has some wider recommendations that we can begin to build on and discuss here. We'll break out other issues as each item feels it needs it's own space to be discussed / worked on.

[PracticalUX]

Hello!

It's hard to make concrete recommendations for user journeys without concrete data about how users interact with the website (which would ideally be in the form of observations of and conversations with actual target users of the website, ideally users from the organisations who will end up using the website). Having that data would inform our design decisions with much more accuracy and confidence. But we can still tackle UX issues based on existing usability heuristics, and our own experience interacting with the site.

With that in mind, here are some of my recommendations for UX improvements that could be made.

The biggest issue in my mind is that to a lay-person, not intimately familiar with the project, the structure and hierarchy of the various areas of the website are unclear. What I mean is, CAMPAIGNS contain EVENTS, which can be made up of TASKS. But honestly, that isn't obvious to new users - if I'm inside an event, for example, the only real visual clue to that structure is in breadcrumbs at the top.

One potential solution to this problem would be to introduce (on desktop / larger devices at least) a left side navigation bar, which would display a list of campaigns, with the relevant events clearly within particular campaigns. So if I'm within an event called "Fundraising BBQ", for a campaign called "Fire awareness campaign", that structure is obvious and easily navigable from within any of those pages. Something like this within a left sidebar:

My Campaigns

• Fire Awareness Campaign -- Events: Fundraising BBQ

This would allow faster navigation, and more importantly make the structure clear and intuitive to users. In my mind that's the biggest UX improvement that could be made.

There are more minor issues which are probably easier to fix. These include:

• Icons used in place of labels. The "edit" icon used in certain locations might seem clear to developers, but to less Internet literate users (which might well include the target audience), it's not immediately obvious what those icons mean, and they risk being overlooked altogether. The solution might be to swap the icon for a text label, or add a label next to / with the icon.

• When you create a campaign, the user has to scroll down below the fold to create an event, and it's not immediately clear that that's what they will probably want to do. The solution might be, once a user creates a campaign, give them visual feedback that the campaign has been created, give them a link to view and edit the campaign, but also clearly give a prompt for other actions they might like to take ("Create your first event for your campaign" etc).

• When a user is interacting with the forms, it's not clear which fields are required, and which aren't. And the fields which aren't required - are they all strictly necessary, and in your users best interests (when weighed against the extra time costs for users, and the visual clutter?) For example, when creating a campaign, a user has fields for:

  Name (presumably Campaign Name, not their name? Ambiguity such as this should be gotten rid of) Description Headline Full Description.

I would suggest instead just:

Campaign Name
Description

And where a headline or description is used elsewhere, just an excerpt of the Description field be used. This might pose slightly less control over how the excerpt looks in other places on the site, but the benefit is the form looks much less imposing to users, and requires them to think less (and as much as possible, users shouldn't have to think!)

• Other form fields are potentially unclear, such as the "Published" checkbox. I think this could be replaced with a "save as draft" button at the bottom of the form (next to the "Create your Campaign" button, which should have a heavier/more prominent colour to the "draft" button; I think the "Cancel" button could be done away with altogether).

• The "location" and "primary contact" fields add a lot of perceived work for users - could these be either autofilled by default, and potentially minified (with an "expand" button if they want to change the default settings)? This might not be viable / in the best interests of real users (testing later on could prove or disprove this), but is worth considering.

• Context descriptions for the various functions. A user creates a campaign, then has options to create GOALS, EVENTS, RESOURCES and CAMPAIGN MANAGER INVITES. It would be useful to give information about what these items are; there are so many options that users might feel intimidated and unclear as to what's expected of them and in what order to proceed, or even the benefit afforded by any given function (what benefit does a GOAL offer, in practical terms? I'm not sure, and your users might be unsure as well. What are Itineraries in this context? When should a user create one? Etc).

• Within an event, volunteers can be Assigned. However, from a user's perspective, is that how it's likely to work? It seems that frequently, a more useful operation would be to INVITE a user rather than to ASSIGN them, or to SHARE a task with a user or group of users, for them to volunteer. Assigning specific users to specific tasks almost seems impolite without first discussing it with them, and if the discussion about whether a user wants to be assigned needs to happen outside of the website, that's a big gap in the flow of the user journey.

• Accessibility concerns: This warrants a full review by itself, but easy fixes would be ensuring that colours have enough contrast (for example, hovering over many of the links, such as in the breadcrumbs, changes the link colour to a light orange on a white background. This fails the WebAIM accessibility colour contrast test with a contrast ratio of 1.96:1 (4.5:1 is a passing contrast ratio) and so would be very difficult to read for a person with visual impairments, but is easily fixed by darkening the colour of the orange), ensuring images have relevant Alt tags, ensuring buttons (such as the "Share on social media" icons) have a larger clickable area for people with fine motor issues or even mobile phone users.

I think making the structure and hierarchy more obvious gives the biggest benefit to users, but some of these "quick wins" would help them as well. If at all possible, testing with real users (not developers or their partners) would likely prove or disprove some of these assumptions, and would very likely shed light on other usability issues as well.

[jonparker]

@PracticalUX Great work Chris, thanks for your help.

[darcehess]

I would be happy to help with the UI/UX piece of the project

[jonparker]

Actually I'd be happy to help too but I was wondering if there's any plans to add SASS to the project?

[jonparker]

What do people think about changing the colour to this orange (#ef6230). I find it a lot nicer.