Collaborated with a team of three UX designers to develop the City Explorer app, working together on conception and research while primarily leading the UI design to enhance urban exploration experiences through augmented reality.
As the Product Designer, I spearheaded the UI design, ensuring a seamless and engaging user experience within the City Explorer app. Collaborating closely with three UX designers, I contributed to the ideation and research phases, where we integrated augmented reality to transform urban exploration. My focus was on translating user insights into intuitive interfaces, balancing innovation with usability throughout the design process.
Exploring cities with the tools available today presents its fair share of challenges.
While modern technology has undoubtedly made exploration more accessible, reliance on digital maps and GPS can lead to an over-reliance on screens, causing us to miss out on the subtle nuances and hidden gems that cities have to offer.
Augmented reality has the potential to revolutionize the way we explore cities while staying present in the moment.
By overlaying digital information onto the real-world environment, AR can enhance our understanding and appreciation of the places we visit.
Engaged with potential users to understand their preferences and challenges in city exploration.
Analyzed insights to establish user personas and clearly define the project’s goals and objectives.
Collaborated on creative solutions to enhance city exploration using augmented reality technology.
Designed detailed UI mockups and interactive prototypes to illustrate the augmented reality experience.
Performed user testing to collect feedback and iteratively improve the augmented reality features and usability.
"Empathy fuels connection. It opens up the possibility of dialogue. It's the bridge that connects us to others."
- Oprah Winfrey
The rationale behind choosing an AR exploration app stems from recognizing the growing popularity and vast potential of AR technology. AR has unlocked exciting opportunities to create interactive and immersive experiences, fundamentally transforming how individuals explore and engage with their surroundings.
Traditional exploration apps and travel guides often fall short in delivering truly engaging and captivating experiences.
This initiative aims to revolutionize how users discover and learn about locations, historical sites, landmarks, and cultural points of interest. Leveraging AR, the app will offer real-time information overlays, interactive storytelling, and immersive digital content, transforming sightseeing into a dynamic, educational adventure.
Through user research, we aim to understand the user’s preferences, behaviours and pain points regarding their previous experiences and knowledge regarding AR. This research will guide the development of the app, ensuring that it offers;
Understand user's current habits and preferences when exploring cities. How often do they explore new cities or visit familiar ones, and what motivates them to do so?
Identify the specific needs and expectations users have when using an AR app for city exploration. What are the different types of information users seek? (Ex. Historical facts, cultural insights, hidden gems, popular tourist spots, etc)
What are the pain points and challenges users encounter while exploring cities? (Ex. Difficulties in navigation, language barriers, information overload, etc)
Examine how the AR app can foster interaction and engagement with the local culture and community. Do users want features that connect them with local traditions, events, or people?
What are users' preferences for app integration with other travel-related apps, such as navigation tools, booking platforms, or social media?
We will conduct in-depth interviews with potential users to understand their needs, preferences, and pain points. These interviews will provide rich, detailed insights into user behaviors and expectations, allowing us to tailor the app’s features and design to meet real user needs.
We will distribute surveys to a broader audience to collect data on user demographics, travel habits, and interest in AR technology. This data will help us identify trends and patterns, ensuring our design decisions are backed by statistical evidence.
Below are some of the user insight's we gathered from out interviews. We wanted to make sure our potential user's had a basic understanding of AR.
“I would probably want it to be very easy and straightforward just because AR sounds like it would be a pretty intense concept visually.”
“That’s exactly how I envisioned it with like the information overlay…I think you would feel not only submerged with your surroundings but also like being in there.”
“So for instance, I'm thinking about, say I go to Rome and I look at a historical monument, I don’t know what it is, but if I hover my phone over it, it gives me a description of what it is, um, you know, like when was it made, what's the historical significance of it, and it also outlays a path for me to another year.
“I would probably want it to be very easy and straightforward just because AR sounds like it would be a pretty intense concept visually.”
“That’s exactly how I envisioned it with like the information overlay…I think you would feel not only submerged with your surroundings but also like being in there.”
“So for instance, I'm thinking about, say I go to Rome and I look at a historical monument, I don’t know what it is, but if I hover my phone over it, it gives me a description of what it is, um, you know, like when was it made, what's the historical significance of it, and it also outlays a path for me to another year.
Alongside conducted user interviews, we simultaneously created a survey of 15-20 questions and using social media, we posted it online for users to use at their leisure.
After conducting our research, we created a persona named Alex to help us move forward in the project. Developing this persona allowed us to consolidate our findings and ensure that our design decisions were aligned with the needs and preferences of our target users. By having a clear representation of our ideal user, we could focus our efforts on creating an AR app that provides meaningful and personalized city exploration experiences. This persona guided our design process, helping us stay user-centered and grounded in our research insights throughout the development of the app.
"Define the problem clearly before you start looking for a solution."
- W. Edwards Deming
Urban explorers and travelers who seek authentic and immersive city experiences encounter challenges in exploring unfamiliar locations that provide personalized and relevant information.
How might we alleviate the struggles of urban explorers and travelers seeking authentic and immersive city experiences, when exploring different locations?
Next, we conducted a competitive analysis with Google Maps and Apple Maps to understand their strengths and weaknesses. We evaluated these popular mapping services to identify gaps and opportunities for improvement in our own AR app. By analyzing features such as user interface, ease of navigation, personalized recommendations, and AR capabilities, we gained valuable insights into how these platforms serve their users. This analysis helped us pinpoint areas where our app could offer a unique value proposition, particularly in delivering tailored and immersive city exploration experiences that go beyond what Google Maps and Apple Maps currently provide.
Google Maps offers a comprehensive set of features, including detailed maps, real-time traffic updates, and extensive location information. However, its recommendations tend to be broad and cater to a mainstream audience, lacking the personalized touch that our users desire.
Apple Maps provides a clean and user-friendly interface with seamless integration across Apple devices. While it excels in navigation and aesthetics, it similarly falls short in offering tailored suggestions based on individual user interests.
After gathering extensive data from our research, we systematically analyzed the findings to identify key trends and user needs. By organizing the insights into categories such as pain points, desired features, and usability challenges, we were able to distill complex data into actionable insights. This clarity enabled us to pinpoint critical areas for improvement, allowing us to propose specific features and design elements that would resonate with our target users. With a well-defined set of priorities, we were able to create a clear and strategic pathway forward, ultimately guiding the development of the AR city exploration app.
Next, we created a storyboard of Alex using the app while exploring downtown Toronto. This visual representation helped us map out the user journey and understand how Alex would interact with the app in real-world scenarios.
By depicting Alex’s experience, from discovering unique landmarks to receiving personalized recommendations, we were able to identify key touchpoints and potential pain points. This storyboard guided our design decisions, ensuring that the app provided a seamless and engaging experience for users like Alex, making city exploration both enjoyable and informative.
Alex, a student in downtown Toronto, is feeling unexplored and disconnected from the city.
Alex learns about the AR city exploration app from a friend's recommendation.
Alex opens the app for the first time. The app welcomes him and gives him a short tutorial. He sets his preferences and interests, indicating his desire to explore.
The app's AR navigation guides Alex through the streets of Toronto, providing real-time directions and visual cues.
Alex discovers a local landmark. After pointing his camera to the building, AR overlays facinating historical facts and future attractions, allowing Alex to connect with the city on a deep level.
The app suggests unique places to eat as well as upcoming events in Toronto, catering to Alex's desire for authentic and immersive experiences.
Following the storyboard creation, we developed a user flow diagram to meticulously map out the app's functionality and the user's journey. This diagram provided a detailed visual representation of how Alex and other users would navigate through the app, from initial login to exploring various features like augmented reality overlays and personalized recommendations.
By outlining each step in the user flow, we identified potential bottlenecks and opportunities for improvement in the app's design and functionality. This process ensured that every interaction was intuitive and aligned with our goal of enhancing city exploration through augmented reality technology. The user flow diagram served as a blueprint for the development team, guiding the implementation of features that would deliver a seamless and delightful experience for our users.
"The details are not the details. They make the design."
- Charles Eames
During the wireframing phase, our team each created individual sketches of the app's interface and features. By allowing everyone to contribute their ideas, we ensured a diverse range of perspectives and design concepts.
We then put these sketches together and collaboratively reviewed them to see what worked and what didn’t. This collaborative process helped us identify the strongest elements from each sketch, enabling us to refine our design and create a cohesive wireframe that incorporated the best ideas. This approach ensured that our wireframe was both innovative and user-friendly, setting a solid foundation for the subsequent stages of development.
After reviewing and refining our individual sketches, we began transforming them into digital wireframes. This step involved using design tools to create more precise and detailed representations of the app's interface.
By digitizing our wireframes, we could better visualize the layout, navigation, and functionality of the app. This process allowed us to iterate on our designs quickly, making necessary adjustments to ensure a smooth and intuitive user experience. The digital wireframes served as a crucial blueprint for the development phase, providing clear guidance on the app's structure and interactive elements.
This digital wireframe showcases the app's regular user interface, featuring a digital overlay menu displayed over the phone camera. Users can access various features and options directly from this menu while viewing their surroundings through the camera.
This digital wireframe illustrates the navigation feature, where an arrow overlay is projected onto the ground, guiding users in the direction of their destination. This augmented reality element enhances the navigation experience by providing clear and intuitive visual cues.
"Design is the intermediary between information and understanding."
- Hans Hofmann
Once we completed our low-fidelity digital wireframes and prototype, we moved on to user testing. Our main objective was to evaluate the usability, functionality, and user experience of the AR city exploration app.
During this phase, we aimed to gather feedback on several key questions:
After completing the user testing, we compiled all the feedback and data we gathered. We then sorted this information into a priority matrix, which helped us categorize and prioritize the issues based on their impact and urgency.
This matrix allowed us to focus on the most critical usability and functionality problems first, ensuring that our improvements would have the greatest positive effect on the user experience. By systematically addressing these prioritized issues, we could refine the app and make it more intuitive and user-friendly before moving on to the next stages of development.
After compiling and prioritizing the feedback, we began iterating upon our designs to address the identified issues. This process involved revisiting our wireframes and prototypes, making necessary adjustments based on the user testing remarks to ensure the app was more intuitive to use.
We focused on simplifying navigation, enhancing the clarity of the interface, and improving the scanning functionality to ensure users could easily locate nearby events. By continuously refining our designs, we aimed to create an app that provided a seamless and enjoyable user experience, aligning with the needs and preferences of our target audience.
We focused on simplifying navigation, enhancing the clarity of the interface, and improving the scanning functionality to ensure users could easily locate nearby events. By continuously refining our designs, we aimed to create an app that provided a seamless and enjoyable user experience, aligning with the needs and preferences of our target audience.
After iterating upon our designs and incorporating feedback, we moved on to creating high-fidelity mockups. During this stage, we addressed key user concerns, such as confusion over the lack of a homepage. In response, we added a giant menu overlay that serves as the homepage, providing clearer navigation from the start. We also made several design adjustments to enhance the flow and coherence of the user journey, building upon our low-fidelity designs.
The high-fidelity mockups featured detailed visuals, refined typography, and polished interactions, bringing the app closer to its final look and feel. These mockups provided a realistic representation of the app's interface and functionality, allowing us to fine-tune aesthetics and ensure consistency across all elements. By focusing on these high-fidelity designs, we aimed to create an engaging and visually appealing user experience that effectively showcases the app's features and usability.
Working on the augmented reality city exploration project as a personal endeavor was an invaluable learning experience. Collaborating with a team of two other UX designers allowed us to explore innovative ideas and refine our skills in a supportive environment. While we didn't build a fully functional app, the process deepened our understanding of augmented reality and user-centric design. This project has set a strong foundation for future work, and we are excited to apply our learnings to new challenges and share our journey with the design community.
