Detroit River Story Lab (DRSL)
TIME
2024 Spring
TEAMMATES
Xinran Cao | Prarthana Shevatekar | Haoyue Wen | Leo Yeh | Ceciel Zhong | Ziyan Zhou
MY ROLE
Developer | Scrum Master | UX Designer
TOOLS
React Redux TK | Google Maps API | Firebase | Jira
PROBLEM STATEMENT
How can we encourage and help community members to share personal and historical experiences along the Detroit River?
PROJECT OVERVIEW
To promote awareness and facilitate engagement for the underrepresented stories in local communitie, the project aims to deliver a mobile-accessible web app based on Figma UX prototype within 4 months. Through scanning QR codes at different locations of the river front, users and stakeholders can share various forms of content, including text, video, photo, and auditory files.
Background
Our Client - Detroit River Story Lab
DRSL is an interdisciplinary, grant-funded initiative partnering with regional organizations. Its mission is to reconnect communities with the river and its stories through collaborative research, education, and engagement projects. For this project, the client identified the following key needs:
​​🌊
​🌊
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 aimed to enrich the community's understanding and appreciation of the river's significance.
Connecting People to the River's Narratives: Beyond simply collecting stories, the client sought to establish a meaningful connection between individuals and the river's narratives. The solution needed to provide an immersive and engaging experience that would encourage exploration and facilitate a deeper understanding of the river's cultural and historical significance.
High Priority Features
​​🌊
​🌊
Mobile Web Application: A user-friendly and accessible mobile web application was developed, allowing riverfront visitors to easily share content and access stories at different sites along the Detroit River.
​
QR Code Integration: By leveraging QR code technology, the application enabled users to seamlessly access location-specific content and narratives simply by scanning codes displayed at various points of interest.
​
Multimedia Storytelling: The application empowered users to contribute diverse forms of multimedia, including text, videos, photos, and audio recordings, creating a rich tapestry of stories that celebrated the Detroit River's history and personal connections.
​🌊
Agile Timeline
We approached the project using the Agile Method. Agile is an iterative and incremental approach to project management and software development that emphasizes flexibility, collaboration, customer feedback, and rapid delivery of functional software. This method involves breaking the project into smaller, manageable units called sprints, allowing teams to continuously assess progress and adapt to changes efficiently. Throughout the sprints, we prioritized the most important and needed features from the client to ensure we delivered maximum value.
User Journey
Based on our client's requirements and the time limit, we established four main epics/features for our development focus:
-
User Authentication: Secure login and registration, including password reset, and Google login.
-
Create and Share Posts with Multimedia: Users can create, edit, and share posts with text, images, videos, and audio.
-
Explore and Map Experience: Users can discover and navigate content using search, and a dynamic map view for geographic exploration.
-
Admin Moderation: Tools for administrators to monitor and manage user content.
We broke these epics into smaller user stories and set up user flows to complete these main actions efficiently.
Tech Stack
Ant Design Compnents
A customizable library of design elements that ensures visual consistency and a polished appearance across the application.
React Redux Toolkit
React handles the UI components, while Redux Toolkit simplifies state management and reduces boilerplate code, ensuring efficient data flow between the frontend and backend.
Firebase
The application's backend was powered by Firebase, a robust and scalable platform provided by Google. Firebase offered a suite of services that facilitated efficient and secure data management, user authentication, and real-time synchronization.
Google Map API
To enhance the user experience and provide a familiar mapping interface, the application seamlessly integrated with the Google Maps API.
Design System
At the beginning of the project, we were provided with a Figma design document developed by Emily Hanafi, Meera Amin, Amelia Turco, and Cooper Drobnich. We followed most of the design and UI components for the development, making minimal adjustments for styling consistency and to meet the client's needs based on testing.
Colors and UI components
UX Design
We followed most of the design in the developed product, but made a few adjustments based on testing and client's feedback:
​
-
Created a laptop-first UI for Admin users for content moderation.
-
Added a search and filtering feature for posts.
-
Allowed audio input and uploads for users.
Design Without Major Changes
Sign Up
Log In
Account Information
Story Detail
Home
Explore Story
Site
Map
Changed Design - Profile Page
Original
New
Testing Feedback
​​🌊
The "···" icon does not suggest the function of editing the profile and could be confusing for users.
​​🌊
Placing the @username in the right corner makes it stand out and may cause users to think it is clickable. Additionally, the positioning limits the length of usernames.
​​🌊
The lack of a "Connect" action button on the profile page makes the user flow for connecting with others unclear.​​
Adjustment
​​🌊
Change the "···" icon to a pen icon to better suggest the "edit" function and place it next to the user's display name.
​​🌊
Move the @username below the display name.
​​🌊
Due to the low priority of the connect feature, we removed the "connection" panel from the profile page for now.
​​🌊
Enlarge the "+" icon and place it in the center of the page to encourage posting.
Changed Design - Create Story
Original
New
Testing Feedback
​​🌊
The original design hides the site name and tags that users choose, could cause frustration for users to forget about inputing this information or not
​​🌊
Placing the @username in the right corner makes it stand out and may cause users to think it is clickable. Additionally, the positioning limits the length of usernames.
​​🌊
The lack of a "Connect" action button on the profile page makes the user flow for connecting with others unclear.​​
Adjustment
​​🌊
Change the "···" icon to a pen icon to better suggest the "edit" function and place it next to the user's display name.
​​🌊
Move the @username below the display name.
​​🌊
Due to the low priority of the connect feature, we removed the "connection" panel from the profile page for now.
​​🌊
Enlarge the "+" icon and place it in the center of the page to encourage posting.
New Design - Filter
Filter Input
Filter Output
Testing Feedback
​​🌊
The original design hides the site name and tags that users choose, could cause frustration for users to forget about inputing this information or not
​​🌊
Placing the @username in the right corner makes it stand out and may cause users to think it is clickable. Additionally, the positioning limits the length of usernames.
​​🌊
The lack of a "Connect" action button on the profile page makes the user flow for connecting with others unclear.​​
Adjustment
​​🌊
Change the "···" icon to a pen icon to better suggest the "edit" function and place it next to the user's display name.
​​🌊
Move the @username below the display name.
​​🌊
Due to the low priority of the connect feature, we removed the "connection" panel from the profile page for now.
​​🌊
Enlarge the "+" icon and place it in the center of the page to encourage posting.
New Design - Admin Page
Admin Landing Page
Admin Approval Page
Testing Feedback
​​🌊
The original design hides the site name and tags that users choose, could cause frustration for users to forget about inputing this information or not
​​🌊
Placing the @username in the right corner makes it stand out and may cause users to think it is clickable. Additionally, the positioning limits the length of usernames.
​​🌊
The lack of a "Connect" action button on the profile page makes the user flow for connecting with others unclear.​​
Adjustment
​​🌊
Change the "···" icon to a pen icon to better suggest the "edit" function and place it next to the user's display name.
​​🌊
Move the @username below the display name.
​​🌊
Due to the low priority of the connect feature, we removed the "connection" panel from the profile page for now.
​​🌊
Enlarge the "+" icon and place it in the center of the page to encourage posting.
Web App Demo
Create an Account and Log in
With one easy scan to get information on side effects and instructions, users no longer need to worry about reading the tiny letters on the information sheet. This feature is especially convenient for elderly users
Edit Profile
To enhance the user experience, the app offers diverse notification and reminder designs to protect user privacy and avoid habituation.
Share Notes and Updates with others
With the note feature, caregivers can document progress and side effects, enabling more effective communication with each other and with the doctor.
Scan and Check Medicine Distribution
By using the AI-powered scanning feature, users can ensure the correct medicine is distributed, even if they are not in their best condition.
Scan and Check Medicine Distribution
By using the AI-powered scanning feature, users can ensure the correct medicine is distributed, even if they are not in their best condition.
Scan and Check Medicine Distribution
By using the AI-powered scanning feature, users can ensure the correct medicine is distributed, even if they are not in their best condition.
Scan and Check Medicine Distribution
By using the AI-powered scanning feature, users can ensure the correct medicine is distributed, even if they are not in their best condition.
Scan and Check Medicine Distribution
By using the AI-powered scanning feature, users can ensure the correct medicine is distributed, even if they are not in their best condition.
Future Steps
While the Detroit River Story Lab project successfully addressed the client's needs and delivered a valuable solution, there are several areas for potential enhancement and expansion. Based on the insights gathered during the project's development and feedback from stakeholders, the following next steps have been identified:
Performance Optimization
To ensure a seamless and responsive user experience, especially as the application's user base and content volume grow, several performance optimization measures have been proposed:​
1.
Caching: Implementing intelligent caching mechanisms can significantly improve the application's performance by reducing the need to fetch data from the server repeatedly. Caching frequently accessed data on the client-side can minimize network requests and accelerate content delivery.​
2.
​Debounce and Throttle: Techniques like debouncing and throttling can be applied to certain user interactions, such as search queries or scroll events, to prevent excessive function calls and improve overall responsiveness.​
3.
​Error Prevention and Management: Robust error handling and prevention strategies should be implemented to ensure a seamless user experience even in the face of unexpected errors or edge cases. This includes proactive error detection, graceful error handling, and comprehensive logging and monitoring systems.
User Experience (UX) and Content Enhancements
To further enrich the user experience and expand the application's content offerings, the following enhancements have been proposed:
1.
Additional User Testing on Engagement: Conducting additional user testing focused specifically on user engagement can provide valuable insights into how users interact with the application's features and content. This feedback can inform design and functionality improvements to foster increased engagement and retention.
2.
Integration with Other Story Lab Projects: Exploring integration opportunities with related Story Lab projects, such as digital mapping initiatives, carbon emission tracking, and podcasts, can create a more comprehensive and interconnected experience for users, expanding the breadth and depth of content available within the application.
3.
Content Modules from Story Lab: Incorporating additional content modules developed by the Story Lab, such as interactive historical timelines and educational quizzes, can further enhance the application's educational value and provide users with a more immersive and informative experience.
Meet the Team
Our team, composed of developers and UX designers, practiced Agile methodology throughout the project. We conducted sprints, self-organized, and utilized Scrum ceremonies such as sprint reviews and retrospectives. By working Agile, we were able to clear roadblocks efficiently and achieve our project goals.
​
We had the opportunity to present our project at the UMSI Expo, where we received positive feedback and constructive praise, further validating our efforts and dedication.
Haoyue Wen, Ziyan Zhou, Prarthana Shevatekar, Ceciel Zhong, Xinran Cao, Leo Yeh