journeymap_shell.png

Trip Utilities Research (dud)

Agency Client

3.png

Trip Utilities Research

Moovel builds products that allow transit agencies and transit riders to engage in an entire transportation ecosystem. With moovel transit's Rider App, consumers can pay for their transit fare as they run to catch their ride. The app also allows access to mobile services including trip planning, arrival times, service alerts and deals at nearby retailers. Deployed in cities across the US, transit riders love the convenience provided by moovel transit's mobile payment apps.

 
 

Moovel

Cities around the world are evolving and, as a result, urban mobility has become an ecosystem of connected modes of transportation. Moving around in cities, we travel in different ways, including walking, biking, riding public transit, and using cars. With the rise of new technologies and the on-demand economy, providing us access to whatever we want, whenever we want, transportation is no longer just a question of options, but of convenience and ease of use.

 

How the Activate Platform Works

Each platform consists of three main components

Artboard.png

AUDIO SYSTEm

A pod sits with each small group keeping the teacher within earshot - but without disrupting - every learning moment. The wireless, battery-powered pods include a speaker and microphones to enable 2-way communication. Up to 12 pods can be connected to a single system.

ACTIVATE STATION

 In addition to charging Pods and Flexmikes, Activate Station is also the connection to teacher's mobile devices via Bluetooth for Pod control and audio streaming. Audio jacks make it easy to connect computers and other audio sources, acting as the audio hub for all your multimedia devices.

ACTIVATE APP 

The app allows the teacher to connect to each pod and the whole class to instruct, monitor and enable student sharing. It also records video synced with high-quality audio from the teacher microphones and pods. Teachers can capture critical teaching and learning moments.

 
1-2.png

My Role

Working closely with the Lightspeed Founders and Product Team, my role as the sole Product Designer was to identify key opportunities to simplify and expand on the existing functionality of the Activate Mobile Application. More specifically, I was tasked with re-imagining the video-collaboration capabilities to tie in deeper and more meaningful peer-to-peer engagement. I lead the UX work, producing all major deliverables and presenting these to the client between March 2018 and August 2018. In addition to the user-experience, I was also responsible for an overhaul UI uplift.

 

Objectives + Constraints

Our client approached us with two primary objectives —to enhance their app's functionality and usability; and to deepen collaboration between teachers and their peers. To coincide with a tight demo schedule we were under extreme pressure to move fast. On top of that, I was brought-on  midway through kickoff to replace the original Product Designer. We were tasked to deliver an iPhone high‐fidelity prototype to our technical production team within 3 months. The combination of a fixed deadline, app store submission time, security testing, and usability testing meant I needed to get the experience right in the first 8 weeks.

PROJECT GOALS

  1. Deepen peer-to-peer collaboration by creating a platform where teachers can share and engage

  2. Collect better data in order to provide users with more personalization

  3. Clarify value propositions and generally how the service works

  4. Create a flow that saves teachers valuable time by reducing the legwork it takes to share classroom content

KEY CONSIDERATIONS

  1. The design should be familiar upon first-use, introducing paradigms that are natural, effortless, and unobtrusive-- we should not be reinventing the wheel.

  2. Must balance: educating the user, the number of steps in the flow, and the amount of data collected with the ease of getting through the flow quickly.

 
 
PHP-Education-Wireframes.png

Understanding the Problem

A "problem first" approach rooted in empathy

 
 

Begin with Empathy 

The Scenario

Imagine you are an Elementary school teacher who teaches Math for Grades 3, 4 and 5 and Science Grades 4 and 5. Everyday you wake up at 6:30am to arrive at school 1 hour before your students to prepare lesson plans and setup your classroom for the day. From 8:30am to Noon you teach your first three periods, which is followed by a 1-hour lunch-break (that you typically work through),  and then finished with your last two classes. The day wraps with your free period which is often spent grading papers or exams,  followed by the occasional staff/admin meeting (occasional meaning: at least 2 times a week). Did we mention the all-too-frequent teacher/parent visits that get tacked onto the day? Or the several post-dinner hours grading exams that you could not get to during your lunch-break?  

