The Melanin Village Part 1:
Creating a design system and choosing a platform to host the app
The Melanin Village is the growth-centered gathering space that provides curriculum and community for Black and Brown homeschoolers.
In the phase I joined, the client wanted to consolidate the community and curriculum platforms to simplify the administrative side of The Melanin Village. Also, the client planned to launch a native app and needed support in design and research to hand off to Singular, an outside consulting company
In the previous phase, a platform had been recommended and the teams had developed a style guide.
Plan for phase 2 of The Melanin Village Project
Roadmap for phase 2 of The Melanin Village project for Project Management, Project Strategy, UX Design, UX Research, & UX Writing Teams
Phase 2 timeline
-
6 weeks
-
2 sprints
Roadmap for UX Design in phase 2 of The Melanin Village project
Deliverables
-
Finalizing the platform
-
Phase 1 style guide audit
-
The Melanin Village website audit
-
Revised style guide
-
Pattern library
My role
-
UX/UI Design Apprentice
-
Member of a 6-person design team including 2 co-leads
-
Collaborated with UX Research, UX Writing, Project Strategy, & Project Management teams
Users
-
Parents homeschooling their kids
-
The Melanin Village administrators
Homeschooling families from The Melanin Village website
Early challenges
Because of the phase system at Tech Fleet, the client was frustrated by the time it took to accomplish tasks. She hired an outside agency, Singular, to develop her native app.
It was incredibly important that the teams proved our value to the client so that Tech Fleet could continue working on The Melanin Village!
Also, in the beginning, we struggled to identify our goals for UX Design because decisions, like which platform we would be using, had not been finalized in the previous phase.
Setting goals in sprint 1
In the first sprint, once we prioritized the project needs, the UX Design team provided support to other teams and completing the following deliverables:
-
Choosing the platform
-
Review of previous phase's style guide
-
Looking for opportunities for improvement on The Melanin Village's website
Tech Stack Decision Maker used to evaluate platform's available features with FlutterFlow circled
Choosing a platform
The UX Design team aided Project Strategy by analyzing the Hivebrite, Circle.so, FlutterFlow, Bubble.io, and Disciple Media platforms for required design features and entering them into the Tech Stack Decision Maker.
Based on this analysis, FlutterFlow surpassed its competitors in available features and was chosen for this project.
Audit of phase 1's style guide
Review of previous phase's style guide
The UX Design team audited the style guide that phase 1 completed to see what needed to be added or revised.
-
The style guide did not have the correct colors chosen by the client
-
The guide lacked reference to sizing, padding, spacing, and breakpoints
-
The type and spacing of the buttons were inconsistent, (all caps, sentence casing, etc)
-
Icons had inconsistent line weight
-
Typography needed guidelines for use
-
Cards had inconsistent spacing, padding, and layout
-
Rules for components like form fields, search, and navigation were missing from phase 1's style guide
Looking for opportunities for improvement on The Melanin Village's website
We reviewed the components on The Melanin Village's website.
-
The site was not fully responsive for all screen sizes
-
The navigation buttons were different shapes and sizes depending on the screen
-
Some of the links were not functional
-
Cards had uneven spacing, padding, and hierarchy
-
The first form field was filled, users have to delete text to enter info; it was not placeholder text
-
Form layout looked good, but spacing needed to be rebalanced
-
6 different typefaces were used throughout the site
Reviewing The Melanin Village components & auditing the site's usability
Designing in sprint 2
With the FlutterFlow platform chosen and the style guide and website audits complete, the UX Design team worked on the following deliverables:
-
Style guide
-
Pattern library
Improving the style guide by making it more comprehensive
The UX Design team fully developed the style guide based on phase 1's foundation. See key details below and view the complete style guide here.
Color palette chosen by client in phase 1
Color palette developed in phase 2 from original palette
Expanding the color palette
A brown, green, and neutral color palette was developed in the previous phase and approved by the client.
We expanded the palette to include tones, greys, and service colors because we needed options for designing.
We also advised use cases to provide guidelines for how the color would be applied throughout The Melanin Village.
Logo, symbol, & wordmark for The Melanin Village on a light ground
Defining rules for the brand logo
The Melanin Village already had a logo. In this phase we established guidelines for:
-
Color on light and dark ground
-
Spacing
-
Sizing
-
Padding
-
Wordmark
Typography styles chosen by phase 1
Typography typescale for mobile
When & where to use the site's typography styles
The typefaces Playfair Display and Montserrat were chosen in the previous phase because of their readability, professionalism. and friendliness.
We created guidelines for use, focusing on mobile since the client wants to create a native app.
Also in the style guide, we created rules for buttons, breakpoints, cards, form fields, iconography, & imagery.
See quick summaries below and view the complete style guide here.
Creating components for the The Melanin Village's pattern library
After auditing The Melanin Village website and developing the style guide, we worked to create components for the initial pattern library.
We used Ant Design Mobile as the foundation for the components in our pattern library and modified them to follow our style guide.
View the full pattern library here.
Wrap up & lessons learned
Because we were able to complete the style guide and the initial pattern library, we saved the client $4,380 that she would have had to spend if Singular, the outside consultant, created them for her!
Thanks to the hard work from our teams, we were able to convince the client to continue working with Tech Fleet in future phases.
This project taught me a lot about flexibility and being able to quickly pivot when the scope of the project changes. The UX Design team began the phase unsure of our goals and how to achieve them.
While UX Design did not have concrete tasks in sprint 1, we were able to support Project Strategy in evaluating design features to decide on the right platform for The Melanin Village. In sprint 2, the last 3 weeks of the project, the UX Design team quickly pulled together to complete the style guide and pattern library.
I am very proud to have worked on this phase of The Melanin Village because I believe that the teams really worked well together in facing challenges, problem-solving, and adapting to changes in a client's vision.
Check out The Melanin Village Part 2 to see how the work continued!
