1 of 34

Orion UX Audit

Lisa Cindric 04/24/2020

2 of 34

Why Audit?

An audit helps to:

  • Understand business objectives
  • Get to know the users
  • Understand user objectives
  • Review analytics
  • Complete a heuristic evaluation
  • Compile findings and make recommendations
  • Key takeaways

3 of 34

Areas of Focus

As a new product, we’re going to be introducing ourselves to every user who encounters our product. With that in mind, I reviewed a number of sites to better understand how companies like Uber and Safer.me go through the process of explaining their service to users.

Areas that I focused on are: �

  • Dashboard - Analytical and operational dashboards. Analytical provide an at a glance overview and operational provide data that helps users be quick, proactive and efficient
  • Onboarding - A learn by using approach or a choose your path approach?
  • Application Page - Form approach with several fields or a short form of basic info with a resume upload?
  • Homepage - Clear call to action steering the user to the path they need, ie: Tracer or Patient
  • About - Persuasive content that explains how the site works that might otherwise clutter the homepage

4 of 34

The Dashboard

I spent a lot of time diving into dashboard design to familiarize myself with other platforms that our potential customers might already be familiar with.

Dashboards need to communicate the most important information for the user, in a simple, easy to understand screen. They should be structured to reflect a logical information hierarchy, providing the user ways to drill down into the data when necessary. In the case of Orion both analytical and operational dashboards would be useful.

5 of 34

Analytical dashboards provide the user with at-a-glance information used for analysis and decision making. They are less time-sensitive and not focused on immediate action. A primary goal of this kind of dashboard is to help users make the best sense of the data, analyze trends and drive decision making.

6 of 34

xx%

7 of 34

Operational dashboards aim to impart critical information quickly to users as they are engaged in time-sensitive tasks. The main goals of the operational dashboard are to present data deviations to the user quickly and clearly, show current resources, and display their status. It’s a digital control room designed to help users be quick, proactive, and efficient.

8 of 34

9 of 34

Dashboards need white space, also known as negative space. This is the area between elements in a design composition.

This helps create a cleaner, easier to scan and read dashboard.

10 of 34

Onboarding

I studied companies with superior onboarding flows to see if there was anything to learn from sites that do this extremely well, like Grammarly and IBM Cognos Analytics.

There is no one size fits all for the onboarding design. It depends on the space, product and service. In the case of Orion, a “learn by doing” style of onboarding would probably work best due to the two path approach (tracer/patient).

11 of 34

Grammarly introduces folks to the UI patterns they'll need—one step at a time and true to form. You learn how to use its features by using its features.

Notable features are pointed out with pulsing hotspots—just subtle enough to not obscure the interface, but just eye-catching enough to make users engage. When clicked, the hotspots reveal tooltips that give short explanations of the feature being highlighted.

The onboarding unfolds sequentially to take users through the app. After you fix the spelling error in the first line, for instance, you’re drawn over to the "Correct with Assistant" button, which unveils a feature that you may not have explored otherwise

12 of 34

  1. A series of animated modal windows introduces new users to key features

  • Greying out the screen allows you to not have to leave the page and the card design that overlays the content walks you through the process so that you can easily get back to the demo document once you are done the short tour. This helps with user control and freedom.

13 of 34

Grammarly users learn how to use the product—by actually using the product.

14 of 34

IBM's Cognos Analytics lets users choose their own path into the platform

15 of 34

A modal window sets expectations about the product tour that follows

16 of 34

A brief product tour is accompanied by a 3-step user onboarding checklist for extra guidance

17 of 34

The tooltips look native to IBM's product, but have enough visual contrast to stand out from the main UI. Like many complex enterprise products, IBM’s Cognos Analytics can feel overwhelming to new users and successful onboarding depends on users’ ability to prioritize between a wealth of useful features. IBM avoids the urge to drag new users through every single feature one by one, and instead focuses its onboarding experience on providing context to a few essential features.

18 of 34

Tracer Application Page

A good application page should be:

  • Simple
  • One column
  • Fields should appear easiest to hardest
  • Use inline form field validation
  • Align text to the left
  • Clearly title the form
  • Make the telephone# field optional
  • Use auto-fill browsers

  • Address possible user concerns with summary boxes
  • Use positive error messages
  • Include smart defaults
  • Progress bar if long
  • User reCAPTCHA not CAPTCHA’s
  • Ability to tab to each form field

19 of 34

Inline form field validation

Inline form validation is a process in which a visitor’s information is reviewed in real-time as they work their way through the form. If your visitors fill in a field with incorrect information, such as an invalid email address or credit card number, an error message will appear below or inside the form field notifying the visitor of their error so they can quickly correct it and move on to the next question.

20 of 34

Clearly title the form

Give your form a title that helps your visitors understand exactly what they’ll receive once they submit it. For example, a simple form title such as “HubSpot’s Marketing Blog Sign Up Form” clearly states that the visitor will have signed up for HubSpot’s Marketing Blog once they submit their information.

21 of 34

