lightspeed_cover_photo.png

Mobility App Re-Design

Company: Moovel

PHP-Education-Wireframes.png

Mobility App Re-Design

 

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.

 
magnifyingglass_person.png
 

understanding the problem

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 do we re-imagine the Activate system to become a platform rather than just a tool? A platform that inspires personal career-growth,  facilities knowledge-share and feedback-loops between peers, and generates trackable evaluation metrics?

target.png
 

problem statement

With their 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. 

1) Building on the existing video functionality within the Activate Application, how do we save teachers valuable time, deepen peer-to-peer collaboration, and encourage independent learning?

mountain.png
 

the solution

Every Activate System has three components:

 
 
ME.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 July 2018. In addition to the user-experience, I was also responsible for an overhaul UI uplift. 


time.png
 

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 the project 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.

 
 
PHP-Education-Wireframes.png

The Approach

Although my brief was to deeper collaboration between teachers and their peers, I stressed that engaging in a feature parity war with purely social apps was neither strategic, nor had the best interests of the app's users at heart. To differentiate ourselves in an already mature and competitive market, we needed to define a desirable role for the app and how it would meet the needs of the Lightspeed users. I was thrilled by the opportunity to create something more meaningful.

 
 
unite.png
 

1) 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, sparked tons of great ideas.


drawing board.png
 

2) 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. 


book3.png
 

3) Starting on the same page

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. 


trust.png
 

4) 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

Discovery

The discovery phase was a quick, high‐intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client's vision, and begin research into user needs, behaviors and pain‐points. We also kicked off a technical discovery phase to understand feasibility and constraints.

 
analytics2.png
 

Research

Before we dove into ideation, we wanted to take a closer look at our users. 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.

Tight timing meant that we needed to be efficient conducting user research and collecting feedback. We conducted a series of interviews with stakeholders, teachers, and school administrators and looked deeply into the previous white-label research and studies that Lightspeed had previously conducted. These varied research techniques helped to quickly gain insights into the needs of our users and gave us a concrete understanding of the environment and workflows. In an ideal timeline I would have loved to explore more ethnographic research methods to reach a wider-net of users and further validate assumptions.


personas.png
 

user Personas 

Based off of the patterns and trends we uncovered from our research, 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. 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.

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

Our persona hypothesis consisted of five 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 identified sufficient behavioral variables to segment our user audience. We discussed the personas with our client to develop a clear picture of who the design of the app would target in phase 1 and later in future releases.

 
 
 
 
 
layout.png
 

Mapping the Experience

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.

 
 
 
 
 
 
Rectangle 7.png

W

Requirements, framework, and structuring the experience

 
 

 
compas.png
 

Designing for what users want to know, do & feel

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.


book.png
 

Storytelling About Ideal Experiences

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.

 
PHP-Education-Wireframes.png

Exploration 

Inspiration, Ideation, and Wireframes

 
 

extracting user stories + requirements

Combing through our 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. 


tools.png
 

wireframes + user flows

Weekly design sessions with the client allowed me 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. 


screen.png
 

Proposed experience

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. 

Through our research and ideation phase, we learned that there were three areas of importance that we needed to focus the experience on.

1. Providing  teachers with an intimate experience were they felt closer to their classroom and students.
2. Provide a communal experience were teachers are encouraged to actively create, share and contribute to their passions together.
3.  Make content easy to create, access, share, engage, and evaluate. 

We took a lot of inspiration from a physical festival experience and leaned on that analogy throughout our design process. We felt that a similar dynamic can be observed with festivals.  You become interested in a festival because of content you love, but you can access this content from the comfort of wherever/whenever. You attend a festival for the social experience of being with others (the human electricity that can't be replicated by watching or listening alone), the opportunity to truly express yourself, and the chance to meet new friends that share the same passions. Festivals also provide fans with unique opportunities to be recognized by the crowd or become part of the show (appearing on stage or on a big screen TV).  The second you walk into a festival, you have a chance to be as famous as the stars on stage (even if just for a moment) and that motivates you to express yourself in creative ways.  

 
 
Rectangle 7.png

Solution

Design-Solving + High-Fidelity Designs

 
time.png
 

Saves 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
  • Streamlined posting, 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

 

Leverages video capabilities while introducing social paradigms

  • 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

crystal.png
 

Provides teachers a platform that encourages sharing and deeper 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

mountain.png
 

inspires independent learning and collects data along the way...

  • Educators can bring  moments back to life, allowing others to experience the authentic conversations that occurred between students more than once
  •  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 
  • Educators can learn new methods when revisiting saved video lessons or viewing their peer lessons

 

 
Rectangle 6.png

Refinement

Testing, Outcomes, and Learnings

 
 
pencil.png
 

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.


 

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.


learnings.png
 

learnings

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.