#mi420

This has been a challenge. It’s an interesting one, and one I intend to continue thinking about and working on over break, because I know my design is not where I want it to be. I realized I don’t have as good of a grip on working within Axure as I thought, and some of my ideas didn’t work out as well as I’d hoped. But without further ado, let me tell you about my project.

I chose to start by recreating pieces of my paper prototype and the physical interface in Sketch, which lets you create graphics superior to Axure’s but offers no options for designing interaction. I found, however, that I was thinking a lot about the details of design and not enough about the overall interface, so I jumped out of Sketch after putting together my basic homescreen and physical space and I went to work giving these elements interactivity.

I created masters and used hot spots to add functionality to the images I’d designed and exported as PNGs from Sketch. I was proud to get the first set of images on the side to scroll both using the arrows and on swipe. However, I ran into trouble trying to get my focus to work the way I wanted it to.

I tried a variety of different variable combinations, attempting to get my volume slider to function as I wanted it to. I Googled solutions, but couldn’t quite figure it out. I’m sure when I come back to it I will be able to eventually get it working, but I chose to instead focus on other aspects of the design that I knew I would have more fun creating and that would turn out a wholesome final piece, despite imperfections.

Make sure to check out the animations in the Talk to Tom screen and to give one of your favorite contacts a call. Thinking about how animation and loading indicators worked was an interesting part of designing the user experience for me. While my initial focus didn’t turn out as planned, I have a better grasp on how the micro-interactions and subtle animations may indicate to users what is going on behind the scenes.

I tested these cues with my dad, a 55-year-old father of two who probably would’ve appreciated the helping hand of Tom, the car’s AI, and easier ways to navigate a vehicle’s features despite bickering children in the backseat.

He wasn’t especially familiar with the idea of asking a digital AI to take you somewhere or answer your questions, so the Talk to Tom screen was initially confusing and required some explanation. He did understand, however, that the pulsing screen was asking him to speak.

When we tested the phone call screen, I realized the problem with using a similar animation for a phone in the process of connecting and a microphone ready and waiting for speech. Upon seeing that same type of symbol, my dad expected to be able to talk. The call hadn’t yet been made, though, and he was speaking to no one. In my next iteration I will be modifying that piece of the design and possibly using an ellipsis to indicate that the phone is connecting.

View the interactive prototype at: https://mbgxhp.axshare.com/#c=2

Credit for the iconography I used from The Noun Project:

heat feet and window by Richard Nixon from the Noun Project

Lock by Setyo Ari Wibowo from the Noun Project

Music by Popular from the Noun Project

Microphone by Jivan from the Noun Project

Location by prakruti from the Noun Project

Phone by barjibut from the Noun Project

Settings by Landan Lloyd from the Noun Project

Compass by jeff from the Noun Project

I tested my design with three different users and have made decisions about how to revise based on their experiences.

Some feedback was about context and the lack of it within the design. While I explained to my testers what their goal within the app was, they still said they would’ve liked more of an introduction to the app and some visual indication of where they were within it. This point was less critical of my design and more of my testing process. In future prototypes, I will take care to frame the design with a home screen and better indicators to avoid dropping users too suddenly into the interaction.

Much of the feedback of my design was levied on the loading indicators. Some feedback was that it would be better to visually show where data was transferring to and from, although another user said they were her favorite thing about the design (I suspect this had more to do with seeing how the element was represented in a paper prototype than the actual design of it, however). Another bit of feedback was that it should be more exciting and visually intriguing (this tester suggested using a cheetah or something to symbolize speed and agility). I think I need to look carefully at other loading indicators that show the transfer of information between devices as well as elements that are symbolic in exercise and fitness.

Users also pointed out the lack of information displayed on the watch screen. While there was positive feedback about the little running avatar showing how far users were in their workouts, there was a common pain point where testers wanted more information. There were willing to sacrifice the cute and symbolic element for a more useful display, and wanted information like heartrate, calories burned, avg speed, etc. Because there are a large amount of different statistics that could be displayed, I think in further and more in-depth iterations I would want to offer users a way to customize their displays for during their workouts.