Roles

At GA I was the main visual designer on the product team. My responsibilities were to coordinate with the brand side designers as well as the other UX designers and developers to unify the GA brand and make visual enhancements.

This project was a chance to flex some UX and design skills, with that being said this project was not done with a team, all UX, design, and illustration is custom made.

Objective

At the point at which I had started at GA the product had been very focused on function and not as much on form. There were different concepts from different eras living in one brand ecosystem and it would be my job to improve what worked, phase out what didn't, and work towards a more cohesive system to guide future updates.

GENERAL UPDATES

As a starting point for the design unification, I ran several surveys and user tests to gauge brand awareness, perception of the brand tone between students, professors, and employees, and had several interviews with stakeholders to get a sense of how to move the brand forward in the most positive way.

Over the time spent at GA I worked with the brand team to unify color, typography, and imagery. I also worked with the developers and other product designers to create an overarching animation/content loading concept that would give the products a more dynamic feeling and support the learning process. I created concepts and variations of the design of the platform experimenting with layout, color pacing, and typographic heirarchy.

GA-Logo

DESIGN EXPLORATION

Given a blank slate, the first thing I was tasked with was to explore all the possiblities of color use, imagery, layout, and typographic heirarchy shifts within the lesson overview pages that inform students what they'll be learning. These explorations were informed by surveying students, professors, and employees of GA.

While exploring visual elements I was also crafting an animation language that could be used going forward to offer a dynamic and energetic feeling to the lessons without getting in the users way. Since we wanted them to be able to learn easily but also have a smooth experience. The animation revolved around forward motion and used cues that would help them more easily process data and understand when they've reached new sections. This meant adding subtle animations to UI as well as whole page transitions.

1_3IWEaIssuoLSu4U7Y-hdgQ
1_fY2GeYo6Uj0l9qziupfn3Q
mobile-transition
content4

This is just a few select screens, if you want to see it all check out the prototype.

These are just some select screens, to see them all check out the prototype.

SIDEBAR UPDATE

To make user navigation easier we began exploring sidebar navigation that would give students the ability to move back and forth between content more easily. This prompted many overall navigation explorations, animation explorations, and also influenced a lot of smaller unification efforts including the way that we show progress, animate content, and scale across different viewports.

Early Exploration

Mobile Exploration with Navigation

Menu-Style2-1 Copy 10
Menu-Style2-1 Copy 13
Menu-Style2-1 Copy 11
Menu-Style2-1 Copy 14
Menu-Style2-1 Copy 3
Menu-Style2-1 Copy 5

End Result

mobile-finallesson
final-lesson

FINAL LESSON FLOW

The long process of design exploration and research lead us to create a streamlined and upgraded lesson structure for students that offered not only a more cohesive and dynamic lesson structure, but also added more moments of small delights and enjoyment in the UI. The sidebar navigation improved the ability to flip through sections much more easily, increased animation made the platform feel more alive, and the improvements to the layout, color, and imagery offered better color pacing and a more refined design.

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.

Artboard

PHOTOGRAPHY

To increase the brand presence, humanity, and aesthetic of the platform, we came to the conclusion that there would need to be more elements of photography to use. From there I began sifting through current photography and outlining the points of separation in order to narrow down the most successful ideas to move forward with. After that I began coordinating with instructors and a photographer to begin shooting new photography assets. I art directed, produced, and organized three days worth of photoshoots to provide assets for several different course types to be used in the future iterations of the website, learning platform, and marketing materials. All the shots are candid, we worked to capture real moments within the classroom. Here are a handfull of samples:

GA_DEC10_Edited-19
GA_DEC11_Edited-4
GA_DEC11_Edited-15
GA_DEC11_Edited-48
GA_DEC11_Edited-75
GA_DEC13_Edited-16
GA_DEC13_Edited-26
GA_DEC13_Edited-27

The direction for photography was to keep imagery bright, warm, and positive while also making sure to show diversity in ethnicity and age. We used natural light to create a bright atmosphere and captured different learning perspective using over the shoulder photography as well as different classroom angles. Some of the challenges of this task were to capture authentic scenarios with minimal intervention and capture specific activities relevant to coursework.

CREDITS

If everyone moves forward together than success takes care of itself. This project would've never happened without the following people:

There's no I in team, but there is a me, and meat, here's all the people who helped make this happen.

Alissa Umansky

Senior Director of Product Design

Bryan Berger

Product Design Principal

Digital Creative Director

Abigail Chansler

Senior Product Designer

Jason Hu

Product Designer

Kyle Eberle

Product Designer

Kait Ebinger

Photographer

Let's get in touch, drop me a line.

Keep Browsing

Responsive Web Design

Instagram-Light
Instagram-Light Copy
WorkingNotWorking Copy