Give and Grow is a community interest company dedicated to helping students who are unable to afford full-price tutoring sessions, but are also ineligible for financial support from traditional aid systems.
Details
Scope
Founding volunteer
Creator of design system and branding
Full-site development from scratch
Role
Research
UX & UI design
Copywriting
Graphic Design
Web Development
Tools
Figma
Figjam
VSCode
HTML
CSS
Nunjucks
Adobe Photoshop
Adobe Illustrator
Impact
Completed Screens
The site launched on 16/08/24.
Give and Grow is still in it’s early stages as a CIC and has not yet fully launched as a program to the public. Thanks to the website, they have successfully recruited a Safeguarding officer.
Give and Grow continues to seek tutors and other volunteers to help it’s running. Please visit the website, or contact Eva Mamphilly for more details.
Challenges
I came into this CIC at its earliest stages and had to be prepared for big changes throughout the process. The structure of the site, its funding structure and its members would all change during my time working on it.
Initial wireframes showed a news section, which had to be removed for the site launch as we had no news to share yet and no blog-writer on board. The idea of including LinkedIn embeds was floated, but not within the scope of the official LinkedIn API that we had access to. We also lost our social media writer during this time.
The news section was switched out for an Open Roles section, as we thought it would be more appropriate to highlight the fact that we were actively recruiting.
Initial Designs
I initially met founder Eva Mamphilly via Zoom, where we discussed the purpose of the site and some potential visuals. Eva passed on a moodboard and web structure to me and I got to work on some basic layouts.
![]()
Based on the initial moodboard, I created a higher fidelity version of the landing page. Colour contrast has to be increased from the original palette to meet readability guidelines.
We met again to discuss these designs and the wireframes were approved. The landing page pass proved useful as the client realised that she wanted to take the sites visuals in a different direction, stating that the original palette and mountain motif looked too mature for our target audience of secondary school students and university candidates.
Branding
The client sent me an updated, basic landing page image with more of a “pop” colour scheme. She also sent me a diagram demonstrating the organisations funding system.*
*subject to change
With this new colour scheme and “doodle” style in mind I took another pass at the landing page, merging Illustrator-drawn doodles and stock images to form a more unique, on-brand look.
![]()
For more information on the graphic and brand design, please visit the Graphics Gallery.
Research
User Personas
Before expanding this initial design, it was important to outline the target audience. I created some personas, keeping the info provided by the founder in mind.
-
Alex
Full-time student, works a part time job to support their family
Info
- 16 years old
- London, England
- Secondary School Student
Goals
- Get a good grade in Biology
- Overcome any areas they struggle with in Biology class
- Meet the requirements to pursue a veterinary degree
Barriers
- Struggling to find extra time to study
- Family doesn't make enough money for expensive private tutoring
- Family's financial situation also doesn't qualify for subsidised tutoring or other financial assistance
-
Taylor
Currently taking a university-level biology course, but excelled in a variety of subjects during secondary school
Info
- 20 years old
- London, England
- Full-Time University Student, 2nd year BSc Biology
Goals
- Gain some experience working with secondary-school age children
- Develop teaching skills
- Become a biology teacher
Barriers
- Unable to find a reliable tutoring gig
- Busy univerity schedule means that Taylor needs something flexible
- Hasn't tutored before and would prefer to learn with others rather than figure it all out on their own
Competitor Research
I also took the time to examine competing organisations at a variety of scales and noticed some trends in how organisations presented themselves.
Aiming at Investors
Calmer colours
Large photographs of the work they have done
Impact-first language e.g. 'we have helped x number of people in y'
Aiming at Students
Pop colours
Custom graphics
Involvement-first language e.g. 'join us!'
Pain Point - Establishing G&G
Many established tutoring charities are able to display their impact, where their funds are spent, their mentions in local news etc. to prove their legitimacy. Being a very early stage CIC, this information was unavailable to us - we would have to prove ourselves through other means.
The ways we chose to prove our legitimacy were as follows:
![]()
![]()
![]()
Site-Wide Explanations
Meet The Team
Easy-To-Find Policies
Design For Donation
Calls to donate are present in the form of a footer for the majority of our main pages. Currently, subpages such as Meet the Team and Volunteer With Us do not have the large donation banner, as it does not feel relevant to those pages.
![]()
Considering Students
We assessed that our target audience of students would likely not be able to donate so on the on the Students page that is directly aimed at them, we chose to forego the donation banner entirely.
Future Plans - Meaningful, Impact-Based Donation
When we have evidence of how funds have been utilised, this will be displayed on the website, alongside a call to donate.
Should we need to fundraise for anything specific (improved tutor training, expansion of the subject list, etc.), specific CTAs will be added across the site, highlighting this.
For examples of what this could look like, please view a similar technique from the Devon Healing Horsemanship Project.
Code
Pass It On
This site was coded with the idea that it should be easy for another volunteer to expand upon the work that has been done. Since this organisation relies on volunteer labour, I tried to ensure that the stack would be fairly common and simple to pick up.
Stack
HTML, CSS, JS, Nunjucks, Eleventy, Liquid, JSON, MarkdownEasy To Change
As this CIC is in its early stages, the codebase has been designed to be easily changeable without a lot of dev input. Certain lists such as the list of volunteers are represented in JSON so that they can easily be pulled from an Excel file. Important documentation such as policies are displayed from markdown files so that they can easily be changed and updated just by exporting the file they originally came from.
Additionally, the assessment form for students is currently an embedded Google Form. This is to allow the founder to be able to make quick changes as the organisation finds its footing and refines its criteria.
Hand Off
I also created a component library and brand guidelines to be passed onto any future code or design volunteers.
![]()
Future Expansions
Tutor Login
Give and Grow is currently in talks to partner with a university that has an existing online tutor system. If this is successfully established, then a login system for tutors that are part of that service should be integrated into the Give and Grow site.
Testimonials
-
Working with Dorian has been an amazing opportunity and an absolute blessing. Throughout the entire process they've demonstrated so much passion and dedication to executing this project. I enjoyed the process at every stage, and appreciated how much input Dorian also put in. In terms of visual aesthetics, Dorian went above and beyond to meet the details requested and even put in hand drawn images to match the look I was going for! They were very clear on the time-frames, expectations and constantly helped me make informed decisions for our website (for someone like me who's not familiar with this process). Overall I'm an absolute fan of their work and am so grateful to have worked with them!
Eva Mamphilly, Give & Grow CIC Founder