gibson splash screen

APP / UX / UI

Amped / Gibson

Amped is Gibson's guitar learning app that teaches users to play guitar through the use of augmented reality.

THE PROJECT

I was tasked with improving the home screen of the app with the following considerations:

MY ROLE

I took full ownership of the project, creating use cases, onboarding flows, and user journeys. Additionally, I developed a new layout and design for the home screen.

THE RESULT

The outcome resulted in a significantly improved UX, with the new approach addressing all user needs. The redesigned home screen layout improved navigation, making it easier for users to find content. The client was thrilled with the new version.

App Home screen

To the left, the previous version. Right, my updated UI

gibson home screen

Use case 1

First time user

User partial completes onboarding

Load screen

Load screen

Start onboarding

Start onboarding

Onboarding

Onboarding

Introduction, the setup of system, tune of guitar and tutorial of the app

Updated home screen

Updated home screen

Welcome message

Greeting current user

Progression section

The user has started the onboarding process and can easily resume where they left off

Learn section

User can swipe left to see more or View all which opens the learn page

Song section

User can swipe left to see more or View all which opens the songs page

Watch section

User can swipe left to see more or View all which opens the Watch page

Navbar

The categories have been arranged based on the assumption that these are the most frequently used. The "More" option opens a menu containing additional categories, including Shop, Settings, and Account

Scrollbars

All content now fits within the view pane, allowing users to easily get an overview without the need to scroll

use case 2

FIRST TIME USER

User skips onboard

Load screen

Load screen

Start onboarding

Start onboarding

Onboarding

Updated home screen

Progression section

Displays where the user left off last time. In this case the user has not started.

Load screen

Load screen

Start onboarding

Start onboarding

Onboarding

Updated home screen

Progression section

Displays where the user left off last time. In this case the user has not began.

use case 3

Returning user

User can easily resume learning

Load screen

Load screen

Onboarding

Updated home screen

Progression section

User has stared the learning and can easily resume where they left off

Learn section

The courses user has began or completed will disappear from this section

Load screen

Load screen

Onboarding

Updated home screen

Progression section

User has began the learning and can easily resume

Learn section

The courses the user has started or completed will no longer appear in this section.