Skip to content

Instantly share code, notes, and snippets.

@cfsanderson

cfsanderson/fulcrum-ui-ux-audit.md

Last active January 28, 2020 15:05
Show Gist options
  • Save cfsanderson/06d5001ce3f2d0b02194b792fca86f90 to your computer and use it in GitHub Desktop.
Save cfsanderson/06d5001ce3f2d0b02194b792fca86f90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fulcrum-ui-ux-audit.md

This document has been moved to Google Drive

UI Project Ideas (Web App)

This UI/UX audit is primarily, but not solely focused on a new user's experience. It also deals mostly with the web app and not the Android or iOS mobile apps.

Global Navigation

  • The hamburger for left side nav should be fixed to the right side of the nav and move with it. This is a more common placement and is quickly becoming a standard affordance.

  • The titles of items in side bar should match their corresponding page headers.

    • e.g. "API" in sidebar => "API Tokens" in header. If making a specific ref to API Tokens is necessary, maybe it would be better to create a section named that on the page view itself OR if this section will ONLY be used for API Tokens, then the sidebar name should be updated to "API Tokens"

  • The "Upgrade Now" and "Video Tour" buttons are not the same size.

    • The border on the Video Tour button and the lack of a border on the Upgrade Now button are causing the latter to appear 1px larger. Is it possible to find a design system approach that is extensible to all button styles?

  • Upper right navigation rework:

      1. The GEAR icon in the upper right of the nav contains links to "Settings" and "Sign Out". The link to Member Profile seems redundant and unnecessary and "Sign Out" could be in a better place as well.
      • remove gear
      • move "Sign Out" to left side bar
      • this could work by itself but I believe a better solution might be...
      1. Make Org Switcher more of a general hub for profile management (e.g. GMail, Gcalendar, etc.)
      • Contained in org switcher: link to "Help", link to "Sign out"
      • AND/OR move "Help" under Intercom button

Platform: General

The empty state for Apps, Imports, Exports, etc., shows a warning sign next to a message about not having created any apps yet. The warning sign could make users feel like something has gone wrong. Consider...

  • removing the warning sign b/c it suggests that something has gone wrong.
  • removing the word "yet" because it is unnecessary for new users and incorrect for existing users who may have created apps but deleted them.
  • add illustrations that are delightful and encourage users to get started.
  • add copy that is more declarative instead of interrogative and gives users a sense of the value of this feature
    • e.g. "Export your data for use in other applications or to share with others. (insert illustration here) Click the "New Export" button to get started.

Platform: Apps

  • It would be delightful and informative to call attention to the new log at right after the first record is collected

    • Consider: "Nice work! As more records are collected using this app, they will show up here."

  • In the right side activity feed, the choice of being able to go to ALL the records collected with the app, or a filtered view of just the records that the log is calling attention to is unncessary complexity. If links went only to the filtered view of record(s) the log entry was describing, the whole list item could be clickable and styled more like a card or large button.

Designer:

  • The "DRAG FIELDS HERE" image on the empty state of the app designer is not responsive and is noticably breaking on screens less then 1360 wide.

  • The "I" (info) icon near App Status under the Settings section is pixelated and should be replaced with newer version.

Platform: Imports

  • After adding a file, should "BROWSE" button still persist?

    • Consider changing to "EDIT" or "UPLOAD A NEW FILE" or "NEW FILE"

  • "SELECT TABLES" needs a blue instruction bar at the top for consistency

  • "MAP FIELDS"

    • text styling of details is too big
    • title of file should be styled differently for hierarchical contrast.

  • "REVIEW ISSUES"

    • The issue message is not very helpful. It communicates to the user that there is a prob but not what steps to take to fix it (using the back button is not intuitive or a sufficient solution).
    • Need better messaging for a successful import. Consider changing "DETAILS" to "ISSUES" or "ISSUE DETAILS".
    • Rows shouldn't have hover states if not actionable.
    • Loading gif while importing is not hip => high jank factor.

  • Should file itself be clickable/changeable after upload?

  • "NEXT" button should be placed in left to right workflow order.

  • Need better explainer text for each step (none on "Select Tables" step)

    • Consider starting with a question (e.g. "How would you like to georeference the tables? Select from the menu below")

Platform: Exports

  • Replace old loading gif

  • Should there be an alert or message at the top when the export is ready?

  • Should there be an in app alert for delete instead of the native browser alert?

  • Do better at explaining WHY I should export data and what the benefit is.

    • Consider better explainer text and a delightful illustration.

  • Minimum - text is too light and looks like it is disabled.

  • Switch "Finish" to "Confirm" to match explainer text.

