Hi Fidelity Design Kit Framework Synching Process

Project Details

Project Responsibilities
Product Design
Tools Used
Design Kit: Sketch, DSM: Invision

Introduction

The CEO Design Kit is a collection of configurable components made up of Symbol in the Mac OS program Sketch and is updated biweekly to stay in alignment with the WFRIA framework release. The components are used like Lego pieces to create web applications screen designs for three different business work streams Enterprise, Commercial and Small Business.

Design Challenge

To create a more unified design experience by creating an aesthetically matching course menu UI that is consistent with the course catalog.

Original Course Menu Desktop Example

Facebook Blueprint Original Course Menu User Interface Design Desktop Example

Critical Analysis

Usability

  • The original UI was designed to show 2 courses per row, causing desktop users to have to scroll, instead of allowing for more vertical viewing.
  • The back arrow and hamburger menu were missing, breaking heuristic laws.
  • The exit icon on the top right banner is not globally recognized as a close-screen icon.
  • The launch course button is located on the left instead of the right side of the menu, causing confusion for users.
  • The footer is not present. It is missing secondary menu options.

Aesthetics

  • The banner color, module color and button colors are different than the more sophisticated color theory that is used for the new course catalog.
  • The gradient banner image is right below the header. This is an out of date design style.
  • The course module information takes up too much room and should be reorganized to conserve space.
  • There is no footer present.

UX Design Process

Course Menu Early Sketch Ideas

Facebook Blueprint Course Menu User Interface Early Sketch Ideas

Sketch Idea Generation

I used the 1-minute sketch technique to generate grid menu layout ideas.

Wireframes

Desktop, Tablet and Mobile

Screens Explained

Wireframes were used to organize the user-interface into recognizable design patterns, so that the user could easily navigate the application. Responsive grids were used for the desktop, tablet and mobile layouts. The wireframes are used as the blue print for the redesigned UI, removing all color, text and imagery, so that the user can focus on the structure of the site.

User Research

Course Catalog and Certification Page Used for Branding Research

User Research

I used the Invision Rapid Prototyping tool to perform user research. I was able to evaluate what pages, settings and options were most important to users for this application.

Usability Feedback Case similarities

  • Users wanted a drop down menu on the course menu page that
    offered more options; such as a home button and an admin page link.
  • Users wanted a bookmark and a share icon next to each course
    article to allow more options.
  • The VIEW course button was originally on the left side of the
    component but users were confused because of the unconventional
    design pattern, so I moved the button to the right of the screen.

Course Menu Responsive Hifi Comps

Conclusion

The course menu UI was redesigned to match the design aesthetic of the course catalog. This allows for the user to have a unified user design experience. The brand identity of the course catalog was used to redesign the course menu UI, utilizing the same colors, fonts, shapes and assets. User research was performed to enhance product features. A grid system with breakpoints for desktop, tablet and mobile was used to make the site fully responsive.