The goal of this project was to create an augmented reality mobile iOS application for Houston Freedmen’s Town Conservancy (HFTC.) Freedmen’s Town Conservancy’s main goals are to protect, preserve, engage, and educate native Houstonians and beyond about Black History in Houston, Texas. The goal of the mobile app was to educate and engage with visitors across the educational, tourist, and non-profit industries.
May 2023 | Dear Reader,
After a few weeks, I’ve completed transferring the original project from Adobe XD into Figma!
This was rewarding as it presented many learning moments for me as I reflected on choices I made in the past. Throughout this case study, I’ll highlight areas where I made changes from the original design and why. In the last section, there is a link to the prototype available for you to explore ⬇️.
As always, thank you for checking out my work!
Elsy
The team wanted a seamless tourist-like experience where a virtual tour guide would lead and encourage users to explore historical sites and landmarks throughout Freedmen’s Town. The tour begins at Gregory School and depicts an immersive, educational, and engaging experience about “The Story of Freedom.”
During this project, I was the UI/UX designer and worked alongside TYM’s Founder & CEO, Project Manager, Lead Developer (Revelation Interactive), 3D Artists, and the Executive Director of Freedmen’s Town. We took about 1 – 2 months from initial conversations to complete and deliver the project's final prototypes via Adobe XD.
Some of our goals were as follows:
We started with a tour of the 4th Ward and learned about historical landmarks along the way. Some of the landmarks were in the process of being recognized by UNESCO. Along the way, we were also present for impromptu interviews with 4th Ward residents and learned that a lot of history resides in their hearts and minds.
My boss, sent out a questionnaire before sitting with the Executive Director about her desire for the outcome of the app and that really helped me understand where she wanted to go and what she wanted to see in the app. I did some research about the users around 4th Ward using Simply Analytics and was only able to create one persona, but that doesn’t mean this was everyone!
Additionally, we looked into a couple of apps that are already out there that had the ability to educate and engage with users like: Time Immersive and JFK Library Apollo.
In a few meetings, our 3D artist had concepts for the trolley character, we had started development, and I received guidance on the minimum things that should be in the app for my wireframes. I started out with the home section:
Once I had a good rough idea of what the home page could look like, I started to create branches of what the home page could be. I started mapping out what the buttons and different areas across the interface could mean, where they would lead, and why. I tried creating an area that played with the possibility of the users' phone being in landscaped mode.
I started to work on ideas for what the markers and badges could look like as users guided themselves with the AR App in real-time. I created a concept for what the AR screen could look like when a guest used their camera over a historical site. I tried to make a progress bar on the left that could help guests know there was a certain number of historical items they could find at a specific site. At the top, we kept the location name and points.
Lastly, I tried creating ideas for the login area and what the gallery page layout could look be. I took time to look at some of the apps that my persona research led me to like Spotify, Snapchat, and Yelp. This was so I could get a good understanding of what login UI patterns guests in this region were acustomed to and what the intended market could be expecting. All my notes are a mix of questions, reminders, and ideas of where the app should guide a guest.
The following screens are wireframes in Adobe XD that begin fleshing out the ideas I sketched out before. By this point branding was still a bit unsure, but we eventually settled on something with the guidance of my PM.
As I mentioned before, I moved the project over into the Figma Platform. I began noticing details throughout the transfer that I couldn’t ignore so I began improving them! I’d like to highlight a few areas that stood out to me in the process below.
Really quick, here's a birds eye view of the Adobe XD screens:
Freedmen's AR App Recreation in Figma
Curious about the previous version of the AR App in Adobe XD? I've got a quick video for that below, check it out!