General Assembly

General Assembly

General Assembly

General Assembly

UI / UX, Marketing

UI / UX, Marketing

General Assembly is a school for subjects like User Experience Design, Development, Marketing, and has campuses all over the world. 

Roles

Roles

As the primary visual designer on the product team my responsibilities were to evaluate and improve the overall branding and design of the learning platform by coordinating with UX designers, developers, and the brand team to create a more dynamic, branded, and enjoyable experience.

Design Timeline

Design Timeline

Design Timeline

Design Exploration
Design Exploration
1

My first objective was to explore new ways, new elements, and new ideas for the learning platform and the brand itself. This process involved countless iterations, reviews, and reimaginations. It also involved creating a survey to test visual elements with students, teachers, and employees at General Assembly.

My first objective was to explore new ways, new elements, and new ideas for the learning platform. This process involved countless iterations, reviews, and reimaginations. It also involved creating a survey to test visual elements with students, teachers, and employees at General Assembly.

Discovery & Action
Discovery & Action
2

Through exploration I was able to uncover some key findings that would influence upcoming design. First, the platform was very functional but not dynamic. I began to explore and define a motion system that would be used to add moments of polish and movement to the platform which would be used to guide learning and give users moments of enjoyment throughout the process. Second, General Assembly had introduced several brand revisions over a short amount of time, so there would be a need to unify and simplify the overal brand feel. And lastly, the platform was very static and lacked the personality that the campus offered, so it would be essential to infuse those elements into the digital experience.

My first objective was to explore new ways, new elements, and new ideas for the learning platform. This process involved countless iterations, reviews, and reimaginations. It also involved creating a survey to test visual elements with students, teachers, and employees at General Assembly.

Bringing It Together
Bringing It Together
3

These findings quickly went from conceptual to practical in an initiative to update the way users would take lessons on the platform. The introduction of a new navigation structure, motion design elements, UI improvements, and a redesign of the lesson structure would combine all the ideas that we had tested over the previous months. The new and improved platform would be more visual but also easier to navigate, it would feel less like a powerpoint and more like a learning experience. It would convey GA brand through photography, UI, and motion. This involved several feature updates, redesigns, and several photoshoots.

My first objective was to explore new ways, new elements, and new ideas for the learning platform. This process involved countless iterations, reviews, and reimaginations. It also involved creating a survey to test visual elements with students, teachers, and employees at General Assembly.

collage-3-min

Motion

Motion

One of the areas that needed the most work on the online platform was the motion system, or lack thereof. The design felt very static, as if a slides presentation. To address this I'd develop a system of animations that would be slowly introduced to add more life to the design. It would be incredibly important to not overanimate, or get in the way of the learning process. I began referencing animations that were backed by best UI practice and data to support them, and then developed conceptual animation ideas for larger transitions. 

You've got to start somewhere...
You've got to start somewhere...

As a first step, simple page load animations were added as a sort of low hanging fruit introduction to animation. This would cover a lot of ground quickly, and was also an easy implementation step to get the ball rolling.

content4
mobile-transition
GA_Loding-Gif
Getting creative with data backed patterns.
Getting creative with data backed patterns.

Elements like dynamic value changes would add meaninful motion that would sweep across the platform. It would provide a visual progress cue for users that would take place in a number of areas on the platform. This was a strategic introduction backed by data that would make a big difference.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Functional animation for meaningful movement.
Functional animation for meaningful movement.

Dynamic value change was the first step to the functional animation concept. How could we encourage our users with even the simplest UI animations, the direction of our button animations or a page transition? I started to create rules for animation as encouragement. Simple ideas that could hopefully subconciously influence the users to progress forward.

Photography

Photography

Natural light, diversity, & candid moments.
Natural light, diversity, & candid moments.

Having multiple campuses in locations all over the globe is great growth for a young company but it also poses consistency issues for marketing materials and online learning. As an initiative to slim down and refine the branding I audited and tested existing image assets and used that to create a standard for future asset development. To put it into practice I produced and art directed a series of photoshoots to use in the refresh. 

Having multiple campuses in locations all over the globe is great growth for a young company but it also poses consistency issues for marketing materials and online learning. As an initiative to slim down and refine the branding I audited and tested existing image assets and used that to create a standard for future asset development. To put it into practice I produced and art directed a series of photoshoots to use in the refresh. 

