Kivo

Duration
3 months

Software used
Figma
Adobe Aero

Contribution
UI/UX Design
AR Prototyping
Video Editing

Collaborators

Nicole How

Maddy North

Saumya Wickramasinghe

Links

Figma Prototype

Case Study Presentation

Video

Kivo is an AR App that visually teaches users about their bike and provides recommendations and descriptions on maintenance.

Problem statement

How can an Augmented Reality (AR) app effectively engage regular bike riders and help them better understand their bikes while also teaching them riding techniques to enhance their overall riding experience?

Our Solution

As one of our team members Maddy, is a novice cyclist with experience working at a bike shop, we spoke about the accessibility of bike maintenance. Especially considering the importance of ergonomics as well as making maintenance a less intimidating or complex process, the group came together to discuss a solution that also made use of AR, as an exercise to also include and consider emerging technology.

Understanding the User

Before starting our design thinking process, my group identified 4 key barriers to making bike maintenance accessible:

Complex nomenclature and codes when it comes to obtaining bike parts or repair processes that might intimidate users
Lack of well designed resources to help less experienced clientele
Gatekeeping with breaking into more advanced cycling
Difficulties of keeping professionals and clientele up to date with current modifications and databases of parts

Demographic

Task flows & Information design

We also then identified our demographic and determined 4 key points our application should address:

Users should be able to spot technical errors with the AR tool
Users can fix issues by themselves and if it is out of the scope of what can be explained in an app, they will be directed to a shop
Users can learn, identify and call for local help near them
Users can find an index of parts, their compatibility, as well as placesto purchase them

Affinity diagramming + Autoethnography

As we had limited time for research - one week and were restricted to our course peers, we decided to do an autoethnography and then use affinity diagramming to categorize our findings. This was adequate to have preliminary information to base our decisions upon, but of course this process wasn’t ideal and if preferred our team would have liked more data to work with.

Affinity diagramming + Autoethnography

Personas

Creating the System

After determining the purposes and goals we wanted to achieve, we created a system map after brainstorming some flows and piecing them together to get a rough idea of the navigation and relation between pages.

Takeaways

AR prototyping was new but an interesting experience

As we experimented with some AR apps as part of our research process to learn about how AR is currently implemented such as with BBC’s civilisations app or Google’s AR translation feature. Learning about how interaction methods are currently designed for AR and imagining how to improve or tailor our interactions with bike repairs was difficult at first, as AR on phones is more clunky. After struggling with reducing the issues with the user having to hold a phone up in some interations, we decided to just keep the AR to more scanning or learning, but generally we determined that phones were best suited to just 2D interfaces for the time being. We also made use of Adobe Aero’s app, however things proved to be clunky and we did a combination of video editing and Aero to simulate our final AR processes.

Well Designed Simplicity is key

As our main goal was accessibility in the cycling space, during our process my team and I ensured to use colour contrast checkers as well as be mindful of spacing and type sizing. Ideally, we also wanted to have a light mode as well as dark mode, as white text on black type is not as accessible for people with vision impairments. We also ruled out using AR for more mobile things as looking at an AR screen could be difficult to be fully cognizant of surroundings while moving. We were also cognizant of how much copy would be displayed and factored that into our repair modules and instruction pages.

So Many Ideas, Too Little Time

In the brainstorming process we had many ideas with how we could extend our app from:

tailoring it as a PoS or a backend system for training and inventory in bike shops
adding third party connections with Strava, Google Maps, etc.
including community features or methods of contact for bike servicing shops