UX IMPROVEMNTS TO MESSAGING
RESEARCH / WIREFRAMES / USER TESTING / HIGH FIDELITY PROTOTYPES
The Problem
The Visual Design Team had made updates to McGraw Hill Education's style guide which required the entire Open Learning platform to convert to the new theme kit. We decided to tackle the messaging app first, which also needed improvements on overall UX flows UI elements. Throughout the process, I worked with the product team, engineers, and stakeholders.
Identifying Areas to Improve
The first step was to pinpoint areas to improve in the existing messaging pages regarding UX flows and elements. This would also help drive our design decisions for the low fidelity mocks and identify features for MVP with stakeholders. I started out by analyzing inconsistencies and suggesting improvements to the UI and UX.
Screenshots are platform’s original screens.
New Style Guide Colors
Primary colors of the new style guide from the Visual Design Team.
Preliminary User Research
Coordinated with the UX Research team to come up with survey questions for our platform users which consisted of both K-12 and Higher Education. Some questions included were:
Which groups are you frequently messaging? (Data table)
Purpose of messaging by user type (ex. Previously uploaded used often? What do they usually attach?)
Do you message more individuals or groups?
What do you use the contacts tab for?
How often do you go to the Contacts tab to send messages?
What do you use contacts popup inside compose for?
Between the contacts app and contacts popup, which one do you use more? Why?
What are your painpoints?
Low Fidelity Mocks
Based on feedbacks on UX enhancements with stakeholders, I started with low fidelity mocks to share with the product manager and the development team to review technical capabilities.
Sample screens of low fidelity mocks.
Working with the development team to figure out issues around filtering functionalities.
High Fidelity Screens
After reviewing with stakeholders and various updates were made to the wireframes, elements from the new style guide were implemented to create high fidelity mocks. Worked with the Visual Design team to validate styles.