Having multiple campuses in locations all over the globe is great growth for a young company but it also poses consistency issues for marketing materials and online learning. As an initiative to slim down and refine the branding I audited and tested existing image assets and used that to create a standard for future asset development. To put it into practice I produced and art directed a series of photoshoots to use in the refresh. 

Feature Update: Sidebar

Feature Update: Sidebar

Simple & easy navigation.
Simple & easy navigation.

The introduction of the sidebar navigation would give users the ability to quickly move through courses in a way that previously wasn't available to them.

The introduction of the sidebar navigation would give users the ability to quickly move through courses in a way that previously wasn't available to them.

The introduction of the sidebar navigation would give users the ability to quickly move through courses in a way that previously wasn't available to them.

Bitmap
Lesson-Child

Next Lesson Flow

Next Lesson Flow

While working on the brand structure, creating all the rules around motion, photography, and use of brand elements within the online platform I was working on a parallel path with UX designers to reinvision the lesson structure and implement a new sidebar navigation. Up until this point there were different types of learning paths that would behave differently, in this act we would improve the overall lesson flow/user experience while creating one uniform function of the learning platform. This would take all the ideas and improvements I had been working towards and put them to use.

myGA dashboard Copy 120

Dashboard Enhancements: Introduction of image, typographic refinement, introduction of horizontal progress bar with progress animation to match sidebar.

Overview-Template Copy 10

Unit Overview: This page was one of the most focused on over the course of the explore, it recieved a much more graphic layout and typographic treatment. This page serves as the first introduction to an entire learning path, the front bookend to the entire experience.

Lesson-Intro

Lesson Introduction: This page internally did not see any design updates, it is however the first section within the learning path where users are first introduced to the sidebar navigation.

Lesson-Child

Lesson Content Slide: These slides were minorly updated, but the small changes went a long way to improve the lesson navigation. Page numbers were introduced as a replacement for a horizontal progress bar that conflicted with the overall progress across sections. Arrow navigation was given UI animation and the "Back to Dashboard" button was introduced as an escape hatch to get users out of lessons easily. The lesson experience went from an open experience to a full screen update to keep users more focused on their current lessons.

Lsn_Comp_15 Copy 10

Lesson End Experience: Previously the lesson end experience for users was a congratulatory slide at the end of the lesson, a prompt to rate the lesson, then a lesson summary. The new lesson end experience combines the congratulatory moment with the rating to offer users a more personalized congratulations without impacting the ability to capture data.

UX Design Process (Live) Copy

Lesson Summary: The most significant update to the end of lesson/end of learning path design was the introduction of the "Next Assignment" panel on the right. Previously the user would have to exit to the dashboard to continue to another learning path or assessment, with this design they could seamlessly move on to the next lesson, and if they completed all lessons in a path, they could move to the next most urgent assignment.

Credits

Experience

Experience

Credits

This project couldn't have been accomplished solo, here's all the key players.

Graduated with top portfolio nominations and a Bachelor of Fine Arts degree in Communication Design.

Senior Director of Product Design

Alissa Umansky

Alissa Umansky

UX Design Principal

Bryan Berger

Bryan Berger

Senior UX Designer

Abigail Chansler

Abigail Chansler

Product Designer

Kyle Eberle

Kyle Eberle

UX Designer

Jason Hu

Jason Hu

Photographer

Kait Ebinger

Kait Ebinger

Get in Touch

Get in Touch

I am currently working on the Google Primer team based in NYC but I’m always down for a chat. If you’d like to collaborate together or just shoot the shit, drop me an e-mail.

I am currently working on the Google Primer team based in NYC but I’m always down for a chat. If you’d like to collaborate together or just shoot the shit, drop me an e-mail.

I am currently working on the Google Primer team based in NYC but I’m always down for a chat. If you’d like to collaborate together or just shoot the shit, drop me an e-mail.

I am currently working on the Google Primer team based in NYC but I’m always down for a chat. If you’d like to collaborate together or just shoot the shit, drop me an e-mail.

ALEX MILLER DESIGN / 2021
ALEX MILLER DESIGN / 2020
ALEX MILLER DESIGN / 2020

THANKS FOR STOPPING BY.

THANKS FOR STOPPING BY.