PIVOT THE WORLD

UX/UI DESIGN FOR AUGMENTED REALITY MOBILE APPLICATION

My role: UX/UI intern for PIVOTtheWorld & Harvard

PIVOTtheWorld is an Augmented Reality mobile app that reveals to users what places looked like in the past - showing authenticated histories of locations (from everyday places to popular tourist attractions), through images, videos, and text-audio. End users can also store and share their most pivotal moments through "shoebox archiving" (the method of digitizing memories and old shoeboxes of photographs). This data is shared with the world to create a footprint of personal stories, to create a more personal history of the world.

As the UX/UI Designer for PIVOTtheWorld, I was responsible for exploring the design challenges of using innovative technologies in the context of history preservation and for using that insight in the weekly product development meetings to define the best functionalities to be integrated in our product. I was also responsible for developing wireframes, user flows and mockups to present and communicate directly to our development team, to support the development of the front-end product which is the mobile application, as well as the back-end product which is the CMS website for the company's clients and main content contributors.

The challenge of designing for Augmented Reality

In PIVOTtheWorld, we used augmented reality in order to change the way that technology affects the user's visual relationship with the environment. Instead of making the user focus solely on their device's screen, because of the Augmented Reality features, the device becomes a looking glass that allows the user to both keep visual contact with the environment as well as easily access information about it.

This created for me a lot of challenges, as well as exciting opportunities to rethink the way we design for mobile applications.

  • Interacting with Augmented Reality through a mobile device means that the user has to hold up their phone or tablet to view their environment through the camera feed.

  • The case study of using the device on location vs from a distance created for us the AR visit vs. VR visit scenario, and 2 different design solutions.

  • Users became significantly more familiar with AR technologies since the release of Pokemon GO in July 2016, but the misconception of what it is and how it is used still remains. All the AR elements had to be designed in a way that allowed intuitive use, rather than challenging the users.

The application:

MAIN FEATURES

When I joined PIVOTtheWorld, the idea of the application was already a grant-winning concept and was inspired by the personal story o f the company's founders. The main idea of the application was a platform that would help the user navigate through a location and reveal to them the history of that location as they walk though.

Upon joining, I first helped refine the 2 main screens that supported this concept of using AR navigation and of time-traveling through historical pictures and stories.

The design process:

MAIN LAYOUT WIREFRAMES

The design process:

USER FLOW WIREFRAMES

Augmented Reality Screen

The app's main Augmented Reality view is characterized by floating points which reveal the landmarks that surround the user through their camera feed. These floating points reflect, with their size and position, the location and distance of the landmark -also called PIVOT point- and act as access points of content.

We found that this screen was one of the most engaging one for users, as it presents a new and tangible element with easily accessible information.

Historical Timeline

When the user approaches or selects a PIVOT Point, they get access to historical content of the location. For the visualization of this historical content, we used a timeline slider that the user can swipe left and right in order to navigate through time. We discovered that was the best way to reveal to the users the history of the landmark in chronological order, in a way they can understand and control.

1

2

For my design process, I started by figuring out the basics of the application with close collaboration with the company's founder and product designer. I was decided that the best way to reveal the navigational options to the user was a 5 tabs menu that was always visible on the bottom of the app, except for when the user accesses information for a single landmark, for which a full screen experience was preferred.

 

A special menu was also designed for the camera view, that allows the user to toggle through different features of the app, in a way that not only allows easy access, but also helps train the user with visual cues.

Product Mockups:

5 TABS MENU

When producing low to high fidelity mockups for the screens I designed, there were a number of prominent visual features that I selected to make the experience unique for the user. The circular components reveal the PIVOT Points to the user and their sizes and colors give information about their distance and content. For example, in AR view, size reveals direct distance from the user. In map view, where such a visual information would be unnecessary, the size reveals quantity of content. The color is connected with the origin of the content, and in particular if it is by an official source or an independent contributor.

As it was previously mentioned, the main navigation choice was a 5 tabs menu, with a prominently positioned PIVOT tab, that draws the user's attention to the main screen with the AR elements. The rest of the tabs are named after actions they represent, in order to inspire a more active exploration of the app and in consequence of the environment.

  • TREK is the map view that reveals all the PIVOT points in the area the user is exploring

  • LEARN gives a list view of the closer PIVOT points and reveals more information

  • PIVOT is the main AR view mode, and includes all other camera functions as well

  • LOVE is a fast way for the user to revisit their favorite PIVOT points and those of their friends

  • CONNECT is the user profile and activity, where one can track their interactions with their connections as well.

Show More
Show More

This is the final design for one of the main features of the PIVOTtheWorld; the photographic timeline that reveals historical pictures of the landmark the user is visiting. By swiping left or right, the user travels through time to reveal visual and textual information of the past.

Product Mockups:

HISTORICAL TIMELINE DESIGN

Show More

Other Features:

SHOEBOX ARCHIVING

While exploring other features of the app, we wanted to create a process where users could easily contribute with their own content by uploading their old photos and stories - what we call "Shoebox Archiving".

I designed this process as part of the camera features and it is simple in its use and discreet in its visual cues. The process includes taking a picture of your content and uploading with a geotag and a description.

Show More

Wireframes for "Shoebox Archiving" process

PIVOTtheWorld is an app aiming for cultural preservation, but is also proposed as an alternative tourism app. In this context, users who are visiting a location get access to all this historical content and can learn the intimate history of the place in an intuitive but also fascinating manner.

 

In order to facilitate this use case of a tourist user, one of the goals of PIVOT is to make it easier to navigate through the populated PIVOT points and focus on the most significant or most interesting to the user landmarks.

For this reason a PIVOT tour feature was added, to organize trekking by theme or location. This reveals a predefined set of PIVOT points that include stories to the particular tour the user has chosen & at the same time is gives a navigation path on the map view for the user's convenience.

Other Features:

DESIGNING TOURS

Other Features:

PERSONAL HISTORICAL TIMELINE

One of the features that was discussed for User can create their own historical timelines by overlapping historical pictures with their camera feed.

My proposal for the picture overlap includes using edge detections to create strategic transparencies for the picture line up.

Show More

LAUNCHED PRODUCT

The first launched project of PIVOTtheWorld is an app for Harvard Univeristy. The Harvard Official Mobile Tour offers an augmented reality tour of Harvard's fascinating landmarks and their history.

The project differs for the main PIVOT app design because of the strict guidelines from Harvard University concerning content management.

In this version of the app the users are not allowed to upload their own content, however can still create their personal experience of Harvard campus by storing locally their pictures and their favorite PIVOT points.

Show More
Show More

WEBSITE DESIGN

Here's how to contact me.

alkistis.mav@gmail.com

  • Black LinkedIn Icon