Week 6 Updates

I spent this weekend working on making updates based on my punch list of items inspired by feedback from my three subject matter experts, as well as user testing and class feedback. Below are some visuals of my progress so far:

This GIF, while super low quality, does a decent job of showing the new AR wayfinding screen features in action.

Two of my subject matter experts, many of my user testing participants, and several classmates had suggested that I find a way to add features to the Walk flow that would help orient walkers in terms of how far they've gone, what to look out for, and how far their next art stop is from their current location. I've been working on adding some of that information above the bottom nav on the AR navigation screens, along with an overlay with specific directions users can open and minimize at the top of the screen. Some of the overlay mechanics in Figma were giving me trouble earlier, but I'm happy to have had the time and opportunity expand my Figma knowledge. So far, I've updated all of the screens in the Walk flow with these features but they all have the same information in the text. My next step with these updates is to go into each individual section within the walk to make sure the details are correct based on the location the user would be in at each point. That will include putting in correct directions in the top overlay as well as correct details about how many art stops the walker has seen out of the total number included in the walk, etc. in the bottom area.

On a note related to the AR navigation screen feedback, this weekend I also added some additional walking footage with the camera better simulating what a walker might see (i.e. not just the sidewalk but their surroundings). I had plans to visit all of the places in the Willy Street ArtWalk that I didn't have actual walking footage for while I was in Madison on Friday, but Mother Nature threw me a plot twist and I had to leave earlier than planned to race the hour drive home in order to beat a storm/possible impending tornado. I was still able to get some walking footage in the area before then, it just won't be as site-specific as I'd hoped it could be. I have heard from several people, including two of my experts, that it should work just fine with walking footage from anywhere as long as it's interesting to look at. I think I was able to achieve that. My Friday night plans may have gone a little bit sideways, but I still have footage that's more visually interesting than what I had before.

This GIF shows the functionality of a new dialogue box and related animation I added today. It also shows the change I made to the dialogue boxes to match the paper textures and colors used throughout the rest of the app.

Another change I'm working on making is adding text below the icons in the Walk flow. This is an in-progress change. I'm hoping the added text provides more clarity in terms of what they user can do with the icons in the bottom navigation section, just in case the explanation in the onboarding isn't at the top of their mind once they're in the walking portion of the app. For comparison, in the GIF above, you can see what it looks like both with and without that text. In the image below, you can see a static example of how it looks with the added text below the icons.

Example of a Walk screen with added text below icons, new dialogue box design, and added information about walk progress above the icons at the bottom of the screen.

In user testing, some people shared that they felt the congratulatory message after the fox video ended at the completion of the walk felt abrupt. In order to give the walker more control over their experience with the end of the walk, I added a new dialogue box prompting them to select whether they're finished with the final art stop on the walk. If they select Not Yet, they're able to go back to exploring the AR fox with their camera. If they choose Mark as Completed, they see a celebratory animation that lets them know that they've successfully completed the full walk. The information about their accomplishment will live in their Goals section in the app.

New screen directly preceding the Home screen after onboarding

One of my experts suggested adding a screen between the Onboarding flow and the Home screen to better orient users and let them know they're about to land on the Home screen. I designed this screen in the style of the rest of the earlier onboarding screens and included some context about what the user is about to do and why they might want to come back to the home page in the future. The "Let's Go!" button makes this screen differ from the rest of the onboarding flow. The call to action of the button and clear difference between it and the forward and back arrows further reinforces the idea that the user is about to leave the section they've been in and enter a new part of the app.

Bigger check boxes, better contrast, and new accessibility options

This one has a combination of inspiration. Feedback in last week's class helped me to make the decision of increasing the size of my check boxes in the Onboarding flow. I will also come back to this and increase the size of the check marks so they're more visible. I will also change the check mark color to black. I wanted to share my progress even though I'm not fully done working with the check boxes here. The sensory-friendly and wheelchair accessible options are ideas I've had in my head for a while, and last week I actually had time to add them. The color of the text over the paint is the other change I made to the Onboarding flow this weekend. I realized through double checking with WebAim that the contrast I had before was not as high as I was aiming for. This was true in other parts of the app that had white on magenta as well, and I updated the text and graphic elements to black anywhere they existed in white.

Example of contrast that was too low

Example of improved contrast

Moving into Week 7, I plan to work on putting the finishing touches on my Walk flow navigation details as described above, finish revamping my Events screens to make them more visually interesting, make any necessary updates to my brand guide, take new screen capture videos of my updated prototype, and use all of this to update the content in my Capstone page.