Research

From 0 to 1, the team and I started doing research to find an optimal solution and potential market that can solve the defined problem. We summarized our primary, secondary and comparative research to the persona.

‍

Persona

• Name: Hannah Johnson
• Age: 27
• Gender: Female
• Income: 60,000 a year
• Occupation: Industry relations for a medium start up
• Education: Bachelors in Business

Pain Points

1. Hannah likes new experiences with new products, travel and fun, which she can share on social media and find information easily, but the traditional travel marketing doesn’t satisfy her need.
2. Hannah seeks diversity travel through cultural sampling and nature scenes, instead of city environment.
3. Hannah has limited time span and low expense in travel

Opportunities

1. Apply virtual experiences for marketing with state-of-art technology and social elements can attract young adventurers’ attention and satisfy Hannah’s sharing demand.
2. Northwest Territory provides a far-north adventure with unique culture and natural sceneries.
3. The travel expense and time span from Vancouver to Northwest territory are, in fact, affordable and suitable to this group of people.

‍

UX Design

User flow

I crafted the initial user flow by synthesizing client specifications, internal team deliberations, and my research insights. The flow begins with a landing page accessed via a QR code, aligning with the team's decision to develop the product as a website for universal device accessibility, meeting the clients' diverse needs.

‍

Before users embark on the web-based AR walking tour, I facilitated discussions with both clients and the internal team by presenting quick sketches of the process. This step allowed us to visualize and refine the journey, ensuring alignment with project objectives and user expectations.

1. Users come by the wall in the mural festival and scan the QR code to land our AR web and start the journey. (in the 1st design, we aimed for collaborating with Vancouver mural festival to promote this AR experience)
2. Users found the the QR code, e.g. at the bus station or somewhere, and the GPS system on their phone will direct users to the start point (walking tour area, e.g. in a park). Then, the user starts the AR journey.
3. After opening the website by scanning the QRcode, there is going to be an instruction about how to start the NWT AR tour by your device. The instruction will show the user how to use functions in the application.

‍

‍

‍

‍

‍

‍

‍

1st UI Flow (Wireframe)

After presenting and discussing with the clients for our 3 different versions of the initial UI Flow (Wireframe). We refined the ideas from these 3 flows into one, as showing in the wireframe.In this stage, we had a pivot and changed the direction to allow users experience the tour anywhere, which means in the their rooms, a park, or an office wherever they get the tour’s QR code. During the tour, users can understand what to do by an onboarding guide with simple instructions. Also, when they walk close to the elements, the green dot will light up to let users click its information.

‍

Constraints

1. Considering the ethical concern and the marketing purpose from the clients, the product  cannot be designed for starting the AR tour at the places not within North West Territory.
2. The information dots cannot be well presented with 2D/3D UI system in the AR environment in the programming perspective.

‍

‍

2nd UI Flow (Wireframe)

After discussing the 1st UI flow with the clients, we added an onboarding process (tutorial) after the user land on the AR environment. The scenes and 3D elements also be made by the 3D modeller. The developer also build up the environment, 3D, and UI elements in VR on Unity.

‍

‍

‍

‍

‍

‍

‍

‍

‍

Game Map Design

The experiences current layout encourages the user to move in one direction in a 2m-by-2m space. Models may reside outside of the safe zone to create a larger-than- life experience. The user will start the onboarding within scene1 and walk through the scenes in sequence with the animal guide’s instruction.

‍

‍

‍

‍

‍

‍

AR UX Design (developed)

To achieve a great user experience in AR setting, I researched the updated guidelines from Google, Apple, Unity, and other AR UX design articles. Below are the summaries for the key points we utilized in our AR walking tour. The developer built the AR environment and UI/UX elements based on the 2nd UX design and settle it up on Testfight.

‍

Constraints

1. Except keeping the foundational AR UX rules in mind, I found matching the exact distance between AR environment and real world is an essential and difficult part for UX designer. I suggested the developer trying multiple approaches including Class ARRaycastManager, TryAcquireHumanDepthCpuImage(out XRCpuImage), and ARcore measurement to measure the distance.
2. The design requirements cannot be implemented completely before usability test because the developer didn’t have experience in AR design and the project is quiet urgent (time limitation). Thus, we (the designers) can only applied the version made by the developers for the usability testing.

