Progeny
A website that connects distanced family members through virtual storytime.
Overview
Project Brief
This project was completed as a part of the Codeup Full Stack Web Development program. Progeny is a full-stack web application that allows users to create and save recordings of children’s stories to be played for their kids and grandkids. It uses Java with a SpringBoot framework. This project saves the stories in a MySQL database and implements many different APIs to offer a high-quality user experience.
The Challenge
During the last few weeks of the course, you’ll work in a group of 3-4 developers to build a full-stack web application from the ground up. In addition to building the application, you’ll also compile a presentation for Developer Day, a public event organized by Codeup staff to help you network with employers and community members.
The Problem
During a time of distancing, it has become apparent that virtual communication between family members is crucial to maintaining our healthy relationships.
The Goal
The progeny application would allow distanced family to record audio bites of themself reading a story to their child/grandchild, which can then be played/downloaded by their connections to be used during storytime. Distanced family would include relatives, deployed military parents, divorced parents, and parents who travel long distances for work trips. The application will also provide certified storytellers the opportunity to read stories to the progeny communities — think reading rainbow.
My Team
My team members included,
My Role
My Front End Developer role collaborated with other developers to conduct create style guidelines, sketch wireframes, build a full-stack web application, and present website to key stakeholders.
My role responsibilities included,
Logo Design
Book Mockups
User Personas
Color palette
Typography
Low-fidelity Wireframes
Wireflow
Connection Between Users Development
Home Page Development
Library Page Development
Account Details Development
Website Deployment
Research / Observe
Stage One - Empathize
Identifying Competitors
We identified some direct and indirect competitors to study how they approach the topic of virtual storytime. This research was conducted through numerous google searches that utilized various keywords related to our problem. We tried to search for these sights as a parent would search for a solution to this particular problem.
For this search we used keywords such as,
Children
Audio
Family
Storytime
Bedtime
Listen
Record
Key Findings
My Storytime, a direct competitor, allows its families to pre-record stories from anywhere, and play them back with the Google Assistant.
My Moonlight, an indirect competitor, combines traditional storybooks with modern technology — HD projections, sound effects, read-a-long features and more.
Hypothesize
Stage Two - Define
Hypothesis
We believed that creating a web application that enabled distanced family members to share their audio recordings with loved ones or publicly to others registered on the site and allow for the ability to maintain downloadable files of elder stories, terminally ill family member readings, etc. would give families the opportunity to build/maintain bonds during the COVID-19 pandemic.
Persona Hypothesis
Based on our collective experiences I set up two user personas. We referred to them throughout the entire product development process.
These personas defined two audience segments — adult family members and professional storytellers.
User Stories
For our user stories, we had three different user roles that we kept in mind when developing to ensure we built the site with features that served the users desired outcome. We used the template,
As a (who wants to accomplish something)
I want to (what they want to accomplish)
So that (why they want to accomplish that thing)
These are the user stories we used to guide our sites functionality,
Unregistered User (Visitor)
As a visitor, I would like to view a list of public stories as well as listen to public stories so that I can see what stories are available before I sign up.
As a visitor, I would like to create a private account so I can record private audio bytes for my kids and share them with friends and family.
As a visitor, when I complete the registration form I expect/want to be told that I have successfully registered and be directed to a welcome screen (my profile).
Registered User
As a user when I click on the forgot my password link I expect/want the ability to fill out my email address and have a password reset email sent to me that allows me to reset my password.
As a user I would like to navigate to my profile from any page by clicking a link in the navigation bar.
As a user I would like to listen to my own recordings and view my connections recordings
As a user I would like to delete my own recordings if I so choose to
As a user I would like to receive notifications that I received a new story sent to me
As a user I would like to search for different users and family members to connect with and send a request to be a connection
As a user I would like to confirm or deny connections request so that I can filter who friends me
As a user I would like to view a list of all my connections
As a user I would like to remove a connection
As a user I would like to view my account information
As a user I would like to update my account information
As a user I would like to delete my account
As a user I would like to sign out of our account
Admin
As an admin I would like to delete users
As an admin I would like to add stories to the story catalog
As an admin I would like to view a list of all users
As an admin I would like to delete a book from the catalog
As an admin I would like to see a list of all books currently in the catalog
Database Design
This was a critical step in our process as it defined how the backend portion of our web application would operate. The design for our database when through dozen of reviews and iterations before we finalized it.
The most difficult part was nailing down how we were going to connect user accounts to one another.
Ideate
Stage Three - Ideate
Wireframes
As we progressed in our process, I created the low-fidelity wireframes using wireframe.cc. These wireframes informed each page layout as we developed the website.
Wireflow
The use of a wireflow helped the team understand user interactions as it is a combination of a user flowchart and wireframes. These wireflows also increased our collaboration as everyone understood the ideal flow of user interactions throughout the site. We referred back to this flow on numerous occasions to check our work.
Implement
Stage four - Test
Result
The final web application was completed within our timeframe. We opted to save some features for future development due to the tight schedule.
To present the web application to our live virtual audience, we created a video recording of our introductions and segmented our demonstration video by various user stories objectives. These video clips were then processed by Codeup staff and presented to a live virtual audience via Zoom.
You can view the website we developed by clicking here.
You can view our presentation video on Youtube by clicking here.
What I learned from this project
My biggest fear during this project was that our team was too small for the task at hand. However, our use of the Kanban method helped us organize and stay on top of deadlines — reducing the amount of delays and confusion.
Two major problems we faced were developing this project virtually and finding a good EPUB reader API. We overcame the virtual aspect with continuous zoom calls and slack messaging. The EPUB reader API took some trial and error. The first version we tried was in japanese. The Google page translation helped a tad but we ran too close to our deadline trying to figure this out and went with an alternate plan b embedded iframe EPUB reader.