Platform: Projects

  • Move explainer text on NEW Project page to main project page.

    • It is mainly for new users
    • We need to explain WHY and WHAT a project is first.

  • When updating a project, should validation occur that a change has actually been made before presenting "UPDATE PROJECT" button?

  • Consider adding a "CANCEL" button?

Platform: Layers

  • What IS a layer?

    • Better explainer text to educate new users about what layers are and their potential value to them.

  • MB Tiles upload

    • After choosing a file in finder, file should automatically upload w/out need to click "START UPLOAD".

    • While uploading, the styles for the percentage uploaded status gets pushed down by the "CHOOSE MBTILES FILES..." button reappearing.

    • Once the file completes uploading, the "CANCEL" and "CHOOSE..." buttons disappear

    • After uploading, there is no visual indication that it was successful. There should be link to the file just uploaded (referenced in GH issue 3539)

    • "UPDATE LAYER" is not a clear CTA

      • Consider: "FINISH AND CLOSE", "ADD LAYER"

    • You can reopen a layer by clicking on it (which is actually an edit mode) and when you click the "UPDATE LAYER" button without making any changes, you still get a confirmation message.

    • confirmation message should be attached to the thing you just did.

    • suggest removing the edit button and just make the list item highlighted on hoveer and the whole row clickable

    • if "file" can not be edited after initial upload then either should not be presented or have options to delete and REupload.

    • "CHOOSE MBTILES FILE...", "START UPLOAD", and "CANCEL UPLOAD" button styles are inconsitent with the rest of the app.

      • Too close when multiple present - needs margin.

    • if user selects "CHOOSE" while another file is uploading, it will fail and layer becomes uneditable.

    • if upload started and user clicks "CANCEL UPLOAD" while "CHOOSE MBTILES FILE..." is open, the upload fails and no option to REupload.

  • List filter

    • styles broken on list filter when less than (?) 1 items are available in resulting list

  • Type to filter

    • results of filter should appear outside search box and persist AFTER typing
    • filter box needs styling for active

  • Delete

    • when clicking delete button, the browser gives a native alert message instead of handling internally.

  • "+ NEW" button

    • consider renaming "ADD LAYER" or "ADD NEW LAYER"

Platform: Choice Lists

  • What is a choice list?

  • IMPORT

    • should/could explainer text be in steps? e.g.
        1. Download sample file HERE
        1. Replace sample data with your own data taking care to use the same format as example data
        1. Add name and description in form
        1. Select file
        1. etc.

  • NEW CHOICE LIST

    • not titally clear that drag-n-drop is required action
    • should "SORT CHOICES" and "SAVE LIST" be disabled until changes are made?

Platform: Classification Sets

More to come...

Records View

  • "DOWNLOAD DATA" workflow
    • Consider differentiating styles between "Close" and "Start" buttons/actions in the modal more
      • Size of text is too similar, and/or color difference.
      • Consider changing text to "Cancel" and "Start Download"
      • Consider changing primary CTA to more of a button style and "Cancel" to text button/link.
    • The purpose of the "..." extension to the "DOWNLOAD DATA" button is not very clear. Since it serves a single purpose and not multiple (as the icon would suggest) should it be changed to a "RECENT DOWNLOADS" dropdown or link?

Settings: Member Profile

  • ROUND avatars everywhere

  • Consider changing "Member Profile" to "My Profile" or "Personal Profile"

  • Update styles

    • "keep me updated about changes in Fulcrum" checkbox is too close to Time Zone and not big enough
    • too many font styles
    • incorporate "choose image" with existing avataaar at the top
    • Are there password requriements? Is fo, password change needs explainer text for requirements.
    • All "above the fold" would be ideal.

Settings: Organization Profile

(This page ties into the Checkout Address project)

  • integrate avatar update/add with existing image instead of having a separate area

  • Billing vs Org address?

Settings: Billing

Settings: Members

More to come...

Settings: Roles

More to come...

Settings: API

More to come...

Settings: Webhooks

More to come...

Settings: Audit Logs

More to come...

General

  • Should modals where "Cancel" is an option be closable with the ESC key? This is may be more of a personal pet peeve 🤓

  • When "CANCEL" and "SAVE" are both present, consider using styles to indicate a primary and secondary action hierarchy - e.g. "CANCEL" as a text button or outlined style and "SAVE" as a primary filled button that can be disabled/enabled. Current "CANCEL" button styles are grey and might appear disabled instead of just deemphasized.

  • Does the new changelog/feature button (represented by a bell) deserve top level navigation space? If so, the bell seems to imply notifications rather than changelog/features. Could this be rolled up under the current HELP section in the top nav?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment