Yorescape
Summary
Mobile app with embedded 3D models of reconstructed cultural heritage sites that allows users to travel back in time and compare how the sites appeared then and now.
Role
UX/UI Designer
Tools used
Figma
Timeline
April-May 2022
Early wireframes
In the early stages of this project, I focused on how to take Flyover Zone’s existing virtual tours and create a platform that not only hosts the tours but highlights the amazing visuals and educational content the tours possessed.
Tools used: Pencil and paper
Research
I conducted research on how to create a unique platform for virtual tours. I looked to how streaming services organized their content and provided context to each tv show or movie. I looked to tour guides who adapted their in-person tours to online due to the Covid-19 pandemic. Finally, I looked to videos games like Assassins Creed that not only provided entertainment, but also historical educational content.
User Flow Diagram
Because this app was a complex undertaking with lots of moving parts, my team utilized a user flow diagram to organize the information architecture. It also helped to keep UX and the development team on the same page and provided a collaboration space for meetings.
Tools used: FigJam
Initial Designs
Tools used: Figma
Dashboard (Browse, virtual tour highlights, search, account access)
Using the pen and paper wireframe shown above, I created high-level wireframes using Figma. This was the initial design that I presented the team. After feedback, I realized the next iteration needed: larger text, less visual information, and larger buttons.
Virtual Tour (Expandable UI, Guided Tour, Free Roam)
This was the first iteration of the new virtual tour design. I wanted to push the UI to the side of the screens in order to put the full focus on the amazing 360 views of the cultural heritage sites featured in the virtual tours. This shows four ways to enjoy the tour (clockwise from top left): an in-depth self-guided tour, a group tour, an expert guided tour, and a free-roam experience.
Final Designs
Tools used: Figma
These were the final designs that release with Yorescape’s beta release. After collaborating with a brand designer, I utilized new branding guidelines for Yorescape and made a cohesive experience for the user.
Dashboard (Browse, virtual tour highlights, search, account access)
Virtual Tour (Minimal UI, Group Tour, Map Free Roam)
The final virtual tour design changed the most from the initial design mostly due to time and development constraints. I collaborated closely with the engineering team to ensure that my designs were feasible in development. I pared down my designs and adapted to the different constraints.
Further Improvements
Tools used: Figma
Designing the search feature in Yorescape
Adapting the mobile app to the web
Yorescape is available now for download on Android or iOS devices.