Header cover image

Detroit River Story Lab - Web App

  • Client/Employer

    Detroit River Story Lab - U of Michigan

  • Category

    Agile Programming

  • Start Date

    01/2024

  • End Date

    05/2024

  • Tools

    React, Jira, Figma

Overview

The Detroit River is a vital part of the local community, rich in history and personal experiences. However, there existed a gap in sharing these stories and connecting people to the river's narratives. Our client - the Detroit River Story Lab (DRSL) aimed to bridge this gap by providing a platform for the community to contribute, learn, and engage with the tapestry of stories surrounding the Detroit River.

In this project, I took the role of a Scrum Master, facilitating Agile development process across five sprints. My responsibilities included coordinating daily stand-ups, managing sprint planning sessions, and ensuring that our team remained on track with our deliverables. Along with the product owner, I maintained effective communication between the rest of our team and the client, helping the development process adapt quickly to feedback, solving problems that arise, and iterating on solutions.

By fostering a collaborative environment and emphasizing the importance of prioritization and balancing constraints, I ensured that our team could deliver a high-quality, user-friendly web app that met the client’s vision and community needs.

Scrum Master Skill Demo

Image above: Screenshots of the team's Jira Board in Sprint 2

Key Skills

  • Agile Methodology Facilitation & Implementation
  • Frontend Development
  • Stakeholder Collaboration
  • Prototype Design
  • Quality Assurance
  • Scrum Master Leadership

Project Poster

DRSL Poster

Presented in April 2024. To view a large version of this poster, please visit this link.

Background

Client Needs

The project started from the need to foster a deeper connection between the community and the Detroit River's history and personal narratives. From initial meeting, our client identified the following needs to be fulfilled:

  1. 1. Sharing Personal and Historical Experiences: The client recognized the importance of capturing and preserving personal experiences and historical accounts related to the Detroit River. By creating a platform for sharing these stories, the project will enrich the community's understanding and appreciation of the river.
  2. 2. Connecting People to the River's Narratives: The client sought to establish a meaningful connection between individuals and the river's narratives. The solution need to provide an immersive and engaging experience that would facilitate a deeper understanding of the river's cultural and historical significance.

Old Map for the Detroit River

Inspired by longstanding local efforts to resurface submerged stories along the river corridor, the Story Lab collaborates on site-specific projects to promote environmental stewardship, place-based identity, and regional integration.

Value Proposition

After discussion, our team synthesized the core components of this value proposition:

  1. 1. Accessible Mobile Web Application: A user-friendly mobile web application will be designed to be easily accessible to riverfront visitors. This platform will allow users to share and discover stories at various sites along the Detroit River, making the narratives both approachable and engaging.
  2. 2. QR Code Integration for Seamless Access: The application will incorporate QR code to connect physical locations with digital content. Visitors can scan codes placed at points of interest along the riverfront to instantly access site-specific stories and historical information, creating a direct link between the physical and digital realms.
  3. 3. Multimedia Storytelling Capabilities: To enrich the storytelling experience, the platform will support a variety of multimedia formats, including text, video, photos, and audio. This feature will empower users to contribute diverse and dynamic content, fostering a vibrant and inclusive tapestry of the Detroit River’s history and personal connections.

By bridging the gap between personal experiences and historical accounts, the platform will create a living narrative that continues to grow and be celebrated by future generations, keeping the stories of the Detroit River alive and thriving.

Design Specs

We received some design and user research artifact from the previous project team. In the development process, we utilized the usability research findings, closely implemented the design, and created new design pages to achieve project goals.

Style Guide

Figma prototype

Design Prototype

Figma prototype

New Screens: Admin Content Moderation System

After evaluating the client's need for effective content moderation, our team recognized the importance of developing new screen designs specifically for admin approval processes. These screens were essential for ensuring that all user-submitted content adhered to community guidelines and maintained the quality and integrity of the platform.

Figma prototype

