top of page
vgreenmockup-cover_blue.png

V-Advocate

Sustainability & Accessibility Augmented Reality App

Project Summary

For the Viasat Intern hackathon event, DevHack, my team created an augmented reality (AR) web app that could be used to showcase Viasat's sustainability initiatives. Our plan was to create a web app to showcase sustainability tips in Augmented Reality (AR). We created QR codes to access our app that would be scattered around the Viasat campus.

My Role

UX/UI Designer, Front-end Developer

Timeline

July 13 – 14, 2019
We had 33 hours to work on this project (starting Saturday at 8 a.m. and stopping Sunday at 5 p.m.)

Common Understanding Session

As a UX Visual Design Intern at Viasat, I learned to kick off a project with a common understanding session. This session helps everyone involved on the project get on the same page about what they will be making and how to approach the project. I introduced this idea to my DevHack team and we found it got us all on the same page about what we were creating and how to get it accomplished. After this session, we were able to break off and each work on our separate parts, knowing that we all had the same goals in mind.

Key Takeaways

Requirements

  • Purpose of the app is to present information and facts and help users navigate through the Viasat campus.

  • Build a web app using a public IP for the demo.

  • Use a building map to show accessible accommodations.

  • Start with the main building, plan to expand to other buildings if time allows.

 

Personas

  • While we didn't have time to develop full user personas, we identified three main user groups: Visitors to Campus, People with Disabilities and Employees/Interns.

  • Make sure that the app represents Viasat's fun company culture and innovative nature.

  • Built to help people discover accessible areas and Viasat's initiatives.

Project Goals

  1. Generate interest and excitement for Viasat’s initiatives by encouraging people to engage with and make memorable associations with the initiatives.

  2. Showcase that Viasat is a forward-looking, innovative tech company by incorporating new technology into the campus.

  3. Discovery/promotion of Viasat’s accessible areas and initiatives.

Sketching

Accessible Building Map Sketch

Sustainability Initiative Sketch

Wireframes

After sketching out the concepts, I created low fidelity wireframes for our app with Figma.

Design / Branding

Since we were creating an app for use on the Viasat campus, I made sure that the logos, fonts and colors aligned with the Viasat brand. I utilized the Viasat web color palette and digital style guide to create a dark theme that completely followed Viasat's brand guidelines.

Prototypes

I created interactive prototypes with Figma for the two apps that we decided to make — building accessibility maps (left) and VGreen sustainability tips (right).

Front-end Development

While the software engineers on my team worked on getting the AR technology to work with our web app, I used HTML and CSS to code the visual interface of our proof of concept demos.

What I Would Improve / Future Plans

  • Expand to other company initiatives and employee resource groups

  • Continually update and refresh content

  • Implement Video AR for Viasat employees to tell their stories

  • Develop more QR codes to place around campus

  • Incorporate audio features to aid the visually impaired

  • Expand accessibility area maps to encompass all of the buildings on Viasat's campus

What I Learned / Takeaways

  • Make it work, then make it pretty

  • Not everything needs to be perfect

  • Using a proof of concept demo to showcase idea

  • Presenting product concisely

  • Working with a team with different backgrounds

Tools Used

Figma, HTML, CSS

Skills

Project Management, Wireframes, Mockups, Prototyping, UI Design, Front-end Development, Presentation

Collaborators

Nicole Houser: UX/UI Design, Front-end Development

Umaiyal Sridas: Ideation, Content Creation & Copywriting, Presentation Design

Kenny Scharm: Back-end Development, AR

Michael Kemper: Back-end Development, AR

Ian Lee: Internal Communications Plan, Presentation
Victoria Lee: Research, Presentation

bottom of page