Pangolino Mobile Design System
Client:
Wildlife Conservation Network
Team:
2 Engineers
1 Product Manager
Timeline:
September - October ‘21
My Role
I was the sole designer, creating a preliminary design system and collaborating with other teams to align on project outcomes.
I learned a lot about how to balance user and client expectations, along with the importance of design advocacy throughout this project.
The Challenge
According to the United Nations in 2019, over 1 million species are facing extinction due to human activity.
The Wildlife Conservation Network (WCN) has gathered resources to launch Pangolino, a science communication project inspired by research on pangolins in Nigeria; the initiative aims to raise awareness of their plight, funds for their conservation and foster public engagement.
The project started as a collaboration with Develop for Good, a non-profit tech organization that tasked the team with creating a mobile-first website for a global audience.
Pangolins are scaly mammals found in parts of Africa and Asia, they are harvested excessively for their traditional medicine, jewelry and cuisine.
OBJECTIVES
01
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
02
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
03
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
PROJECT APPROACH
Notable Constraints
Engineering
It was noted that they had limited experience with web design, and mentioned that a simplistic, information-first mindset would be a helpful starting point.
Information-First Approach
The team’s Product Manager identified the importance of informing users about the organization’s mission and facilitating public involvement; we were instructed by the client not to design with the intention of pushing for donations from users.
Limited Information & Time
The point of contact for this project had a substantial list of asks for the final product, such as: an events page, web shop, art gallery, a scientific publication page, a news page and social media strategy. The project had a new rotation every 5 weeks, so creating a strong foundation for future teams was the most realistic goal.
Exploring Solutions
Design Sprint
Following a Design Sprint process, which would be complicated due to time zone differences and general time constraints for each team member who was volunteering their time as a busy college student. There would also need to be time allotted for designing upfront, which I knew would be tedious.
Design Thinking or Jobs To Be Done
These methods are used to account for critical unknowns. An old mentor once told me that a lot of junior designers apply process for the sake of process, with little to no regard of what information they actually need. I kept that in mind when crossing these frameworks off the list.
Design System
Building a design system; the idea had been on my radar after listening to the Design Better Podcast. I eventually learned more from the Nielsen Norman Group and Figma Blog to get a better understanding of their potential as well. Confirming the design system approach required buy-in from the entire team, so I did significant research to understand its impact on how they help with iterations and consistent products before meeting with them.
LEARNING ABOUT DESIGN SYSTEMS
After convincing everyone that a design system would allow for faster iterations, cleaner code and enable cross-functional alignment, I started researching the concrete steps to make our own:
Essential Elements
Focusing on how each element of a design system comes together and how to make key decisions on each one. This included fonts, type scale, spacing, color palettes, modals and cards.
The The UI Prep Syllabus on Design Systems curated by Jake Tsacudakis was an important reference point for me, along with Brad Frost’s Atomic Design, an E-book that explains the philosophy of viewing systems as a series of atoms that come together to make more complicated structures that allow us to make webpages easily.
Notable Systems
Dissecting systems from popular companies that demonstrated some of the best practices that I read about was very helpful in understanding the transition from components to a webpage:
Atlassian Design System
Uber Design System
Material Design System
Mailchimp Design System
Salesforce Design System
CREATION
Fonts
There is no right or wrong way to start a design system, but some ways are more effective than others. Text is the fundamental building block of any webpage, so I started by using the following criteria to determine the best fonts:
Those that have a history of trustability, readability and familiarity on mobile.
Google fonts that will optimize load times for users with a slow connection.
Fonts that are versatile and open, versatile and would support a friendly tone
Type Scale
The next step was determining a type scale, a general set of rules for font sizes that were in my case, rounded to values that would best fit a grid system. Using Typescale.com to experiment with a few options, I picked 16px as my base font size, a common practice for mobile design, and used a 1.2x multiplier to ensure that each size would sit comfortably on a small screen:
Spacing
I did some online research to determine best practices regarding gutters, margins and other general spacing tips for mobile design. I chose a 16px margin and 4 column layout, which are a flexible combination that would allow future teams to organize content in an interesting way.
Color Palette
I created a color palette that was inspired by the client’s preference of primary green along with complementary colors. I made it a point to add neutral and semantic options to account for changes in state, which is an important consideration for when forms and fields are introduced. I also extended the primary palette so future teams can design with more variation.
Buttons, Fields & States
I created several components based on the client ask and core elements that were necessary for a user to submit or interact with information. I constantly revisited this step after user research and while building an example homepage later on.
Icon Library
I aimed to incorporate icons that were simple, consistent & easily recognizable for modern web users. I adopted them from Material UI, an open-source design library created by Google. From my research, other designers and developers mentioned that it’s best for teams that have yet to build a design inventory, and would look like a native experience for the estimated 70% of mobile users who own Androids:
USER RESEARCH
After creating the foundation for the design system, I aimed to learn more about potential users to inform future design decisions. According to Collegefactual.com, Rutgers University New Brunswick was ranked 25th out of 1,279 popular US colleges and universities for international students.
By learning about international students aged 18 - 26 who were involved with mission-driven organizations, my hypothesis was that it would be representative of the larger global audience that I was designing for.
User Surveys
I started by contacting leaders at organizations on campus like the Wildlife Society, The Society of Animal Science and Students for Environmental Awareness. I made it a point to mention that I was looking for international students in case they had any personal connections. They forwarded a survey to several hundred respondents with a few of the following questions:
Where are you from in the world?
What types of non-profit causes motivate you to take action?
Do you follow any non-profits online? What kind of content keeps you coming back?
What information do you want to know before actively supporting a non-profit?
How do you like to get involved (donating, volunteering, content sharing)?
User Interviews
I followed up with 2 international and 1 domestic respondent to schedule 20-30 minute interviews over Discord. I used a semi-structured approach in order to build rapport with interviewees quickly and get preliminary information in the short amount of time that I had. We discussed information regarding social media content, building trust with new brands and what modern non-profits need to do in order to keep people interested.
RESEARCH RESULTS
There were 17 respondents, 6 of which were international students. I took into consideration responses of students who were from the US, but had a strong preference to expand my understanding of the potential global audience.
01
Social Support
Both domestic and international students were supportive of various causes, but did not donate. Only 2 respondents, both who were native to the US, mentioned that they donate on a consistent basis to any cause. This was in line with the client’s information-first mentality.
02
Transparency & Engagement
International students had a stronger preference for transparency than domestic students. Examples like blog posts, partners or a monthly newsletter are important. 4 out of 6 international students mentioned that it’s a core element that they look for.
03
Knowledge Gaps
12 domestic and no international respondents were aware of what a pangolin was, where they are located or why they are facing extinction. Answering these questions on the homepage became apparent at a time when I was overthinking a lot of other information.
Before creating a handful of cards, I sketched a few options for what they might look on an example homepage. I tried not to marry any of these ideas because they would be changed by future teams. These sketches inspired what modals and other elements would look like. By creating these designs upfront, piecing the website together would be much faster:
Wireframing
EXAMPLE HOMEPAGE
Design Considerations
Examined popular non-profit websites like WWF and International Animal Rescue for general design patterns
Added a language icon to accommodate the global audience
Figma components were created for cards and each element so future teams can make quick changes
Did not have time to build additional pages such as About Us, Community Artwork and Recent Stories
I also created a shared folder with necessary documentation regarding design systems so future teams can spend less time pushing pixels
REFLECTION
Key Takeaways
The importance of design advocacy across different teams
How to manage and optimize my workflow Figma
Creating a shared pool of resources and documentation has long term value for teams that have evolving needs
If I Had More Time
I’d create a semi-functional prototype for further testing
I’d encourage team members to participate in more of the design process, like the research synthesis or wireframing phases. Getting other disciplines involved allows others to see what kinds of opportunities they can collaborate with us on. Unfortunately, I didn’t have enough time to run and schedule sessions to explore these topics.