Overview

Originovel is an event and adventure website based in Raleigh, NC. The stakeholder asked for a redesign of the website for improved usability.

User Test Goals

The usability of Originovel was evaluated to improve user experience. Key areas included event links, navigation, contact page, homepage redesign, prizes, subscription email forms, and about page layout. Major issues identified included outdated event information, confusion with outbound links, hard-to-find contact information, and disorganized layout. Recommendations include updating event information, providing previews for outbound links, improving navigation, adding a contact form, and enhancing organization with dropdown menus and event select tabs. The study aimed to improve user experience and web accessibility.

Problem Statement

The current Originovel website presents several usability challenges for users, including difficulty in finding updated event information, navigation issues, missing links, problems with web page hierarchy, and accessibility issues. These challenges hinder the user experience and require immediate attention to improve the overall usability and accessibility of the website.

Test Methods

Research and testing identified usability issues in navigation, information retrieval, contacting organizers, outdated event links, prize discovery, and notifications, all requiring improvement.

Project: Originovel
Role: UX Designer
Timeline: 2 months
Platform: Figma

Methods

  • Heuristic Evaluation
  • User Research
  • Personas
  • User Stories
  • Usability Testing and Analysis
  • Prototyping Solutions

Tools

  • Adobe Photoshop
  • Figma
  • Google Forms

Research

Introduction to Jakob Nielsen’s Usability Severity Scale

Jakob Nielsen’s usability severity scale is a tool used to rate the severity of usability problems. The scale ranges from 0 to 4:

  • 0: No problem
  • 1: Minor problem
  • 2: Small problem
  • 3: Major problem
  • 4: Critical problem

This scale helps prioritize issues based on their impact on user experience. During the heuristic review, these scores were applied to assess usability problems.

Usability Issues Identified

Several usability issues were identified and rated using Nielsen’s scale:

  • Navigation Problems: Difficulty in finding and accessing different sections of the website.
  • Contact Page Accessibility: An unusual contact page layout that complicates navigation for people with disabilities.
  • Home Page Link: An image that does not link back to the home page, causing confusion.
  • Website Organization: Lack of logical and organized structure throughout the site.
  • Error Handling: The contact page does not effectively catch and display errors.
  • Event Links Categorization: Absence of categories on the event links page, making it hard to find specific events.
  • Non-functional Links: Links that do not work as expected, leading to a poor user experience.

View Heuristic Evaluation Google Doc

User Research

Five users took part in an online survey to disclose their demographic background, expectations from the site, personality traits, preferences, and goals related to the subject. These insights were then utilized to develop user personas. 

View Survey Questions

View User Research Data

Personas

Personas were created from data in user survey. They represent target user interests and goals.

 

User Stories

Three personas were created to identify goals for Originovel’s site. View User Stories Doc

Chelsea’s User Story

“As a cyclist, I want to sign up for upcoming events so that I can participate and engage with the community.”

Tasks I’d would like to accomplish:

  • Find details of an upcoming bike race
  • Find sign up page for a bike race
  • Find contact information for event inquiries

  • Find the email address to contact Orginovel and start an email

  • Start a text message to the phone number listed

User Goals

Developing user goals to be tested helped guide a test plan below:

  • Explore details about a treasure hunt in Raleigh and indicate interest in participating

  • Sign up for an upcoming bike race and request additional information

  • Locate details about an ultra 100 running race

Matching Participants to Personas

To increase the validity of user testing, participants were matched closely to the created personas.

Issues to be Tested

Event Link Page

Issue: Recognition over recall; Consistency

Discovery: Heuristic evaluation

Feedback: One user suggested, “Use headings, images, and sections on the homepage to differentiate site areas.”

Severity: 4 (high) needs immediate fix

Fix Reason: Enhancing page structure and consistency improves user understanding and navigation, enhancing user experience.

Navigation Links

Issue: System status visibility; Unclear page titles

Discovery: User research evaluation

Feedback: One user suggested, “Clicking the logo should return to the homepage.”

Severity: 2 (medium) minor usability issue

Fix Reason: Clearer titles and consistent navigation aid users in understanding their location and improve navigation efficiency.

Contact Page

Issue: System-real world match; Error prevention

Discovery: Heuristic evaluation, user research

Feedback: User suggested, “Linking contact info instead of spelling out dot and at would be better.”

Severity: 4 (high) needs immediate fix

Fix Reason: Enhancing match with real-world expectations and error prevention will ease contacting Originovel, boosting user satisfaction and trust.

Usability Results

Insights Found 

Blocker and major issues were found during moderated usability testing. 

Blocker issues such as finding notifications, prize information, and RSVP methods, were resolved with additions like newsletter signups, prize details in event dropdowns, and an “add to calendar” UI.

Major issues addressed included outdated event information, confusion with outbound links, and difficulty finding contact information, all resolved through updates, improved previews, clearer navigation, and added features.

Event Links Page Testing Results

  • 45% of users Users were confused by numerous outdated outbound links without previews or embedded information.
  • 20% Users were confused by the numerous outbound links and expected homepage items to be clickable for more race information, highlighting a need for clearer navigation.
  • 100% of users couldn’t find an RSVP method, and two users expressed no interest in this option, noting they had never RSVPed for a race before.
  • 40% of users commented on outdated information on the event links page.
  • 100% users failed to locate any prizes and expressed no interest in them.
  • 100% of the users were able to locate notifications or updates.

