AIA Pledge Wall

AIA’s brand focuses on having a healthy lifestyle, and it encourages it’s employees to live a healthy life. With this pledge wall, employees can make their pledge to live a healthy life and post it on the wall for everyone to see. The goal can be big or small, as long as it pushes the user’s health agenda forward. The pledge is for everyone to see, on one hand inspiring others to make plans for their health agenda, on the other hand making it a commitment to everyone.

Role

Web version UI designer

involvements

Secondary Research, User research, User Flow, Wireframe, User Testing

Tools

Adobe XD, Adobe Illustrator

Project Overview

A physical pledge wall used to be located at the entrance of the office building. AIA has moved from a dedicated building to a shared office building. The physical pledge wall had to be removed. The new pledge wall was set to be digital based. In order to make it still accessible to their employees, they would like to make a digital version to be put on the internal website.

"Making a difference starts with us"

Goals—The task is simple, to migrate the pledge wall experience online. The experience ought to feel like home for users who used the old Pledge Wall. Simple. Quick. Easy to use. Easy to be seen by everyone.

Primary Research

In order to understand how the old pledge wall was used, I asked some employees who have made their pledges on the original pledge wall, and below are some key takeaways.

Reading the user's own pledge motivates his/her workout routine
Sharing with colleague
Motivated by your senior
Motivated by peer

Secondary Research

Posting and sharing personal interests to the public has been done in many places in the internet. I have studied online services that let people share post online to the public.

The original pledge wall—Whenever people walk past the pledge, it is very easy to spot pledges made by other people. Seeing other people's pledges make motivating other people more effective. Pledges are printed via the kiosk and can be taken away by users, or attached to the wall using magnets. Pledges consist of pre-printed cards which employees fill out and attach to the pledge wall using colored magnets.

Similar products analysis—Most of the space in each block is taken up by an image and the buttons only appear when you hover your mouse over it. The blocks are organized together through a grid. They presents its content (which is basically images) in a scrolling collage that clearly deemphasizes text. Images are more immediately engaging, and images capture attention faster and generate more powerful emotional responses.

The original pledge wall is open to public for whoever walk pass the building lobby. The UI of the online pledge should feel open and inviting for everyone and should not be kept within a community.

User flow

I started my process by creating a user flow with, with basic function and visual descriptions. This has gone through a few versions after testing on mid-fidelity prototypes.

Mid-fidelity wireframe

Getting into the interface

The wall—Based on the findings of users needs, I started to develop mid-fidelity wireframes with prototype. Mimicking the original pledge wall, the digital pledge wall has to feel immediately familiar

Posting a pledge—Posting should be easy to understand and quick, so all the information is input in a small window, with easy to understand language. To make the user feel safe before posting on the wall, i added a preview for users to have a final check before publishing their pledges.

Word count and error prompt—While the pledge doesn't have a minimal word count, it cannot be left empty. To keep the content brief and straight to the point, the word limit has been set to 35 words, which is about a sentence length.

Referencing social media such as Instagram and Snapchat, which are image centric with their short and engaging text. I have decided to go for a 35 words limitation, which is the close to the word limit for a Snapchat story. Because, as the name suggest, the landing page will be a wall filled with pledges. I like the users to quickly scroll through pledges without having to click into it and see the longer text, all the text should be able to fit into the post frame.

Testing and feedback—After finishing the prototype, it was shared with the client and actual users for testing. The feedback I received was positive. Comments on the legibility of the font used and the lacking of brand recognition. These were later addressed in the mock-up presentation.

Final delivery

Landing page—When landed on the homepage, the user will be greeted with a wall full of other people's pledges, but more importantly, the user's own pledge will always appear first.

Posting a pledge—Sharing a picture and the pledge message with a pop up box. The message is saved automatically to prevent losing it from accidentally clicking away or dropping connection.

Greeting message—If the user doesn't have a pledge posted yet, when they enter the site, they will be greeted with a welcoming message, encouraging them to post a pledge before entering the wall.

Responsive—The pledge wall is also designed to be compatible with mobile devices.

Reflect and move forward

Obstacles—Due to budget and technical limitations, a number of planned functions were dropped. Instant photo taking and real time basic editing were planned. Due to the scope of the project, user interviews couldn’t be conducted, in turn, insight and user needs were learned through client interview.

Takeaway—One of the main reasons that the original pledge wall was a success was the visibility of being located in the elevator lobby with a big wall, something that the online version cannot replicate. My focus was to create a smoothest user experience for the users to keep making pledges even after the original pledge wall was taken down. I am happy with the results.

UI design—microsite

Pledge Wall

client: AIA