Product & UI/UX

Reinventing the online food ordering experience

CLIENT

Blippar

I helped make Blippar's AR tool more approachable and intuitive.

Product Design
Interface Design (UI)
Experience Design (UX)

MY ROLE

SUMMARY

CONTEXT

Blippbuilder was a WYSIWYG Augmented Reality builder created by BlippAR. Blippbuilder was a tool that aimed to make AR accessible to everyone. It allowed users to look at real-world objects which triggered animations, video snippets or games.
I had the opportunity to work towards making the tool more approachable. Bllippbuilder was targeting educators, young adults and marketers. The challenge here was to make the tool intuitive and simple enough to appeal to all user groups.

PROJECT GOALS

Augmented Reality made approachable!

Optimize visibility within Blippbuilder.

Improve usable screen real estate.

Establish a preliminary onboarding experience for users.

RESEARCH METHODS


Given that this was an un-official assignment, I did not have access to a lot of direct users to use for my user testing and research. However based on the fact that Blippbuilder was aiming to appeal to a large user base, I conducted my preliminary research with a random selection of late teens and young adults between the ages of 15 - 30 within the California Bay area. I was able to observe how new and experienced users interacted with the application and identified three main areas for improvement
          - there was a lack of clear visibility within the app
          - there was an overwhelming need for design screen space
          - there was a need for proper user onboarding.

User observation

Prototype review

User interviews

Market research

User journey mapping

DESIGN PROCESS

Optimizing for visibility and usability.

There was one common user issue raised by almost everyone - "It's hard to tell what does what." From status messages to tooltipls there was a need for clear communication and labeling. Alongside this, the need for proper representative iconography became an increasingly obvious factor to improve the intuitiveness of the tabs.

Another key focus of the design was to improve the in-app help. A lot of the Blippbuilder users had never used a design software before and were as such un-used to various aspects of the tool like the 3D panel or the animation timeline. A contextual help that readily elaborated on the selected panel was created to address this problem. Some other concerns that were addressed included
       - Improved typography to aid in visibility.
       - Improved information architecture to help the intuitiveness of grouped elements.
       ​- Created a light and dark theme to improve usability.

DESIGN PROCESS

Maximizing screen real estate.

Through out the research process, one key concern surfaced over and over again. Blippbuilder had two panels one on the left with all the elements and one on the right with controls. This made it very hard to design especially on smaller screen sizes.

To increase workable real-estate on screen, the left and right panels were made collapsible and the 3D floating toolbar was optimized to reduce redundancy and to appear in context.

DESIGN PROCESS

User Onboarding

The main aim of the onboarding process was to ease the user into creating their first blip and the AR experience to go with it. The focus of this onboarding flow was to educate the user about the various components involved in the creation of an AR experience from how to set up a blipp to what goes into creating a scene and how to animate it.