4.png

ONE DROP INTERACTIVE

ONE DROP INTERACTIVE

 

 

About This Project

One Drop Interactive provides employee sustainability education, while simultaneously collecting data about employee workspaces and department practices to reveal areas for cost and environmental savings. Developed and incubated by a globally recognized sustainability consultancy, One Drop Interactive delivers decades of applied sustainability learnings to the client’s fingertips. The platform combines e-learning modules (topics include Recycling, Energy, Water, Transportation, and Purchasing) with a gamified experience where employees are grouped into teams and compete for rewards.

Our Solution

A mobile platform to be used in conjunction with the current desktop points program--a mobile gamified experience that gives users another way to earn points. Taking advantage of the mobile context, the new app broadens the gamification aspects of the desktop version and extends the team challenges into the mobile sphere, allowing users to enter data and earn points on the go. The mobile game consists of various interactions to keep the users engaged while learning green practices.  

 
 
 

E-Learning Gamification

Using iconography and flat design as our visual cornerstone, we created fun and intuitive trivia-inspired quizzes to engage and stimulate users.

 
 

Rack-Up Points on The Fly

Taking advantage of the mobile context, along with our CEO's request for more ways to earn points, we implemented a camera feature that allows users to report unsustainable workplace practices. 

 
 

Compete with Co-Workers and Track Progress

Users have access to an interactive profile page where they can track their individual and team progress on the go driving deeper engagement and competition within the organization.

 
 
Line.png

Process

INSPECT & ADAPT

Screen Shot 2015-11-09 at 1.11.40 PM.png

Since we only had two weeks from assignment to presentation, we had to move fast and work efficiently. We used Scrum techniques to streamline the UX process and be as agile as possible. Since we had only two weeks to complete the project, our team needed to be autonomous and worked in sprints.

PROJECT OVERVIEW

One Drop Interactive needs a mobile platform that can be used in conjunction with their current desktop program.

FEATURES

Must Have: Allows users to continue to earn points away from their desktop.

Nice to Have: (1) A photo-reporting feature to record wasteful behaviors in the office (lights on all night, leaky faucets..) (2) A geo-based rewards program.

MY ROLE

Ideation, Interview, Market Research, CCA, Business Canvas, Personas, Site Map, Sketches, Low-Fidelity Wires, Categories Page, High Fidelity Prototype

DURATION

14 Days

dream Team

For this project, I was lucky enough to work with Greta HarrisonEvangeline Hsiao and Tiffany Koh 

TOOLS

 

 

 

Line.png

Discovery

 

Business Canvas Model

To make sure we kept the company's existing business model in mind during the entire design process, our first deliverable was to create a Business Canvas Model for One Drop Interactive. This visual chart depicts the company's value proposition, infrastructure and customer needs.

 
 
 

 

Heuristic Evaluation of Current System  Desktop Platform

 

We also did a deep dive on the existing platform and went through the current user flow to familiarize ourselves with One Drop Interactive's goals and needs. The current desktop platform was not that user-friendly nor intuitive.

We annotated the various issues with the existing desktop platform. For example, the homepage had two progress bars, which caused confusion, and neither progress bars allowed the user to review previous content. Through our heuristic evaluation, we also noted things to consider when designing for the mobile application.

 

Initial Idea

 

SKETCHES OF VIDEO FLOW

After our interview with the One Drop Interactive Team, we struggled to find a starting point. Since they didn’t have a mobile platform to begin with, our first idea was to replicate the current desktop experience on mobile. However, the ODI team also said they were excited about introducing new features to the mobile context, specifically a photo reporting feature and a geolocation feature.

 We knew we needed to start the ideation process very early and relied on white board walls to map out ODI’s current desktop experience in a mobile context. We did this to see if it was even feasible to translate the desktop flow to mobile. We also started researching best practices for mobile, focusing on video and educational apps.

 
 

During this initial ideation, we came to the realization that directly translating the desktop experience to mobile was suboptimal for all stakeholders. We would be unable to seamlessly integrate the features ODI specifically requested into the existing flow, and would be unable to create an intuitive and enticing mobile experience for users utilizing the existing content.

 

 
 

Narrowing Scope: Taking Action

This was a pivotal moment in our project where we learned the importance of open and effective communication with the client throughout each step of the process. We knew we had to go back to the drawing board, but before we could re-approach the UX process we needed to narrow the scope and redefine the MVP.  We did this by collaborating directly with the client to jointly outline the exact business objectives and a more precise scope for the project moving forward. To execute the project, we also agreed on a research plan(i.e surveying, interviews, and contextual inquiry to help identify target audience, discover user needs, and gather demographic information)

 Our MVP was solidified:

The One Drop mobile experience is an extension of the current platform, but not a direct reflection of it. Taking advantage of the mobile context, the new app broadens the gamification aspects of the desktop version and extends the team challenges into the mobile sphere, allowing users to enter data and earn points on the go.
 
Line.png

Research

 

Mobile Research

The stakeholder handed us a blank canvas by presenting us with the opportunity to develop a companion app to the existing desktop platform. What did this mean for us? We needed to find a method to educate and break down information to users in an engaging and fun way. We wanted to make sure our assumptions we were grounded in research and current mobile trends. Fortunately, we found statistics to both support One Drop’s decision to create a mobile app and our decision to take a gamified approach.


MOBILE GAMING STATISTICS

  • Games were the most popular IOS category
  • 32% of time spent on mobile was for games
  • The mobile gaming market is worth 16 billion
  • 100 million Americans are mobile gamers
  •  Trivia + strategy games have the highest in-app purchases

MOBILE APP STATISTICS

  • The tipping point between the number of mobile users vs desktop occurred in 2014
  • 80% of searches were mobile in 2014
  • 89% of time spent on mobile were focused on using apps
  • People spent ~5.6 hours a day looking at digital media, 51% of that time was on mobile

 
 

Comparative/Competitive Analysis

We spent 3 of our 14 days doing research. We created a CCA on mobile apps with similar features to what One Drop's team was looking to incorporate into their mobile experience. We focused on well-liked E-Learning, Gaming and Photography apps.

 

User Research

 

Before we dove deeper into research and ideation, we needed to examine current user behavior. We created a survey that focused on gaining insight on behaviors and opinions towards e-learning. We initially hoped to survey current One Drop Interactive users so we could compile specific data points related to e-learning in the workplace with an even more specific sub-category of environmental sustainability. Unfortunately, due to non-disclosure agreements with companies using the platform, we did not have access to this specific user-base nor any demographic information about them.

Creating a user-centered design without access to current users posed a unique challenge for our team. We had to approach the UX process from a completely different angle; as a result, our focus on market research and new user-testing intensified.

 

 

Personas

Based off of heuristic evaluation and input from One Drop's team, we came up with two unique personas.

 

Storyboards

Instead of traditional text-only scenarios, we created storyboards to visually empathize with Marc and Julia.

Line.png

Ideation

 

Proposed Sitemap

We created a sitemap of One Drop Interactive to get a better idea of the underlying organization, structure, and nomenclature of the product. Our goal here was to define the relationships between the mobile content/functionality and divide the content up in a way that matched our users needs and expectations.  We knew that making a navigation component choice based on looks alone could force us to change an ideal Information Architecture to something that doesn’t best serve the needs of users or accommodate the content.  Laying out the information architecture of the mobile experience allowed us to to get a handle on the volume and complexity of the content, and determine what screens were essential in our flow.


User Flow

 We rounded out our ideation process by creating a user journey  that narrowed in on our MVP and focused primarily on our largest user group and their key tasks. Our team understood the importance of starting out focused with personas in mind, conquering that flow well, and then building on it judiciously over time.  We started with the current flow on how an employee would enter the app, learn about the platform, login, and start playing the game to earn points towards prizes. Our primary objective here was to demonstrate the step-by-step elements required to allow the user and the business to accomplish their goals in the design, and provide the most accurate view of scope and effort. 

Line.png

Design

Translating to Paper Prototypes

We translated our inital sketches to paper and made a clickable prototype using the POP app. We were then able to start testing our design.

OneDrop_PaperProto1-min.jpeg

Low-Fidelity Wireframes

 

Our next step was to translate our paper prototype into digital renderings. We made low fidelity wireframes using Sketch. We uploaded these wireframes to InVision create a clickable prototype to test with users.

 

Validating MVP With User Testing

Due to the current user constraints, we were forced to rely heavily on new user testing and iteration in order to validate our MVP.  After testing, testing, and testing, we were overwhelmed by the positive response to our MVP concept. Through many tests and iterations, we were able to substantiate the usability effectiveness of our product and validate our MVP idea. 

 

Iterations

 

 
 

High-Fidelity Prototype

 

After testing our low fidelity wires and making a few iterations, we were able to start creating our high-fidelity prototype in Sketch. Our design aesthetic was clean, bright and whimsical with a clear representation of One Drop's focus on sustainability.

 


Next Steps

 

Camera Feature

For this project, we focused on our MVP -- the trivia game. One of our next steps is to fully build out the camera “report” feature and gain a greater understanding of what that feature would entail. During user testing, some users were confused with the functionality of the camera “report” feature. We will need to set up clear parameters by which users can use the photo report feature. 

Further Testing

We need to further test our products with users that fit within the demographics of One Drop Interactive Platform.