Summary boxes

Summary boxes explain your need for certain information or with statements that clarify whether or not the form field is optional.

22 of 34

reCAPTCHA

reCAPTCHAs are not only more effective in detecting fake accounts and bots but they also simply require your visitor to check a box before form submission.

CAPTCHA’S can be time-consuming and frustrating.

23 of 34

If the approach is to be super simple a minimal application form with supporting text could be used accompanied by an upload resume button.

24 of 34

Job Descriptions for a Contact Tracer

Here are some links to job descriptions that should help in developing the application form for a contact tracer:

https://jobs.crelate.com/portal/talentboost/job/3kyqki4zeqoyugdzsha5iynhce

https://dailyremote.com/remote-job/covid-19-contact-tracer-19675

25 of 34

The Homepage

  • Logo - The logo on a website often doubles in functionality as a link to the homepage, so you want it to be in an obvious location within the header.
  • Navigation - The navigation area is like a road map--it’s necessary to give visitors an overview of the content, as well as help them to locate the information they are looking for using the most efficient route. Descriptive and thorough navigation is also beneficial in reducing bounce rates.
  • Headline - A headline with sub-headline or paragraph text that provides a clear description of what Orion does

  • Call to action - Clear indication on where to go for what the user wants should be on every page, not just the home page.
  • Social proof - Too early for this but a stretch goal.
  • Photos - Photos add a sense of credibility and integrity to a website.
  • Text content - The language of the site matters. It is best to not only describe what Orion does but to connect it to why it matters to the visitor.
  • Footer - An informational footer is arguably as important as your header navigation. Once your visitor reaches the end of your homepage, this area should provide three features: contact information, links, and social media integration.

26 of 34

  1. Clear calls to action. From the homepage the user immediately makes The choice of what path they want. In this example you find a care giver or you become a care giver. For Orion the options are Tracer or Patient. Put the primary goal above the fold.

  • Login option for once you have created a profile. An anonymous profile with your phone Number. No logging in with Facebook.�
  • Footer with contact information, links, and social media integration.

27 of 34

  1. People are visual so its important to include photos on the homepage. A photo of someone using Orion is more engaging than using stationary photos of the product because the viewer is able to connect with it. Our brains are hardwired in such a way that our eyes are drawn to human faces and we empathize with the perceived emotion. Photos add a sense of credibility and integrity to a website.

  • Have a call to action visible at all times. Different visitors are ready to take action at different times. Some need more information than others and won’t sign up or click through right away. But you should make it easy to take action whenever they are ready. A persistent nav is good for this.

28 of 34

A short animation that shows how easy It is to do a task is powerful.

Your brain can process visuals much quicker than it can text. About 90% of the total information transmitted to your brain is visual. On top of that, your brain can process these visuals 60,000 times faster than text.

(click on the image)

Stat source:

https://idearocketanimation.com/17385-reasons-video-effective-text/

29 of 34

Oscar is a site you can only see with a paid subscription

  1. Emergency alerts - When it's time to disseminate your emergency alerts onto your website, placement is important. Your alerts can't be hidden within the content, or separate from your website. By placing your alerts towards the top of the page, not only will it be more visible to the eye, but it is likely to be the first thing to load on your page.

  • Icons - Web users have become proficient at scanning pages for content that is relevant and interesting to them. We are naturally attracted to bright colours, faces and illustrations. Clever use of iconography directs users to what we want them to see.

30 of 34

  1. Your logo should be visible at the top of your website. The logo doubles in functionality as a link to the homepage, so you want it to be in an obvious location within the header. Also, having a clean primary nav with clear call to action is important. A minimalist design prevents elements from competing with the relevant information.

  • Supporting text that provides the differentiator. Seeing there are several apps in this space as well as the Apple/Google BLE, educating users on how Orion differs is a good idea.

31 of 34

About Page

A good About page should:

  • Communicate the story of Orion and why it was started
  • Describe the users and the cause that the site serves.
  • Explain how the site works
  • Put a face to your business, featuring the founders or the people on your team.
  • Incorporate persuasive content (e.g. an explainer video, data visualizations, links to blog posts) that might otherwise clutter your homepage.

32 of 34

  1. Showing a screen capture of the site with a brief explanation on how the app can protect people builds credibility and user confidence. The language of the site is really important. It is best to not only describe what Orion does but to connect it to why it matters to the visitor.�
  2. Providing information about who Orion is for along with an infographic that explains the workflow will help educate the user and affirm their decision on whether or not the website serves their purpose or not.

33 of 34

A step by step infographic for each path (Tracer & Patient) could appear on the About page. If there is no About page then the visual can be on the home page for each section. Infographics are great for keeping the viewers attention. The average attention span of a human is eight seconds, which is one second less than a goldfish. Therefore, marketers need to make a meaningful impact immediately to connect with their target audiences.

34 of 34

A brief summary could be included that talks about how Orion came together through a group of international volunteers.

Mailchimp does a good job of communicating their story. Stories inspire trust and speaks to the audience.