Seeking to build a fun educational tool, I challenged myself to create a mobile app that uses augmented reality and a historically themed UI to provide an immersive approach to studying history.
Role: UX Designer, UI Designer, User Researcher
How can we use augmented reality to make learning more engaging? This question sparked the idea for creating a mobile app that uses AR to enable people to view historical sites from around the world.
This concept further inspired me to identify features and visual elements that this app might have, which I would demonstrate through high fidelity mockups and an interactive prototype.
In order for me to define what features SITES AR would incorporate, I sought to understand what aspects people find and don't find interesting about history. I conducted 5 user interviews with participants who each had varying degrees of historical interest. Some key observations from this process were:
To further explore opportunity areas for features in SITES AR, I performed a competitive analysis of AR and history-focused mobile apps by documenting my use with them. Some key insights from this process were:
Inspired to take advantage of the opportunity left by historical sites that are unrepresented in AR, I decided to center SITES AR around presenting a diverse set of sites with historical significance from around the world.
In order to make viewing these sites as exciting as possible for history buffs and non-history buffs alike, SITES AR requires features that enhance the physical and sensory experience of visiting a given site and contextualize the history of the site in relation to broader historical themes, such as:
After outlining features and a user flow diagram, I started brainstorming key screens by rapidly creating sketches. This process allowed me to visualize solutions that would present key functions in an accessible and efficient manner.
Rapidly iterating on sketches then allowed me to build mid fidelity wireframes for 5 major screens. One interface element that I incorporated into the Select Site screen is the presence of a world map, which displays the sites users could select to view within a thematically and geographically appropriate context.
I then conducted usability testing with 2 participants based on these wireframes to assess 2 key functions: selecting a site and viewing its text description. While both participants successfully accomplished the tasks, they confused the timelapse icon for a hamburger menu, so in my next phase of wireframing, I would have to redesign the icon to more clearly indicate its function.
To enhance immersion, I designed the UI to resemble ancient artifacts. In order to accomplish this goal, I researched historical documents, maps, and art to create an interface that feels handcrafted and low tech. The earth tones that compose the app's color scheme reflect pigments that have been used throughout various historical periods for art and writing, such as prehistorical cave paintings and Medieval illuminated manuscripts.
As an early typeface created during the 16th century and with its design being based on ancient Roman engravings, Palatino was a prime fit for a typeface that would feel appropriate throughout various point in history while also having a large enough x-height to be easily legible on small screens. With a background texture that resembles ancient parchment, these elements coalesce to provide users with the impression that they're interacting with a piece of history throughout all phases of use.
I then conducted a second round of usability testing with 2 participants, combining the high fidelity wireframes above with video recording of AR models through Adobe Aero. With limited experience in AR development or 3D modeling, I conceived a workaround to prototyping an AR experience by using panoramic photos from Google Earth to simulate a 3D environment, and combining the assets in KeyNote to produce an interactive prototype.
In addition to the key tasks I evaluated during mid fidelity prototyping, another task I sought to observe during this phase was using the time-lapse function. From this round of testing, I observed no major usability issues, but more testing with higher fidelity prototypes with actual AR content may reveal such problems.
Not only did I strengthen my UI and interaction design skills from working on this project, I strengthened my ability to find efficient solutions to problems. For instance, I expanded on the original concept I had for this case study and identified areas of opportunity to implement more practical features. In addition to these insights, I also found creative ways to implement unique visual details into an engaging interface, as well as prototyped an interactive AR experience with minimal development experience.
Moving forward, I plan on training more in AR development and 3D modeling so that I can realize higher fidelity prototypes of this concept and eventually launch a fully functioning app.
All borrowed images are property of their respective owners and were used under a Creative Commons license. Some images have been modified for personal use.