Needless to say, your time is LIMITED with few windows available to spend collaborating with peers on lesson plans, evaluating student performance, and time for personal growth to enhance classroom methodology and techniques. 

You came to this job because you want to move every child forward, improve learning for all, and collaborate with likeminded educators who share your passion for teaching. You consider yourself a connected-educator: one who seeks collaboration with other educators, experts, and students, both locally and around the world.  However you struggle to achieve this level of competence because you find yourself spending most of your time dealing with day-to-day minutia and unexpected meetings that turn into time sinkholes.

Yes, these are all responsibilities that come with the job, but you wish there was a platform that allowed you to engage with your fellow educators in a more meaningful way. This kind of platform would not only save you valuable time and open opportunities to deepen your peer relationships, but it would provide a mirror to reflect and improve on your own personal performance.

"Being able to observe and collaborate on student performance together (rather than siloed) creates an ecosystem where the progress of every child is derived from a multitude of perspectives and viewpoints. This wholistic and multifaceted approach to education offers students a path forward that is intentional, free of bias, and in their best interest."

 

 
1-2.png

Problem Statement

With crowded calendars, today’s educators can be hard-pressed to find time to learn from each other. Agendas tend to be structured with district initiatives and teachers’ peer-to-peer collaboration-time may sometimes be limited to a four-minute passing period, lunch, or the few precious moments before or after students come into the classroom. Educators need a quick and easy way to to connect, collaborate, and engage with peers , parents, and students beyond traditional outlets.

 

the solution

A re-imagined Activate experience—From a tool to a platform.

One that…

 
 
 
 
PHP-Education-Wireframes.png

The Approach

Strategy + Kickoff

 
 

A collaborative culture with lean UX

Due to time constraints I opted for a lean approach which emphasized rapid sketching, wireframes, user feedback and design mockups. This created early team‐wide alignment, and sparked tons of great ideas

 
1-2.png

Going back to the Drawing Board

Meeting with key stakeholders weekly helped us to understand their business challenges, goals, and constraints. Together we identified risks and aligned on expectations and constructed a shared vision for the app. Following this, I crafted an experience strategy outlining our phased approach and direction for the app.

 

Building trust through transparency

Sharing  methods and thinking from the outset helped to build a strong client relationship. Ample opportunities for input at all stages of the project built trust and created a safe environment to share ideas—forming a partnership which will serve much value beyond this phase. Coming on later to the project meant that I had limited time to make an impression, so it was important that I built that trust by showcasing my intentions openly. 

 
 
 
PHP-Education-Wireframes.png

Research + Discovery

A look into user needs, behaviors and pain‐points

 
 

Heuristic Evaluation

In an effort to uncover strengths and areas of improvement within the existing application I conducted a thorough heuristic evaluation. These heuristics proved to be a helpful starting place and offered a structure for presenting findings and recommendations. It also allowed me to collect feedback early in the design process and identify areas of immediate friction and discourse to focus my attention on— i.e. low hanging fruit that required minimal time and effort to improve.

I focused on the following areas when conduction my tear-down:

• Efficient Navigation
• Organizational Clarity
• Clear Labeling
• Consistent Design
• Matching User Expectations
• Effective Visual Design
• Supporting Readability & Scannability
• Facilitating User Tasks
• Providing Help

Canvas 1.png
 

Stakeholder Interviews 

It was crucial for me to establish relationships with stakeholders as early as possible as I viewed this as an opportunity to build credibility and establish a line of communication. My first order of duty was conducting a series of Stakeholder interviews with an objective of answering the following questions: 

  • What is the product?

  • What is this product is meant to accomplish?

  • Who will use it?

  • What do THE STAKEHOLDERS think users need?

  • What customers and users are most important?

  • What challenges do we face?

  • How would the stakeholders like to be involved?

  • How do they define success?

 

