top of page
redesigning an entire global brand with A team of three amazing people
In 2019, CBT Nuggets, a company focused on video training for IT professionals, decided it was time to refresh it's entire brand. This included new website design, social media design, and a fully interactive design system with plug-n-play buttons, icons, text, and more. Along with a team of three other incredible designers, we brainstormed, researched, and eventually came up with an entirely new design system that included colors, graphic styles, text, logo implementation, and much more.
As a vital part of this small team I had the personal advantage of working with the head of marketing, the head of development, and the CEO to make sure the vision and values of the company were communicated through this massive change in visual design.
Using tools such as InVision, Sketch, Craft, and DSM (also from InVision) we were able to create a system to organize, simplify, and categorize all of the assets from our entire website and app. This way we are able to create high fidelity prototypes, web pages, graphic design, and app updates quickly while staying within brand guidelines. Using these tools also helped ship the products more efficiently because it compiled all assets and details such as svgs, padding, and text size for developers.
This process took several months, but we were able to rebrand and redesign the entire CBT Nuggets online persona. Here are some brand refresh notes, pages from our design guide, and a few examples of the work that went into this brand refresh. You can also see the current website at www.cbtnuggets.com for an example of the usage of brand guidelines, or visit any of CBT Nuggets social media platforms for a more in-depth view of our brand story.
UX Design Example
UX Design Project Example
As an example of the process I use for UX design, I am going to show you several examples of my logical and creative process as I approached the massive project of creating a comprehensive iPad e-learning app for both learners and teachers at CBT Nuggets.
The most important goal of the project was to keep the lesson content in the 2/3 section of the screen as much as possible, while most interaction was implemented in the 1/3 section. This made certain that the lessons (the main product) was always in view and easily accessed.
This design contained over 300 pages of high fidelity prototypes and whiteboards, all linked together via InVision and tested and reviewed by multiple stakeholders. Here is a small taste of the process that went into this project.
The home page:
The goal of the homepage was to create an overview of a user's past training and showcase goals and recent achievements as a way of encouraging additional training, as well as reducing the barriers to continue training.
The first step was to meet with the stakeholder to get general ideas and requirements for the product. Once that was done, simple user flows were created based on user profiles, competitor analysis, and research.
The most important goals of the home page were accomplished using visuals such as a graph to show the amount of recent training. There are also elements utilizing text hierarchy to emphasize rewarding the learner for amount of time spent training.
The home page also uses simple text to provide easy access to favorite training, and immediate access in the 2/3 area of the screen to the lesson they were previously learning. It also gives access to profile information and visual confirmation of user permissions.
After visiting the home page, a learner can easily become motivated to start learning something new, resume their favorite training, or just pick up where they left off without interruption.
The Reports page:
The goal of the reports page is to create a place for learners to access information about the training they have done, as well as request an automated email containing all report information on a regular basis.
The stakeholder requests included being able to easily see a "30,000 foot view" of the overall success of the training of a learner. Along with a wide view, the reports page would allow a learner to view, download, and automatically send reports of their training to themselves.
The designs were specifically curated so the learner would also get a feeling of accomplishment knowing they succeeded in their goals.
By using techniques such as text size, selectable/highlighted icons, and minimalistic buttons, the navigation of the reports was easily maneuvered even by those who had never used it before.
The goal of motivating learners to increase their training was also emphasized by using blocks of large text numbers that stand out in comparison to other elements.
Reports
Team Learning
The Team learning page:
Team learning was created to facilitate video, chatting, and scheduled learning on a single lesson.
The main goals were to create a simple structure to either join a team, start a team call, or schedule one. The options of moderated and unmoderated were to both be easily accessible, as well as scheduling future team sessions that learners can join.
I started with competitor research, seeing what worked and what didn't in other products that include video chatting. I didn't want to do things exactly the same, but still wanted to stay within best practices when creating user flows and mockups.
The mockups put a priority on easy access to the microphone, video, and end call buttons. I considered where to place the video of the current speaking user vs the user of the app, how many users to comfortably place on screen at once, and how to manage chat options while video was playing.
The most important goal was to keep the entire video and chat inside the 1/3 area of the screen so the users could continue learning the lesson at the same time as chatting about it in a session.
Considerations were also taken on how to implement moderated vs unmoderated video sessions in order to facilitate either trainer-led sessions or learner groups meeting up on their own.
Scheduling and calendar services were also added to team mode so future sessions of team chatting could be organized in advance.
The Trainer studio page:
Trainer studio is a page where a trainer can create the lessons that learners will see, as well as request and receive feedback from moderators, which they can then edit in-app to create a seamless flow of content creation, whether text, images, video, or quizzes.
No only did we want to be able to create training completely from scratch, but also wanted the ability to allow moderation by supervisors, editors, and other collaborators.
The portion of the studio that was meant for trainers to create content was created with an emphasis on easy editing. This is accomplished using text color, hierarchy, and recognizable iconography to communicate larger ideas in a smaller space such as "add" "edit" or "delete".
In the first step, a trainer would be assigned specific topics to train on by a moderator. They would then create content in the larger "2/3" portion of the screen.
This was accomplished using icons to indicate which type of training they wanted to add to a specific area. Once that training was added, they could move on to add more training elements to the lesson page, or use the "1/3" area to edit titles, rearrange lesson elements, or delete them entirely.
When rearranging in the smaller third, the lesson also rearranges itself in the larger viewport for a clear preview of what a learner will see when viewing the training.
The moderation portion of the training was created as a multipurpose communication system. A moderator could create and assign playlists and lessons to specific trainers, assign reviewers, and review training.
This was accomplished using a chat-like feature and a notifications system to alert both trainers and moderators when a lesson was ready for review or ready to be published.
This feature uses components from other chat features in similar apps, such as simple, clean chat areas, obvious buttons, and simple icons communicating in a minimalist way.
The most important elements in creating a successful design include icon size/hierarchy, text organization, and simple organization of pages in order to keep the flow consistent and easy to navigate.
Trainer Studio
Jobs
The Jobs page:
The main goal of the jobs page was to not only to create a place for learners to use a reward and validation system, but to prove to employers that they have what it takes to work with them.
It also serves as a place for employers to hire those who have the experience they are looking for. It also includes features such as a resume builder and other helpful features.
Conclusion
Conclusion
The entire process for developing these notes, user flows, and doing research is for the learner. The end user deserves a clean, understandable experience and by using these proven techniques, I ensured that they got a positive experience they could rely on from a trustworthy educational platform.
bottom of page