Facebook Blueprint Course Menu Redesign Case Study

Course Menu After Redesign Desktop Example

Facebook Blueprint Course Menu User Interface Redesign Desktop

Project Details

Project Responsibilities
User Experience and Interface Design
Tools Used
Wireframes: Wireframe.cc. Hifi Comps: Sketch. Prototyping: Invision.
Format
Responsive Web Design: Desktop, Tablet and Mobile. File Format: Vector Graphics. Export Size: 1X.

Introduction

The Facebook Blueprint course menu redesign concept project was created out of the need for a consistent look and feel across all Facebook Blueprint property, in order to create a unified, cohesive, user experience. The Facebook Blueprint Team runs an e-learning platform to educate small business owners in the use of Facebook advertising tools to promote their products and businesses on Facebook. The Facebook Blueprint e-Learning program uses a custom CMS-system, featuring the full course catalog, that has a modern user interface design. The courses use a separate application and have an older, out of date design aesthetic. I redesigned the course menu user interface so that it matches the design aesthetic of the course catalog.

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.

BACK