User Interviews + Findings

Before we dove into ideation, we wanted to take a closer look at our users. Following  my Stakeholder interviews I conducted a series of 6 interviews with teachers and school administrators at their schools. The goal was to understand the user behaviors, and get a sense for their motivations, pain points, and pleasure points were. This provided us with a human-element that allowed us to emphasize and form a deeper connection.

Our interviews consisted of three parts

 
 
 
 
 
 

Personas

Our persona hypothesis consisted of four different archetypes which we used to facilitate discussions about our users needs, desires and varying contexts of use. Through careful analysis of our research, we uncovered patterns and trends and identified sufficient behavioral variables to segment our user audience. I came up with a personas that focused on their behaviors, pain points, goals and needs, and what they were lacking from the current experiences they use today. We discussed the personas with our client to develop a clear picture of who the design of the app would target.

“We used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.”

After designating persona types we were able to prioritize  who we would be focusing on supporting in the early stages. The phase 1 app focused on supporting the goals of Stacey and Roberta, our primary personas. We planned for later phases to support Stephen, and Loretta.

 
 
 
 
 

Research Findings

Consistent pain-points uncovered during initial user-research

 
 
 
 
 
4.png

Customer Journey Mapping

Storytelling and Visualization

 
 

Visualizing the end‐to‐end

We used experience mapping techniques to visualize and communicate the users end‐to‐end experience across various touch‐points with the app. This allowed us to represent user pain‐points and see where we needed to focus our attention. Mapping out the users emotions was key to setting client expectations about the aspirational emotional state we were aiming to design for.

We approached the challenge first by deeply studying a teacher's workflow.

 
 
 
 
 
 

Designing with Intention

Synthesizing user needs and goals from our research served as a lens through which we could consider not only what the app should do, but also how it should feel.  Thinking about emotional design early on helped our client understand the importance of aesthetics and tone of voice to the experience.

Knowing who exactly I was designing for allowed me to ask myself how the app fits into the lives of the users. I imagined ideal experiences and focused on how our personas think and behave rather than getting into specifics about interfaces, technologies or business goals.

Keeping the scenarios at a high‐level allowed us to work fluidly and explore concepts that we could easily communicate with the team and client. They formed the backbone of our requirements, and allowed us to express these from both a functional and emotional perspective allowing for further empathy with our users

 
 
4.png

Exploration

Inspiration, Ideation, and Wireframes

 
 

extracting user stories + requirements

Combing through research and brainstorming the different things teachers do before, during, and after school to allowed me to come up with a broad set of tasks–quickly. From here I was able to rapidly sketch various design concepts and move fluidly into low-fidelity wireframes. During these early phases of design exploration I spent a lot of time studying social paradigms and patterns to make sure I wasn't re-inventing the wheel with overly-complex features or navigation paths.

My goal was to keep the designs stripped-down to their simplest core functionality with a lot of time spent narrowing the scope and re-aligning efforts of the client to focus on the MVP we were hoping to achieve. Building on-top fo the video capabilities posed a unique challenge-- staying within a realm of pre-existing structure, while completely re-imagining its capabilities. 

 
 
 

wireframes + user flows

Weekly design sessions with the client gave me the freedom to rapidly iterate on concepts and flows while staying out of the weeds of details and functionality. I sent bi-monthly annotated "Blueprints" to keep the feedback loops in constant cycle while continuing to re-think and polish the experience until finalized flows were agreed upon and more importantly, confidently achieved the goals  of our users. 

 
 
 
 

Setting the Design Direction

Thanks to modern technology, collaboration has become more efficient and manageable. There are a variety of benefits to using tools that connect us with experts all over the world, with teachers in the classroom next door, and face-to-face. With the growing popularity of apps like Snapchat and Facebook Live, capturing and sharing video is becoming a staple of our daily communication, to the point that it is changing the way teachers collaborate and share their insights. This became the cornerstone of our design-thinking— it was important for us to keep video content-creation at the heart of the experience.

