Hi Fidelity Design Kit Framework Synching Process
Design Kit: Sketch, DSM: Invision
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.
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.