A redesign case study of Academy of Art University Classes App, a Learning Management System used by students and Instructors at the Academy of Art University to track classes, schedules, syllabus, assignments, roster, etc.The brief was to create a brand identity redesign and give it a fun and fresh look.
Type
Personal | In class project
Role
UX Designer
Duration
Spring 2020
Tools
Figma, Adobe XD, Photoshop, Illustrator
My Design Process
01
overview
02
preliminaries
Heuristic Evaluation
Current Design
Started with a Heuristic evaluation on the current design of the app in order to define my goals for the redesign.
03
define
Redesign Goal
01
Login and authorization process
Login Page has more than one CTA and could have been more welcoming. Also one step back in the app redirects to authorization.
02
Appearance to imply a Design University App
Fix Visual Hierarchy, portraying the importance of each function without chaos, and giving the look and feel of a Design University
03
Improve Navigation and information flow
Reduce the number of steps and ease the flow of finding information with accessible CTAs
04
Research & discovery
Audience Research
User Interviews
Key Insights
I interviewed a range of users of the app and an external to understand users pain points from various perspectives. This would help me build my personas and to define their needs.
01
Karthik Student at AAU
Finding particular information on the App is a bit tedious. The look and feel is not welcoming.
02
Heather Instructor at AAU
Not convenient, overwhelming and chaotic. Would love to be notified about upcoming events and workshops.
03
Steven UX Expert
A Current state Analysis would help to understand the functions that need to be kept and that to get rid off.
Personas
Defined 3 personas each from a range of Target Audience
Depending on the above insights I created these imaginary users with genuine frustrations and needs. These personas would guide throughout to make design decisions.
01
Lily Evans | Instructor
“I need an easy way to respond to emails, update login hours and check discussions while I am away from my desktop and travelling.”
02
Jake Kaiser | Online Student
“I work full-time and want to be up-to-date with open and close dates for modules/assignments & access the information quick and easy.”
03
Amy Miller | Onsite Student
“I want a way to locate all the information and updates about upcoming events at once following less number of steps.”
05
planning
Scenarios
A day in the life of
Came up with scenarios for the persona depending on the needs and frustrations. This helped me to define 3 different user flows for the app.
Storyboard
User Flows
Define User Journey
I defined user touch points on the basis of user stories and this helped me to pick and sketch key screens of the app.
06
design Process
Paper Prototype
Medium Fidelity wireframes
06
testing
User Testing
Round 1 of User Testing
Carried out first round of testing for all 3 tasks with students of AAU using the Invision prototype on zoom and made note of the key feedback.
Samaneh Telanejad (Hybrid Student)
It gives the feeling of a website instead of an app still, may be use card format?
Yi Zhu (Onsite Student)
For Pop-up screens the opaque background is too bright and brings chaos.
Karthik (Onsite Student)
In task 1 the attachment and post options are not well arranged and could be confusing.
Key Changes
What Changed?
Taking feedback from first round of testing made key changes to the medium fidelity screens.
BEFORE | AFTER
Changed to card type format overall
BEFORE | AFTER
Adjusted opacity of background for pop-ups
BEFORE | AFTER
Limited Use of Icons to reduce chaos
A B Testing
Side by side comparison
Carried out A B Testing for Key screens via google forms and received a total of 12 responses.
Reply to Discussions screen
Using icons as CTA compared to text
66.7% chose B because at first glance, it's easier to know what to do on the page instead of clicking into icons that you don't necessarily recognize if you're not familiar with the app.
“Compose Mail” Screen
Adding format options and test placement of “SEND” CTA
55.6% chose B because of the text formatting layout. Adding these in A layout would make it more user - friendly
Hamburger Menu
Placement of options in the Menu
57.1% chose A since it’s consistent and the title bar sticks The highlighted field in B helps to understand in which page user is currently
User Testing
Round 2 of User testing
Conducted and moderated a final round of user testing with high fidelity prototypes on Invision via zoom and in person.
User Reviews | Key conclusions
- Not used to the options in the Hamburger Menu, so new user might need a nudge - Home Page & Mailbox is clean and easy to use. - Clear Navigations - Clean Design, Intuitive flow easy for a first time User. Bright color and usage of hierarchy guides through the flows.
07
Final Design
Final Task Flows
Invision prototype
Refined each screen in the user flows taking feedback through several rounds of user testing.
- Shifted the Events and Workshops to another screen with easy access to know more and sign up instantly. - Added important options on the landing page. - Shifted less important things below giving it more breathing space and easily clickable options.
What changed?
- Cleared the Hamburger Menu with better Navigation and clean visuals. - Added bottom Navigation for quicker access.
.svg)
.svg)
.svg)
.svg)
.svg)
