Improving UX of Parent — School messaging app
Case Study
Overview
As a parent of a 7 year old child I am being bombarded by school emails of various states of urgency. On average, I get sent 10 emails a week, and I only have one child. In this project I set out to review the UX of parent-school messaging board Parent Hub, test my hypotheses and offer an improved design.
Background
Parent Hub, a school messaging system, makes it easier for parents and carers to get school notices. In it, a parent subscribes to ‘channels’ — posting boards with general school updates or class notifications.
Business goal
ParentHub aims to enable parents to receive updates that matter most, making school-parent communication effortless.
Problem definition
I wondered if the application can be more user-centred after I realised I still get lost in the stream of messages. This poses a problem, as many parents might find it difficult to navigate the messages within the app, finding it not worth exploring.
Design Process
H1: Simplifying the path to a specific channel will make receiving messages effortless.
H2: The ability to save a message will ensure important information doesn’t get missed.
What is done well:
- The thread keeps users up to date with school messages, with recent posts showing first.
- The option to translate messages is helpful for non-English speaking parents and carers.
- It is clear how to forward a message.
- The search feature allows users to find messages of the same kind.
What can be improved:
- Switching the channels between ‘school posts’ and ‘class posts’ is not an obvious user journey.
- When on a channel page, it is not clear straight away which channel the user has entered.
- The function of the ‘like’ button is unclear.
- The function of the ‘checkmark’ button is unclear.
- Users will expect to be able to save a message for easy later access, the option which is not provided by the application.
User Research
I scheduled five interviews with users of different family status. As Parent Hub is a messaging app aimed at keeping people up to date, in this usability test I focused on how quickly the users can get to a particular message thread and whether they are able to save the message of interest.
User feedback
The usability testing has validated my design review. The testers tried to use the search function unsuccessfully, and were puzzled by icon meanings.
- Overall, there has been confusion with the purpose of the icons, primarily the ‘tick’ icon.
- Only 2 out of 5 people understood the meaning of ‘translate’ icon.
Users were not sure what the ‘like’ button does and they did not use it to save the posts. - 4 out of 5 testers said they would like to have the ‘save’ function, with 1 tester saying they would use the ‘share button’ to email the post to themselves.
- When they needed to find posts for the same class, most users went directly to search to input ‘3P’ there. After the search was unsuccessful, they came back to the original page and started looking for other messages in the same class.
- From the hub page they used the ‘tick’ at the top to get to the ‘saved’ messages as it was already familiar to them.
- Most users commented that it was not obvious what part of the app they were in, because of the small size of the heading — two users did not notice the heading at all.
First prototype — not quite there
Get Anastasia M’s stories in your inbox
Join Medium for free to get updates from this writer.
To achieve simplicity in finding the right channel, I:
- Added a link to class channel in each post, using the accent colour
- Moved search function to the bottom of the screen
- Enlarged the channel heading to clearly signify which channel the user is in.
To aid in saving the right post, I:
- Added the option to bookmark a post
- Kept the checkmark icon but moved it to the top of the post, as is commonplace in organising emails
- Enlarged the post headings and made them more meaningful
Other changes (which in hindsight I could have done without)
- Added imagery: While adding more imagery contributes to ease of finding the posts, using this version in the Preference test was a mistake, as it was a significant change taking away attention of other changes.
- Removed ‘translation’ icon, as the testers found it confusing.
- Removed the ‘like’ icon, as it is unclear to testers how and whether this feedback is collected.
Preference test findings
To test the success of this and following designs I used Lyssna. The number of changes I had made to the initial design contributed to skewing the results. I got valuable feedback about the new version, but for the future testing I needed to be more consistent in my changes.
There were valid points the testers made about the Original design, so I need to be careful and keep the new design lightweight and concise while implementing navigation improvements. This is what I did in the second prototype.
Second prototype — much better
With the second prototype I pursued the goal of making the path to the message channel clear, and ensuring the option to save the post is visible. The design included the following amendments:
- Added the link to class channel in line with the original design, to ensure the users know what channel the post is in
- Kept the search function, but specified the way that search works
- Added link to channel to the card
- Enlarged the page headings
- Removed the ‘like’ icon
- Added the option to bookmark a post
- Kept ‘translation’ icon
Preference test findings and further improvements
The second design performed better with a larger audience, more than half of which were teachers. Most of the testers found it easy to locate the channel, however for some users it could be clearer.
Although the hierarchy of the page is clear, and most of the users could find the channel posts easily, there is room for improvement in positioning the headers and signifying which channel the post is in.
Learnings
- By involving more users in the second test, I better aligned the design with user preferences and behavior.
- The project highlighted the value of continuous improvement. By analysing and acting on the results of the Preference tests, I was able to refine the design and achieve better results.
- I learned the importance of iterative testing. The first Preference test revealed that making too many changes to the design at once can lead to failure. It emphasized the need for gradual, controlled modifications to track their impact effectively.
