360Score.Me

Redesign of the 360Score.me website

Redesign of a website that schedules, customizes, manages, and automates anonymous peer evaluation surveys.

Overview

Proposal: Redesign an intuitive, user-friendly platform that monitors and manages workflow of anonymous peer evaluation surveys.

Timeline: June 2024 – August 2024 | Responsibilities: UX Designer | Teammates: Stakeholders (Internal Feedback)

Goals:
- Redesign a complex, outdated survey management system into an intuitive, user-friendly platform.
- Resolve critical usability and accessibility (508 compliance) issues.

Outcome (KPIs):
- Accessibility Readiness: Transitioned the interface toward full 508 compliance (WCAG standards) by implementing keyboard accessibility and screen-reader support.
- Reduced Cognitive Load: Simplified the navigation through a clear information hierarchy and dashboard-centric design.
- Increased Engagement: Revitalized the "Employee Shout-Outs" social feature to encourage interactive peer recognition.

Previous Design Appearance

Previous Homepage:

outdated, misaligned texts, overuse of grayscale color palate, no intractability.

Previous Step-wise survey set-up page:

outdated elements and color choice, inaccessible button sizes, text blends in with the background, making it in hard to read.

Previous Employee Shout-Outs page:

A boring and outdate page that has no clear hierarchy, making it confusion to navigate a page that is supposed to be used as a social media platform for employees to interact with.

Research Phase & Decisions

Methods Used: Critical Analysis of Legacy Design, Accessibility Audit, and Interaction Mapping.

Insights:

Visual Frustration: Functionally different buttons shared the same colors, leading to user errors.
Accessibility Gaps: The platform lacked alt-text, labels, and hover effects, making it unusable for those relying on assistive technology.
Navigation Fatigue: There was no clear hierarchy on the homepage, forcing users to "hunt" for the survey setup tools

The design appears outdated with misaligned elements, excessive grayscale, and random placements. Functionally similar buttons share the same color, and there are typography issues, like blue text that looks hyperlinked but isn't.

Visual Design

Accessibility & Usability

Not 508 compliant: not keyboard accessible, lacks alt text and screen reader support, has color and text size issues, no labels, and no hover effects for element functionality.

Product Structure

The webpages lack a clear information hierarchy, with disorganized and inconsistent elements on the homepage. Navigation is confusing, making it difficult for first-time users to understand the pages.

Interaction Design

Same color for different functions, non-interactive dashboard elements, and no clear hierarchy.

Ideation

Discovery Method: I focused on a Dashboard-First approach to provide a "high-level view" of all survey workflows immediately upon login.

Narrowing Down: I prioritized three core pages for the redesign: the Dashboard (for management), Survey Setup (for functionality), and Employee Shout-Outs (for social engagement).

Tools: Figma, Canva, Trello, and Microsoft SharePoint.

Sketch of the dashboard

My Redesign

Homepage:

Added intractability via a dashboard structured homepage. Clear hierarchy and clickable elements, enhanced visual design by changing color palette, font style and text sizes.

Survey set-up page:

Clear hierarchy showing users how to create and set-up survey before heading off to the steps. Clickable buttons with different colors to indicate different functionality.

Survey set-up page:

Check-mark list on step-wise instructional guide on how to set-up survey. Clickable buttons with different colors to indicate different functionality and clear hierarchy.

Employee Shout-Outs page:

Added filters and tags. Added more colors to make the visual aesthetic more interesting. Provided descriptions instructions on top of the page for users to understand what page they're looking and how to interact with it.

Testing & Iterations

Initial assessments identified that the blue text was frequently mistaken for hyperlinks when it wasn't. Changes Made:

Interactive Cues: Implemented hover effects and distinct color-coding for buttons to clearly indicate functionality.

Guided Workflow: Introduced a "Step-wise Instructional Guide" for survey setup, replacing the previous disorganized manual steps. Client Feedback: Stakeholders required a more "social" feel for internal culture; I responded by adding filters and tags to the Shout-Outs page to make peer interaction more seamless.

Reflections & Next Steps

What I learned: Hierarchy Over Aesthetics: While updating the color palette was important, the biggest win was fixing the "Information Hierarchy," which turned a confusing list of links into a functional management tool.

Next Steps:

A/B Testing on Completion Rates: I intend to run comparative tests to see if the new "Step-wise Survey Setup" reduces the time-to-completion compared to the old design.
Mobile Responsiveness Audit: While the current redesign focuses on the web dashboard, the next phase will ensure the "Shout-Outs" page is fully optimized for mobile devices to encourage on-the-go employee interaction.
Advanced Analytics Dashboard: I plan to explore adding data visualization widgets to the homepage so users can see survey participation trends in real-time.