The Melanin Village Part 2:
Designing the social features of the homeschooling community's native app
The Melanin Village is the growth-centered gathering space that provides curriculum and community for Black and Brown homeschoolers.
​
In this phase of the Tech Fleet project, my team was tasked with designing the social feed, chat, group, and event user flows for the client's new cross platform native mobile app.
​
Scroll down to see the case study or view the clickable prototype here.
Money saved
We saved the client $10,319 by designing 124 wireframes for 13 user stories and updating the design system.
If you'd like a sneak peak at the prototype...
Check out this recording of the demo I did for the final presentation to the client.
Roadmap for this phase of The Melanin Village project
UX Design Team 2 roadmap for The Melanin Village project
Timeline
-
8 weeks
-
4 sprints
Deliverables
-
Sitemap
-
User journey maps
-
13 user stories
-
9 high-priority​
-
1 medium-priority
-
3 low-priority
-
-
6 user flows with 124 medium-fidelity wireframes
-
Updated design system
-
1 minimum viable product (MVP)
My role
-
UX/UI Design co-lead
-
Co-led a team of 4 apprentices
-
Collaborated with UX Writing, Project Strategy, & Project Management teams
Users
-
Parents homeschooling their kids
-
The Melanin Village administrators
Homeschooling families from The Melanin Village website
Early pivots
This phase began with multiple teams, including an outside consultant (Singular), scheduled to work on the same aspects of the app. In order to move forward, we had to negotiate and decide how best to organize our time and resources.
​
We came to this arrangement:
-
UX Design team 1 (UXD1)- onboarding, profile, and notifications
-
UX Design team 2 (UXD2, my team)- social feed, chats, groups, and events
-
Singular (the outside consultant)- student information system and curriculum
​
Also, we struggled early on to organize meetings with Singular. Once, we established regular communication, our collaboration went much smoother!
​
Strategizing the phase
Collaborating with Project Strategy
The Project Strategy team created a backlog of the user stories for the app.
​
My co-lead and I worked with the Strategy co-leads to decide which high-priority user stories to work on first and what needed to be in the minimum-viable product (MVP).
​
To fulfill the community needs of the app, we chose to prioritize the social feed and direct messaging features followed by groups and events.
UX Design team 2's user story backlog
Developing the sitemap
The 4 UX Design co-leads worked together to develop a sitemap.
​
Deciding on the architecture of the app allowed us to better understand how the pages would connect and interact.
The Melanin Village's sitemap
Looking for areas of improvement and inspiration
Evaluating the previous community feed search for areas of improvement
Some areas for improvement:
-
Navigation and the layout of the pages was unclear or not intuitive
-
Some links did not work
-
Content was text heavy with no clear hierarchy
-
Some pages were inaccessible​
The UX Design team 2's affinity map of The Mighty Network's usability issues
Inspiration for the social feed and messaging
My co-Lead and I asked our team to conduct a competitive analysis of other sites' social feeds and direct messaging looking for inspiration.
​
We looked at Facebook, Slack, Whatsapp, LinkedIn, Instagram, Discord, Peanut, and NextDoor.
Post
Users can write text, add photos, tag people, etc. when creating a post.
Feed
Chats
Users have many options when starting or continuing a private chat.
On Facebook, the navigation is at the top of the feed.
Looking for pain points in the user's journey
Researching social platforms helped us find common design patterns and to prepare for ideation.
We created user journey maps, like this one for creating a post in the feed, so that we could better understand the steps a user would need to take to accomplish a task.
User journey map of creating a post on a social feed
Time to start brainstorming
Once we understood the user's journey, my team did Crazy 8's, quick sketches of screens.
These sketches were for this user story:
-
As a user, I want to be able to write a post to share with the community and friends.
Sketches of the creating a post user flow with annotations
Designing the app's user flows
After research and ideation, I worked with my team to establish the following user flows for the app:
-
Reacting to a post
-
Creating a post
-
Chatting with other Sisters
-
Joining Sister Circles
-
Finding an event to attend
-
Buying tickets for events
​
Check out some examples below!
01
Creating a post
As a user, I want to be able to write a post to share with the community and friends
User flow showing how someone would create a post
02
Chatting with other Sisters
As a Sister, I want to be able to connect one-on-one with other users so that I can be friends with them and send them direct messages.
User flow showing how someone would chat with other Sisters
03
Joining Sister Circles
As a Sister, I want to be able to search for groups based on my interests or needs, so that I can join and connect with others who share similar goals or challenges.
User flow showing how someone would search for and join groups
Designing the screens
Once the user flows were established, our team divided into groupsto work on low-fidelity wireframes.
​
We used Figma wireframe templates to design our screens. This allowed us to move quickly!
Creating the home feed
As groups, we designed options for the feed, our main screen, and then voted on elements we wanted to include:
​
-
Tab navigation at the top
-
Write a post
-
Read other posts
-
React to posts
-
Comment on posts
-
Save posts
-
Bottom navigation to access the rest of the app
Option 2
Final layout
Option 1
The original app had tab navigation in the feed which we chose to keep so that design pattern would be recognizable.
Users, called "Sisters," can write a post at the top of the feed or by clicking in the bottom navigation bar, similar to other social apps, reducing cognitive load.
Reacting to, commenting on, and saving posts in the feed
Using a Figma template, we designed screens allowing interaction with posts.
Viewing comments
Saved posts page
Reacting to a post
Sisters can view comments from other members, react to the comments, and write their own.
Sisters can find posts that they have saved under the "Saved posts" tab
Similar to LinkedIn and Facebook, we wanted the Sisters to have a variety of options when reacting to a post, not just "liking."
Creating a post
Sisters can write text, share photos, add their location, tag other Sisters, etc.
Adding photos, etc
Post options
Creating a post
Before posting to the feed, Sisters will see all of the options they have filled in.
When Sisters tap the kabob (ellipses), they will see these options to share, edit, etc their post.
When Sisters first click on the post button, they will see these options to write a post, add photos, etc before posting to the feed.
Chatting with other members
Sisters can search their chats, click on an existing chat or start a new one.
Chatting
Adding photos
Viewing chats
When Sisters click to see their chats, they will see a list of their conversations and have the option to search or start a new chat with a member.
Sisters can also upload a photo to send in the chat.
Sisters can view an individual chat and send a response.
Searching for and joining groups
Under the Groups tab on the main feed, Sisters have options to view groups.
Filtering groups
Group page
Suggested groups
Sisters can choose from the menu:
-
Suggested groups
-
Your groups
-
All groups
-
Requested groups
Sisters can view a group's page and decide whether they would like to join.
Sisters can filter their search for groups based on location, interests, or their child's grade level
Attending community events
Under Events, a Sister can view her tickets for or search for new events!
Event page
Ticket
Your events
The tab navigation is the same design pattern that is used on the feed page.
Once a ticket has been purchased, a Sister can view it by clicking on the event or the kabob.
On a specific event page, Sisters can learn about the event and purchase tickets.
Client feedback and collaboration with the UX Writing team
Once we had the low-fidelity wireframes ready, we presented them to the client and the UX Writing team.
​
Some initial call-outs were:
-
The client decided that there would not be any friend requests. Everyone in the app would be connected, so "Friends" became "Members"
-
UX Writing asked us to change "Groups" to "Circles" and "Sister Circles" to fit into The Melanin Village's naming system
Before moving on to
medium-fidelity wireframes...
We needed to update our design system! We created and revised many components once we had completed our low-fidelity wireframes.
Components for communication in the app
List components
Modal components
Components for the tab menu
Creating the medium-fidelity wireframes & prototype
Our design system was updated, feedback was implemented, we made tweaks and changes, and arrived at the final designs.
​
Here is a small sample of the 124 wireframes we created for 6 user flows.
​
Check out the prototype below!
Mockups of the medium-fidelity wireframes
The clickable Figma prototype of the social aspects of The Melanin Village's app
Behold! UXD2's MVP medium-fidelity prototype of the social aspects of The Melanin Village app. Or, click here to view the prototype in another screen.
Clickable prototype of The Melanin Village app
Wrap up & lessons learned on during this phase of The Melanin Village project
I am so proud of what my team accomplished! Through a lot of hard work and determination, we designed 6 flows for the social feed, direct messaging, groups, and events.
Overall, Tech Fleet's UX Design teams completed 13 user stories, including all of the high-priority stories in the backlog and, we saved the client $10,319!
The client called this Tech Fleet's "strongest phase yet!"
​
During this phase, it became even more apparent to me how important cross-functional collaboration is! I worked very closely with the leads UX Design team 1, UX Writing, and Project Strategy to make sure that we were all working towards the same goal each sprint.
While I won't be continuing on in the next phase, I look forward to seeing how The Melanin Village app continues to develop and I can't wait to see the final product!
