Facebook Blueprint Course Menu Redesign Case Study
Course Menu After Redesign Desktop Example
User Experience and Interface Design
Wireframes: Wireframe.cc. Hifi Comps: Sketch. Prototyping: Invision.
Responsive Web Design: Desktop, Tablet and Mobile. File Format: Vector Graphics. Export Size: 1X.
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.
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
- 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.
- 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
Sketch Idea Generation
I used the 1-minute sketch technique to generate grid menu layout ideas.
Desktop, Tablet and Mobile
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.
Course Catalog and Certification Page Used for Branding 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
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.