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
Tools
Research
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.
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:
User Goals
Developing user goals to be tested helped guide a test plan below:
Matching Participants to Personas
To increase the validity of user testing, participants were matched closely to the created personas.
Persona Match: James
Occupation: Software Engineer
Residence: Raleigh, NC
Traits: Current user of website and has been involved with many Originovel events.
Persona Match: James
Occupation: UX Designer
Residence: Raleigh, NC
Traits: Recently moved to Raleigh, NC, UX Designer, and is looking for active people to meet.
Persona Match: Chelsea
Occupation: Urban Planner
Residence: Denver, CO
Traits: highly active, travels to participate in biking events.
Persona Match: Devon
Occupation: Software Engineer
Residence: Boulder, CO
Traits: highly active endurance runner and cyclist. Has completed Leadville 100 ultra marathon.
Persona Match: Devon
Occupation: Cartographer
Residence: Denver, CO
Traits: Highly active endurance runner, cyclist, and skier. Has completed Leadville 50 ultra marathon. Interested in mapping, and GIS.
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.
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:
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:
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:
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:
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.