Words Alive Family Literacy App
A mobile application that makes reading materials accessible to non-native English-speaking families. In addition, a web application tool that supports the mobile app by allowing the volunteers at Words Alive to upload content and engage with their community.
Duration: October 2020 - March 2021
Client: Words Alive (Non-profit Organization)
My role: UX/UI Designer + Client Outreach
Team: Rickie Chen (me), Kenny Tran, Andrew Caballero
App Store download: https://apps.apple.com/us/app/lets-read-with-words-alive/id1569734037
Google Play Store download: https://play.google.com/store/apps/details?id=org.wordsalive.letsread
Background
Words Alive is a non-profit organization based in the San Diego area. Prior to the pandemic, they provided free reading resources to underprivileged, non-native English-speaking families in the San Diego area. They do so by providing families with physical copies of books & activities, as well as holding "read aloud" events in more than 100+ classrooms every week. However, due to restrictions caused by COVID-19, they have not been able to hold in-person events and provide at-risk families with adequate resources. From there, we deduced a problem statement that encapsulates the issue we are trying to solve:
To address this problem, I worked on a team with 2 other designers, 7 developers, and a product manager who attempted to solve this problem by developing a user-friendly mobile application and also a backend tool for the volunteers at Words Alive to support the mobile application.
Solution
Mobile App
I worked extensively with the representatives at Words Alive to come up with an application that could provide the outreach they wanted and also be intuitive enough for families to use. With this in mind, I came up with three user goals that we should reference throughout the design process:
1. Help non-native English-speaking parents and children access the resources Words Alive provides and digitize their pre-pandemic reading materials into an easily accessible online format.
2. Allow direct communication between volunteers and parents through the app to alleviate any questions or concerns with this new medium.
3. Keep families up to date with news and events happening at Words Alive through a notification feature.
User Flow
Before design iterations, I created a user flow that encompasses the user's journey with our mobile app. This included the onboarding process, the core features, and support screens that truly tell the story of the user's experience of our app.
Wireframe
From the user's journey, we started to do some preliminary sketches based on the core features we think are relevant to the app's user goal. These sketches offer us basic ideas of the core elements that will be featured on each page and give us an idea of the layout. Some of the feature lists include:
• Seamless log-in and sign-up process.
• Home page that displays the book catalogs & videos.
• Live chat tab with volunteers at Words Alive.
• Notification system that promotes events and new books.
• Profile page that allows for more involvement with the NPO, such as donation and sharing.
• Save books
Lo-Fidelity Design
After sketching out the wireframes, I translated key screens from the sketches to tangible prototypes so we could do some rough user testing with clients and fellow designers. From the testing, I got some insightful feedback that gave us a better idea of the hierarchical display.
Mobile App High Fidelity Design + Prototype
With our high-fidelity designs, we transitioned our lo-fi iteration based on the feedback we got from our user testing and crafted high-fidelity screens that match the Words Alive branding.
Feature 1: Log-in/Sign up
Intuitive log-in and sign-up process for targeted users. Have the check box that allows families who sign up to indicate they are located in the SD area per Words Alive's request. Allow quick sign-in through Google or Apple accounts.
Feature 2: Home Page
Home page layout with scrollable welcome videos on the top of the screen. Sort books by new releases, popular books, and all books. Filter feature that sorts through different language options.
Feature 3: Book Page
The book content page features the read, explore, and learn tab filled with different subsequent activities to do after the read-aloud session. There is also a toggle feature that allows families to switch between different languages with ease. The save book feature allows users to save the book on their profile page.
Feature 4: Chat Screen
The live chat feature allows families to directly ask questions or voice their concerns with a volunteer in real-time. If there is no volunteer on call, there is also a tab that indicates all of the contact information at Words Alive.
Feature 5: Profile Screen
Allows users to customize their experience with the saved books feature and customizable language preferences. Allows users to contribute more to the cause with a more info section that details ways to donate, how to become a volunteer, and sharing options for different social media.
The mobile app was well received by both the client who appreciated the simplicity and the product manager who worked closely with us to determine what is feasible and what is not. From there, we were done with the design for the consumer interface and now we shifted our focus to volunteers...
Full Mobile App Design Prototype
Web Tool
Alongside the mobile app, the volunteers at Words Alive needed a backend tool that allows them to support and facilitate community engagement on the app. There were multiple volunteer roles at Words Alive, with some having permission for more features than others. I worked closely with the client to determine to user goals of the backend interface:
1. Upload and edit reading materials onto the app.
2. Reply to family's questions with the live chat feature.
3. Send push notifications on events and books.
4. Review and track analytics on books.
Mindmap
This was a pretty ambitious interface, so to collect our thoughts on the features that the client was asking for, I approached this project with a mindmap that aggregates all of our ideas for the features list and display them in a hierarchical structure. The goal of the mindmap was to showcase connections between the different features.
User Flow
From the brainstorming, we streamlined the main features into a user flow to depict what the users will see on each page. It is a rough blueprint as to what will be the core features of our interface and gives us a sense of direction for the design. The core features we deem necessary to support the mobile app were:
• Communication tab with live chat response.
• Analytics page that tracks how different books are doing.
• Upload books tab that allows markdown integration.
• Manage tab that allows admin to grant certain permissions to volunteers.
Mid-Fidelity Prototype
Similar to the mobile app, we translated the basic wireframe blueprint of our interface into mock-up prototypes that are tangible so we can get direct feedback from the client before diving into high fidelity. We had client design iteration meetings each week where I demoed functionalities of specific features and continued to iterate based on the feedback I got from each meeting. Below are all the main features that were designed and tested during the lo-fidelity stage:
Web Tool High Fidelity Design + Prototype
After weeks of testing and iterations with the client, we were ready to move on to the high-fidelity stage of our product. During this stage, we really honed in on the feasibility of our features with our product manager and made sure that we were designing with a purpose.
Feature 1: Log-in Authentication
Volunteers need to verify their identity through log-in credentials that were provided to them by the admin. There is no signup process because this is a backend tool only for people that the Words Alive management approves. Therefore, the account creation process is solely accessible by the admin through the manage tab and it's their responsibility to distribute the log-in credentials to new volunteers.
Feature 2: Live Chat
To support the live chat feature, Words Alive will designate volunteers on shift to answer any questions or concerns the families may have. The chat system is designed to be on a rolling basis, the volunteers can toggle between different users. After the questions have been answered, the volunteer may resolve the conversation with the resolve button in the top right corner and the chat will be archived in the volunteer's chat history.
Feature 3: Book Analytics
Words Alive would like to track how new books are doing and the overall trends of their catalog with users of the app. The analytics tab visualizes the total users of the app over time, the recent releases of books, and monthly performances.
Feature 4: Push Notification
One use case the client deems to be important is pushing a notification to users of the app based on app analytics. If a volunteer sees that a recent release isn't getting much traction, they can promote it by sending out a notification. Volunteers can also promote events and anything else they want with the other fields.
Feature 5: Book Library
This feature allows volunteers to go through the catalog of books they have already uploaded to the app. They can sort through different language versions with the filter tool. They can search for books, as well as delete and edit.
Feature 6: Upload Book
The upload book process was the most important feature of the backend interface, it directly feeds content to the app so it is very important that this whole process was intuitive. There are 3 main sections of the material, with it being Read, Learn, and Explore. A few challenges I had to overcome were streamlining the user flow by adding multiple language versions of the same book and customizing each section of the reading material with text & pictures.
I incorporated an API for a mark-down output editor into the design that allows volunteers to freely layout pictures integrated with a different text title, subtext, and heading.
Feature 7: Manage Volunteer Accounts
Finally, the manage tab allows the admin of Words Alive to delete, add, or edit permissions of all the volunteer accounts. There are layered permissions within this backend interface, some volunteers are only designated to live chat, and others are only allowed to upload content. Therefore, it is imperative that there are different permission settings for different roles. Admins are also able to view the chat history of volunteers when clicking on their specific accounts.
Communication with developers
Since we were operating within a full-stack team, communication was vital when it came to accessing what was feasible and what was not. The designers were the bridge between the client and the rest of the team. After the design was finished, we made sure the developers had all the correct assets and tools to implement these interfaces and also fit the already established brand guidelines of Words Alive.
Web Tool Style Guide
Mobile App Style Guide
I also had to account for the spacing and layout of the interface, therefore I created a detailed documentation guide specifically for developers. In these guides, they will be able to find instructions for spacing, asset usage, and iconographies.
Full Web Tool Prototype
Community Impact
Award
This project was very exciting for me because we were addressing problems that a real organization and demographic faced in my community. I found a great sense of fulfillment to be able to make a tangible and lasting impact on an actual cause. Furthermore, our team of designers and developers was extremely proud to be named Words Alive Service Partner of the Year.
Reactions
Here is an amazing reaction we got for the app! It is messages like these that make me want to pursue a career in design.
Available for download now!
Words Alive is available for download both in the Apple and Google Play store. It is really a surreal feeling to see through a project from end to end and have it be available for the public to enjoy.
In Conclusion...
Reflecting back on this project, I am extremely proud of everyone's hard work and dedication to this important cause. This project gave me great insight into what it's like to be working with real clients and on a full-stack team. Creating an end-to-end product with both front and backend interfaces was definitely one of the most ambitious projects I have taken on.
Some key takeaways include:
• Communication is extremely important when working with clients and a full-stack team.
• Take feasibility into account during design.
• Know your user demographic and design for them.
• Planning and iterating are extremely important.
What would I have done differently?
Looking back at this project, this was an extensive design process that went smoothly for the most part. If I had more time with this project, I would:
• Conduct additional user testing with more stakeholders of the interfaces.
• Market research and competitive analysis on similar existing products.
