Empowering people for a better future
Grooming Centre is a Non-Governmental Organization dedicated to uplifting marginalized communities and advocating for social justice across Nigeria. They are committed to empowering individuals through innovative social support systems that create lasting positive change in their lives.
The organization had an existing website but they needed an upgrade to reposition themselves, redefine their mission and goals and stay updated with modern design trends. They approached August Deep Technologies - as a leading web solutions agency, with their problem and we were able to deliver a solution that exceeded expectations and adhered to the agreed timeline
Timeline
Ongoing
Client
August Deep Technologies
Industry
Non-Governmental Organization
Visit Live Site
Content-first Design
Understanding Requirements
They had prepared a Product Requirement Document highlighting the new site structure, preferred design styles, brand guides, website functional requirements, and information updates. The document was well-detailed, about 30-40 pages. I was so excited because it answered the questions I had before I even asked them, and the goal of the redesign was clear (so less back and forth).
So, I got to work on reading the document, taking note of super important details I must not miss, sketching out how some pages should look, and gathering UI images for inspiration. This took about 2 days. Then work began on the style guide. I created color tokens, set up a typography system, and transferred the images from the folders they shared into Figma.
UX Audit & Initial Design
The next step was to do my own UX audit of the old website. I used a plugin called Codia AI Web2Figma to transfer the old website from HTML to Figma design. I did this for most pages on the old website. Here are a few things I noted from a design and user experience point of view about the old site:
No contrast on Icons
Products Section could look better
Boring Footer
About us section
Loan Rate calculator
Grant Page
Not sure what was going on here
Too many nav items
As you might have noticed one particular image is overused and appears in almost every page. Also there were a lot of dead links through out the website. I took notes and made sketches on how to make them look better.
Starting from the top
After completing the Audit, it was time to get to work on the new website as time was limited. I started with designing the reusable components that will be used across the website.
I started with the Navigation. I kept the double nav bar pattern from the old website; however, the nav items had changed following the new site structure in the PRD. Once I saw the layers of the new structure, I got a brilliant idea - Mega Menu.
One of their main focus points was to showcase their impact through stories. This was hammered in the PRD and during meetings. I wanted that impact to attract people to read it, and what better way to do that than with a mega menu? I began sketching the best way to present the menu, and after a few attempts, I got it, as you can see below:
Mega menu under the stories nav item
Rest of the mega menu options
Mega menu on mobile
Hero Section
Originally, the Hero section was a slider, but later they wanted a grid, and that worked really well too.
Original hero section with slider
Final grid hero section
Footer
The new footer contained more information, a clearer navigation menu and contact information
Footer Section
Favorite parts of the website
With those important areas sorted, I started working down the list of pages, consulting the PRD, checking the old site for content, creating a plethora of new layouts, and fitting in new images as we were being given through out the projects duration. There are a lot of pages and info on the website, and it took a lot of effort to meet the deadline, but I was able to deliver. These are my favorite parts of the site I worked on:
CTA (Call to Action)
A call to action for site visitors to support Grooming Centre. It allows them join Grooming Centre by interacting with the organization via socials, offering their services, or visiting physical branches. I love how the gradient and the image of the globe blend together to make it look beautiful.
CTA section
About Us Grid
Telling the story of Grooming using images and numbers while incorporating their mission, vision, and a testimonial was a masterclass in layout. Really proud of this one.
About us grid
Product Card and Modal
I redesigned how the product grid looked and felt, giving it soft corners, a gradient overlay, and making it open to a modal instead of a full page with a blank layout like the old website.
Product grid
Product modal
Loan Enquiry
Yes, it’s a form, but it was a great improvement on its former version. I designed it to be scannable, easy to fill by grouping fields semantically, and made it enjoyable by using easily identifiable and consistent icons.
Loan enquiry from
GET Program Summary
Simple solid grid with icons, but there’s something about the mix of colors here that I really love.
Program summary grid
Impact and Reflections
Honestly, there’s so much to love about how this website turned out. It’s easily one of the projects I’m most proud of—not just because it looks good, but because it feels right. Seeing the stakeholders’ reaction made all those late nights worth it. They were so impressed with the transformation that they moved a few more projects over to August Deep Technologies, which is the best kind of feedback we could ask for.
Visit Live Site
Looking to build a personal, studio, or business website that informs, creates trust in visitors and converts them to customers? Reach out to me now.
Let's Connect 👋
More Projects
Finance
Studio Portfolio