Through our research and ideation phase, we narrowed the scope to four areas importance that we needed to focus the experience on:

 
 
 
 
 

Proposed Experience

We took a top‐down approach to defining the overall structure of the experience. Sketching, I generated stacks of ideas about the arrangement of UI and functionality. Starting broad, our vision began evolving into something tangible. A high‐level design language, interactions and the app's anatomy began to piece together.I defined the primary pathways our personas would explore through the app. Crafting several key user journeys for each of our personas, was the best way to conceptualize and structure the proposed content and functionality. I began to think about particular usage contexts, the opportunities they present and how elements manifesting themselves in the interface would help to support the user.

 
 
 
 
 
4.png

Refinement

User Testing, Iteration, and Defining the Visual Language

 
 

User Testing + Iterating

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. Aenean eu justo sed elit dignissim aliquam. Aenean eu justo sed elit dignissim aliquam. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus.

 

Defining the Visual Language 

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. Aenean eu justo sed elit dignissim aliquam. Aenean eu justo sed elit dignissim aliquam. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus.

 
 
 
 
 
4.png

Final Designs

Design-Solving and High-Fidelity Designs

 
 

Saves Teachers time

  • By trading videos, the teachers save the time they would’ve spent discussing the lesson, and “see” into each other’s classrooms without disrupting their students or having to track down other teachers

  • Posted content acts as digital record on how students progress, saving valuable instructional time

  • A streamlined posting-flow, allows teachers to rapidly record and post content in an efficient and easy way

  • The "explore" tab gives teachers a fast and easy way to discover content, and contribute to the discussion

  • User profile aggregates content in a singular destination, making it manageable and efficient to sift through after a day's work

 

From a Tool to a Platform

  • Provides a communal experience where educators are encouraged to actively create, share, and contribute to their passions together.

  • Teachers can share content with administrators or coaches after-the-fact therefore no key "ahah moments" or critical student interactions are missed or looked over.

  • Promotes peer-to-peer collaboration and dialogue by increasing time to connect, and giving educators a platform to comment and engage with content directly

  • while introducing familiar social paradigms

 

Promotes sharing and peer collaboration

  • Provides a communal experience where educators are encouraged to actively create, share, and contribute to their passions together.

  • Teachers can share content with administrators or coaches after-the-fact therefore no key "ahah moments" or critical student interactions are missed or looked over.

  • Promotes peer-to-peer collaboration and dialogue by increasing time to connect, and giving educators a platform to comment and engage with content directly

 

Inspires independent learning + Self- Reflection

  • Educators can bring moments back to life, allowing others to experience the authentic conversations that occurred between students more than once

  • Educators can learn new methods when revisiting saved video lessons or viewing their peer lessons

 

 Collects data along the way...

  • Ratings and Criteria Tags attach measurable metadata to each recording, tracking data for future product improvements as well as collecting trends and patterns to further inform educators and administrators

 
 
4.png

Outcomes

Measuring Success, Learnings, Next Steps

 
 

measuring success 

The following is placeholder text known as “lorem ipsum,” which is scrambled Latin used by designers to mimic real copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, elit in laoreet posuere, lectus neque blandit dui, et placerat urna diam mattis orci. Aenean eu justo sed elit dignissim aliquam. Aenean eu justo sed elit dignissim aliquam. Nulla lectus ante, consequat et ex eget, feugiat tincidunt metus.


 
 
 

Take-Aways

Prototyping
This project has been a fruitful exercise in exploring new prototyping tools like 3D modeling, 3D printing and Arduino to bring my ideas to life.

Nuances of Communication
Spoken communication intricacies stretch across the world and are unique to different socio-cultural climates. I chose English as the first step to address this challenge, but the possibilities are vast.

Confidence
While I feel interaction design is best practiced in a team, this project helped to assess and validate the skills I bring to the table as an individual contributor.