Case Study

Design System

Overview

EduShop is a POS website that saves bookkeepers time by promoting online payments and generating realtime reports. EduShop can be customized for each client. The expert EduShop team or the client adds listings to the website. Listings can be products or fees.

Problem

Website lacks organization and is overwhelming. A strategy was needed to increase website usability and scalability while reducing time spent on organization.

Users & Audience

Users are the EduShop team and clients. End users are the customers.

Role & Responsibility

Design and audit lead.

Solution

Create a design system to provide a centralized set of standards with flexible components and documentation.

Scope

  • Landing page (homepage) will promote popular and special/temporary categories.

  • Navigation will be called “Shop” (orig. “Browse”).

  • Shop menu will link to main categories (i.e. school, program, special events).

  • Categories will be organized by school or program based on client structure.

  • Reporting and financial elements will follow a pattern to reduce duplicates and errors.

  • Navigation layout will always be set to top right.

Constraints

  • No search feature on website.

  • No filter feature on website.

  • No listing “display” name vs report name.

  • Several fixed homepage layouts to choose, unable to customize.

  • Two navigation layouts: full-width or top right.

Process

Research competitor and general ecommerce websites to identify terms used in place of “Browse”. Most popular was “Shop” so this was used for its familiar meaning.

Test EduShop navigation and choose the best layouts from the provided options. The full-width navigation layout created frustration because menus would stay on screen longer than needed and block landing page navigation or text. The grid layout was most flexible for new and growing websites and was nominated as the default. The carousel featured a large slider above 3 blocks (additional block rows could be added but were lost below the fold). Carousel was nominated as secondary for smaller websites.

Define a naming structure for listings, groups, and pages. After studying listings at 20+ client websites, I devised a pattern to follow. The same rule was used for groups and pages. Since the website lacked search and filter features, this naming structure acted as a map for fees. Some names could get lengthy but the payoff of visibility in reports, receipts, and guidance for anyone needing the information was greater than the occasional inelegant result.

  • Start with school or program name

  • Specify event or sub-program

  • Pinpoint exact fee by date or other detail

Introduce to users and get feedback on live website. All research was realtime use and qualitative. If a client was resistant to the change, we’d explain the benefits while also revisiting the standards. If better methods were identified, we revised and implemented.

Document strategy best practices and encourage flexibility for edge cases.

  • Word lists

  • Accepted acronyms

  • Where to find client organization (one or more schools, programs)

  • Formatting content in a listing

  • HTML/CSS components

  • Naming structure

  • Date, time, phone, and email formatting

  • Basic HTML/CSS training

  • List use cases

  • Integration setup

Audit and update all existing websites.

BEFORE

AFTER

Outcomes

The EduShop team was able to create a framework for new clients that was easily scaled as listings were added. Existing websites were audited and if found to need reorganizing, I worked closely with the client to ease concerns and implement changes.

Client trust of the EduShop team grew. Many clients relinquished content management back to EduShop due to demonstrated expertise. Some clients still pushed back on the naming structure but understood the value.

Customer calls to the client were reduced. Listings were easier to find as a result of the organization.

Lesson

Present day, what I created was likely a form of design system. When I was in the midst of this project, I thought it was just a general strategy and style guide. Had I known about UX and product design at the time, I would have developed a better, engaging documentation. We used a PDF that was “released” after batches of revisions were agreed upon.