I had the fantastic opportunity to seve as a lead designer with the nonprofit, Big Picture Peoria. In 2023, they unveiled the updated Abe Blue Mural. I designed an app that scans this mural and activates an informational experience to guide the user through Abraham Lincoln's struggles with mental health. The app also provides community resources for support.
Role in project: Lead Designer
On Behalf of:
The Grindstone Group
This project was a collaboration between the Young Minds Project and the Big Picture Peoria organization in Peoria, IL. Both organizations are passionate about promoting mental health awareness and decreasing stigma within the community. Young Minds Project is working towards opening a behavioral health clinic for adolescents and children. The Big Picture Peoria organization seeks to promote healing through the arts. These shared goals and Peorian pride naturally brought the two organizations together for a community project.
As an iconic symbol of the community, the Abe Blue Mural has been showcased in downtown Peoria for years. The mural, however, was due for an update and relocation. This presented a great opportunity. Lincoln often struggled with mental health issues, but this did not stop him from being an impassioned speaker and influential politician. The update and relocation presented a great opportunity to start a community dialogue while also promoting both organization's goals.
The biggest challenge in this project was succinctly bringing together all of these concepts. The design needed to facilitate and educate users on the following key points:
Portraits of Peoria
A year prior to this project, I worked with Big Picture on Portraits of Peoria. I worked as a freelance UX designer on an app that included very similar user functions as the Abe Blue App. The creation, public launch, and feedback I received on this project proved to be vital research with applicable findings that I applied to this
AR app. The following are some key take aways:
1. A demo at the beginning of the application was very important. While my first application did have a tutorial, users need more assistance understanding the application fully. For this reason, I included an even more detailed explanation in the design of the second application. Instead of launching directly into the direction, I include a screen that explains the general purpose of the app. This put in context the rest of the direction they received. I also placed a progress bar in accordance with the Goal-Gradient Effect. This kept users informed of their progress to motivated them to watch the full tutorial.
2. The scanning period when the user was holding up the phone up to the mural was much shorter than I had anticipated. The time needed for the program to scan was mere seconds. In previous app design, I focused a lot of design efforts on this time, to keep users apprised of what was happening and letting them understand the progress. However, this information was unnecessary and caused the loading time to increase slightly, causing unnecessary irritation. I streamlined the loading process and simplified the graphics and messages during this time.
One of the main design struggles of this application was to create a cohesive natural flow of information. While all the topics contained in the app were related to one another these connections at first were not obvious. I identified and defined the scope with the clients that following items are the primary actions a user needs to complete:
COlor Decisions
The Abraham Blue Mural in every iteration has a pallet of deep blues. Since this was going to be the main focus of the app and the surrounding experiences I wanted to create a color pallet that complemented it.
I also kept in mind the message the app was trying to communicate about mental health. The Big Picture and Young Minds project wanted to acknowledge the toll mental health issues take while balancing it with a message of hope for the community.
For this reason, I embraced dark mustard yellow to complement the blue tones. The accent of yellow provided a good accent of hope throughout the application. The dark grey and black have blue tones to them as well. This contrasts nicely with the warm cream background.
Accessibility Checks
This app is designed for the community and as such should be accessible to everyone. As a designer the way I see the world isn't the same as everyone else. Luckily, there are tools I can use to see a different perspective.
To the right is my screen design run through a simulator for Deuteranomaly or red-green color blindness. This is the most common color blindness. As you can see all elements are still visible
My design process also always includes checking contrast ratios for my colors. This is particularly important for my text to background color.
Text DECISIONS
I personally love the contrast between a serif and a san-serif font brings to a project. It is not typical to include a serif font in mobile applications, but I felt that this project was perfect for these two fonts.
I would eventually make the text larger in the application itself compared to the mood board. When looking at it actually mocked up with in the screen I realized the text would benefit from being larger as well as more accessible.
This project had both a tight deadline and a smaller budget. As a UX designer, however, I always want to ground my designs in user testing and research. In a situation like this, you have to get creative with testing and use the resources you have. I will pull as many acquaintances as I can to do quick tests on my designs. I created two different information architectures and tested them.
This app has a lot of concepts going on. The client provided video content each about a minute long, including two videos about Lincoln's history in Peoria and two about Lincoln's mental health. The client originally wanted all of these videos on one main page. This can be seen in Version A. I was concerned that the content was too long for the user to watch through and the shift from Lincoln's mental health to Peoria history could be confusing. In Version B I re-grouped the history-related videos onto a separate page and added it as an option in the carousel. I showed both versions to users and the preferred version was B.
After determining the style guide, information architecture, and primary features the app needed to include I began a low fidelity. After updating the client and getting feedback I moved onto the High Fidelity prototype in Figma. This was given to our developer to start coding the project. You can check out my high fidelity!
Portfolio
© Saige Heelein 2024