Content and Functionality Testing Results

  • 45% of users encountered issues with the layout of content on the pages.
  • One user mentioned abandoning the site to search for the bike race on Google.
  • 60% of users mistook text for links and attempted to click on non-clickable text areas, such as the unordered list on the homepage.

Contact Page Testing Results

40% of users experienced difficulty finding contact information when navigating to outward-bound links.

Navigation Testing Results

All users assumed the unordered text on the homepage were links.

Recommendations

Design solutions that address issues identified in user testing and research.

Homepage Redesign

Implemented solutions to address blockers, major issues, and user frustrations:

  • Content Organization: Structured content into categories to enhance navigation and make it easier for users to find relevant information.
  • Event Card Previews: Added preview information under event cards, allowing users to quickly assess the relevance and interest of each event.
  • Navigation Bar Update: Updated the navigation bar to accurately reflect the current page title and location, improving user orientation.
  • Home Link Enhancement: Removed the “Home” link from the left-hand navigation and made the logo the home link on all pages, streamlining the navigation experience.
  • Accessibility and Readability: Improved overall accessibility and readability of the site, ensuring a more inclusive and user-friendly experience.
  • Hero Image Addition: Included a hero image on relevant pages to increase user interest and improve the overall page structure and visual appeal.
  • Footer Enhancements: Added a subscribe form and social media links in the footer, providing users with easy access to event updates and ways to stay connected.

See the before-and-after comparisons below.

Webpage for originovel llc with details on the company's creative events, veteran ownership, and navigation buttons for Home, About, Contact, and Event Links.Homepage of Originovel LLC showing navigation links, company description, featured events (Mandura Bike Race, Spark Con Quest, Run Around Raleigh, Spring Fling Treasure Hunt, Cowboy Treasure Hunt, Winter Minduro), and footer with quick links and subscription form.

Event Cards UI Redesign

Solutions Implemented to Address Blockers, Major Issues, and User Frustrations

  • Category Tabs for Events: Added tabs on event pages to allow users to narrow down categories, making it easier to find specific events of interest.
  • Updated Navigation Bar: Fixed the navigation bar to reflect the current page title and location, providing clear context and aiding in user orientation.
  • Breadcrumb Links: Added breadcrumb links for selected events, enabling users to easily navigate back to the previous page or higher-level categories.
  • Event Cards with Previews: Enhanced event cards with images and preview information, allowing users to quickly determine if they are interested in learning more about the event.
  • Sign-Up and Calendar Integration: Included “Sign Up” and “Add to Calendar” buttons, enabling users to save events to their calendars and easily access the registration page.

See the before-and-after card UI design below:

Webpage of Originovel LLC with links to various adventure events.Originovel.com events page featuring various biking, running, and treasure hunt events. Includes event cards, social media links, and a newsletter signup form.

Navigation Events Redesign

Solutions Implemented to Address Blockers, Major Issues, and User Frustrations

  • Event Previews: Included brief descriptions below each card image to provide users with a preview of the event.
  • Enhanced Understanding: Added information directly in the cards to help users understand the events without needing to click on them.
  • Improved Efficiency: The preview card information saves users time and reduces the number of clicks required.
  • Current Information: Ensured that up-to-date information is displayed in the cards for user convenience.

See the redesigned Events page below:

Originovel.com events page featuring various biking, running, and treasure hunt events. Includes event cards, social media links, and a newsletter signup form.
Webpage showcasing selected bike events, including "Mindura Bike Race" and "Winter Minduro," with additional sections for related images and footer links.
Webpage for "Minduro 2024" biking event with event details, registration info, location map, prize images, and footer links.

Contact Form Redesign

Solutions Implemented to Address Blockers, Major Issues, and User Frustrations

  • Contact Page Redesign: Redesigned the layout to make it easy for users to call, email, or send a message.
  • Improved Usability: Added a contact form to enhance usability and accessibility.
  • Enhanced Accessibility: Spelled out email addresses and telephone numbers, and added icons for better accessibility.
  • Form Submission Feedback: Implemented a success message to confirm form submission.

See the before-and-after Contact page below:

Contact page of Originovel.com with email, phone number, social media links, and navigation menu. Text Transcription: Contact Information: "Email: originovel @ gmail dot com" "Tel: 984 dash 212 dash 2774" Social Media Icons (Instagram, Facebook, YouTube) Footer: "originovel llc © copyright 2024"Contact Us webpage with contact information, a contact form, social media links, and a newsletter sign-up.

About Page Redesign

Solutions Implemented to Address Blockers, Major Issues, and User Frustrations

  • images to enhance the page layout and engage readers.
  • User-Friendly Design: Utilized a zigzag layout to make it easier for users to scan information and digest content effectively.

See the before-and-after About page below:

Webpage screenshot of originovel LLC's About page describing the company's mission and the owner's background, with text and adventure-themed images.Website section with information about Originovel LLC, including a logo, navigation menu, social media icons, company description, and a photo of the owner.

Final Thoughts

The redesigned prototype effectively addresses the issues identified through heuristic evaluation, user research, and usability testing. To ensure its effectiveness, it is recommended to test the new prototype with users. Additionally, A/B testing could be beneficial to further refine the design based on user feedback.

The designs were created in Figma using a Tailwind.css library, enabling precise alignment and styling. They can be seamlessly translated into a custom HTML, CSS, and JavaScript website, utilizing Tailwind.css for consistent design implementation.

The final polished prototype incorporates all recommended changes.

View Originovel Prototype in Figma