As the Scrum Master, I facilitated discussions between the client and our design team to identify the exact requirements and functionality needed for these screens. I ensured that the creation of these admin interfaces was seamlessly integrated into our sprint cycles, prioritizing their development to align with the overall function of the web app. By coordinating the iterative design and feedback process, I helped our team deliver a solution that met the client’s content moderation needs, enhancing the platform's reliability and user trust.

Tech Stack

The web app was crafted using a robust and modern tech stack to deliver a seamless, feature-rich user experience. As the Scrum Master, I helped ensure that each component was effectively implemented and aligned with the project’s goals. The core components of this tech stack include:

  1. 1. React-Redux Toolkit: React laid the foundation for this webapp, and the Redux Toolkit was employed to manage the web app's state efficiently. This integration ensured a smooth and cohesive user experience across all features.
  2. 2. Google Maps API: Google Maps API was integrated to offer a familiar mapping interface, which provides precise location detection and responsive map rendering, eventually making it easy for users to explore the Detroit River’s stories as users walk along the river in real time.
  3. 3. Ant-Design Components: The web app maintained a consistent and visually appealing user interface through Ant-Design, a highly customizable library of design components, creating a uniform and modern aesthetic across all pages under our client's branding.
  4. 4. Firebase Backend: Firebase provides instantaneous data updates as the backend. Its secure, multi-channel user authentication system also provided reliable access control, ensuring that only registered users could safely contribute content and interact with the posting features.

Development Process

To create the web app for the Detroit River region, I helped the development team to implement an Agile methodology, integrating the previous team's user research findings and design prototype into the iterative development process.

Establishing an Iterative Development Process

I led the team in establishing a robust iterative development process, implementing a 2-week sprint cycle. This approach allowed us to break down the project into manageable user stories and tasks, providing the team with clear goals and deadlines. By focusing on specific deliverables within each sprint, we fostered continuous improvement and maintained momentum throughout the development lifecycle.

Picture of the agile timeline for the team.

Integrating User Research and Design Prototype with Continuous Feedback

A key aspect of my role as Scrum Master was to ensure that the valuable user research findings and design prototypes from the previous team were seamlessly integrated into our development process. I facilitated close collaboration with the client, ensuring that user needs, pain points, and desired features were thoroughly understood and addressed in each sprint. Through regular sprint planning and retrospective meetings, I ensured that our approach was adaptive and responsive to feedback.

To keep our development efforts aligned with user expectations, I also coordinated regular user testing sessions. This allowed the team to gather ongoing input, quickly iterate on produced work, and catch any issues early in the process, ensuring that the final product met the highest standards of quality and satisfaction from both the user and the client.

Sprint Retrospective meetings and Continuous Improvement

The team held regular sprint retrospective sessions to reflect on our process ("How we work"), identify areas for improvement, and celebrate our successes. One of the key turning points in our development cycle came after a particularly insightful retrospective session. During this meeting, I facilitated an open and constructive discussion, encouraging team members to share their thoughts on what was working well and where we could make adjustments. Through this collaborative reflection, we identified specific bottlenecks in our workflow and made actionable decisions to streamline our processes. As a result of these improvements, our team was able to take on more story points in the later sprints, significantly increasing our productivity and efficiency.

Velocity report for the proejctCumulative flow diagram for the project.

Velocity Report and the cumulative flow diagram for the project.

Reflection

About the team

Our team was composed of developers and UX designers. We practiced Agile methodology throughout the project, conducting sprints, self-organizing, and utilizing Scrum ceremonies like sprint reviews and retrospectives. By working Agile, we were able to move faster, clearing roadblocks, eventually achieving and exceeding project goals.

Picture of the team at the Exposition.

Left to right: Haoyue Wen, Ziyan Zhou, Prarthana Shevatekar, Ceciel Zhong, Xinran Cao, Leo Yeh

Cursor

mode

Direction

Overlay Decor