‍

Usability testing

The primary user test was conducted to understand how users feel about the AR experience and the app’s general usability. It was conducted primarily in person but did have additional tests outside of the space. It was moderated and included a semi-structured interview and lasted around 30 minutes.

Test Propose

The primary user test was conducted to understand how users feel about the AR experience and the app’s general usability. It was conducted primarily in person but did have additional tests outside of the space. It was moderated and included a semi-structured interview and lasted around 30 minutes.

Implementation

I conducted the test in 3 main sessions with another UX designer in the usability test.

1st session: Introduction and instructions to participants

1. Provide the user a clear agenda and understandings for this user testing
2. consent form and filming agreement

2nd session: Tasks and questions

1. According to our test goals, we setup 3 tasks to observe how the users interact with the objects and the UI elements/instructions/hints.
2. The 1st task had the user use the app for the first time and go through the onboarding experience. The 2nd task had the user explore the rest of the experience with no facilitator intervention.
3. We asked questions right after each task to examine if they understood the ideas and their thoughts when experience it.

3rd session: final reflections

To complete the test the users finished with a post-test questionnaire asking them to reflect on the experience and its impacts.

*2 scenes from 9 of usability testing which the designers facilitated and observed when the users were exploring the AR experience. (the display of the photos were approved by the users)

‍

Usability Testing Analysis

In the user test, I and another designer took turns to be a facilitator and observer. With the notes, we conducted an activity to categorize with positive/negative feedback/observations and analyzed the result (with red dots showing priorities).

‍

Takeaways

Considering the work units and the scale in this team, we implemented a KFC activity (Keep, Fix, Change) based on analysis to decide the items which can be input on the 2nd design. We also added a future column for the long-term plan.

‍

Final UI/UX design (3rd version)

For further development of the project, I refined the design based on the analysis and KFC. While making the iteration, I also did the AR design research again to build a better experience for users. 

The user test identified the following additional that would be beneficial to add in the future:

• Scaling of model
• Visual guidance more hints during experience
• Add prompt (what to do next) to users for each action
• Additional interesting interactions
• Adjustable font size function

‍

Design focus

1. It was found when users set the start point, they cannot see the models on where they tap. It’s also hard for a programmer to measure it, so we included some measurement systems and steps to make the onboarding experience smoother and clearer.
2. Furthermore, some users cannot find the next scene or don’t know what to do after the tutorial session. To improve this, minimal but useful visual cues were added for testing. For instance, secondary instruction on top can remind them to close the instructions by tapping on the screen. Also, the navigating motion will appear when users haven’t found the scene in 15 seconds

‍

Design Iteration Highlights

1. Navigation Cue (visual cue)

In the 2nd prototype, users sometimes cannot find the next scene properly but users also said they enjoy exploring the elements.Therefore, while the user lose track in 30 seconds, the navigation icon with its motion will show up leading them to the spot.

‍

‍

‍

‍

‍

‍

‍

2. Secondary Tips

As per 3 users said they want to purely enjoy the scene, and considering the mobile screen is generally small. I aimed for letting users have control to explore more or fewer visuals in the tour.Thus, after users tap on a random place on the screen, all the UI displays will disappear. When they tap again, it will show up.

‍

‍

‍

‍

‍

‍

3. Model Placement

The model placement action is a very important part for the experience. We found 2 participants cannot understand the instruction even they read the whole guiding text seriously. I found the problem are:

• The text guide is not intuitive enough.
• The visual guide is not clear enough.

After loading the product, it will suggest users move to a place with enough space before starting their tour. It also shows them a reminder in a clear play space. After users move their camera aiming at the floor, they will see the dots on the probable area and set the start point for the first model in the tour.

‍

‍

Next Usability Testing Plan

This test consists of the user using the app as normal while talking out loud as the facilitator observes. The facilitator should watch how the user goes through the onboarding, sets up the experience, manoeuvres through it and finally how they liked it.

1. The first task asks the user to go through the process of setting up the experience, they are asked about the said experience.
2. The first task asks the user to go through the process of setting up the experience, they are asked about the said experience.
3. The final task has them navigate through the rest of the experience, at the end asking them about navigating the map with the cues and what they found.

The participants are then asked some post-test questions regarding the overall experience, the information they read and any pain points.