Sector:
Investment, Financial Services, Mining
Project:
Wiphold, an investment firm owned and managed by black African women, was preparing to celebrate its 30-year anniversary. To mark this milestone, they wanted a completely refreshed website that both showcased their history and aligned with their updated brand identity.
My Role:
I was the Web Designer and Developer responsible for taking the approved high-fidelity wireframes provided by the UI/UX designer and turning them into a fully functional website. Alongside this, I managed the technical setup and administration, including web hosting and cPanel configuration.
The Challenge:
The project started with a miscommunication: I was initially told it would be a basic site refresh with new colors and branding. Based on that, I locked in WordPress as the platform. Later, it became clear that the scope was far bigger, it included a detailed history timeline, interactive investment pages (the firm has over 30 active investments), team and investment category filters.
With a tight deadline (the site needed to launch before the anniversary celebrations) and a set budget (no room for premium addons), the challenge became finding a way to stretch WordPress to deliver custom, interactive features usually reserved for more flexible platforms or fully coded solutions.
Tools:
WordPress, Elementor, Custom CSS & JavaScript
The Process
Collaboration & Communication
The UI/UX designer provided mockups that translated Wiphold’s brand vision beautifully. However, some of the proposed features weren’t an easy fit for WordPress. This highlighted the importance of clear communication: the earlier we align design ambitions with development constraints, the smoother the execution.
Despite the initial misalignment, ongoing collaboration via emails and a dedicated WhatsApp group allowed us to adjust and find creative solutions with time to spare.
I will just go over some key points from my experience with this project below:
Screenshot example of how feedback and changes were shared and documented between ui/uxdesigner & me
Initial Mock-ups Vs Final Implementation
The Home Page
Initial mock-up
Final webpage
The homepage mock-up required only minor adjustments, but a few layout issues stood out. There was a redundant navigation bar repeating links already available in the main menu, which created unnecessary clutter. Additionally, the section with the tagline “Invest. Empower. Transform.” felt unbalanced when combined with the text and “Read More” button beneath it.
After consulting with the UI/UX designer, i removed the redundant bar and simplified the design so the tagline stood alone as a static feature. This opened up the lower section, allowing the supporting paragraph and call-to-action to sit more cleanly and with better visual balance.
Additionally we agreed on removing the boarders around the investment firms’ logos, the homepage looked better/cleaner without them.
Investments Portfolio Navigation
Initial mock-up
Final webpage
Wiphold’s Investments page posed a challenge: the company manages six distinct categories—Infrastructure, Food & Agriculture, Financial Services, Mining & Energy, Services, and Education—each with multiple investments. Listing them all on a single page would have created an overwhelming, scroll-heavy experience.
To solve this, I implemented an interactive navigation menu that organizes the portfolio into categories(based on the initial mock-ups i received). When a user selects a category, only the relevant investments are displayed. Each investment can then be clicked to open a dedicated page with its own summary and key details. This streamlined approach improved both usability and clarity. (initial mockup and live demo video attached below)
From a technical standpoint, I opted to write lightweight custom CSS to handle the show/hide functionality, rather than relying on a plugin. I follow a “code-first where practical” approach, since plugins can introduce unnecessary overhead, compatibility issues, or even break a site. This decision kept the solution lean, efficient, and easier to maintain.
Investment Detail Pages
Initial mock-up
Final webpage
One of the most significant aspects of the Wiphold project was the design and implementation of the individual investment detail pages. Each page needed to present a featured image, the investment’s name, logo, sector, Wiphold’s shareholding, and a rationale for investment—along with descriptive copy, a highlighted quote, and navigation to other investments.
The first design placed much of this content in overlapping layers on top of the featured image. While visually striking on desktop, the layout translated poorly to mobile and caused major usability issues. After building the initial version, I identified these problems and collaborated closely with the designer in an iterative process to find a better solution.
The final design adopted a side-by-side structure:
On larger screens, the right-hand third of the page displayed the key investment facts (logo, sector, shareholding, rationale) along with the highlighted quote.
On the left, the featured image appeared at the top, followed by detailed copy describing the company and Wiphold’s relationship with it, occupying two-thirds of the width.
This approach presented information more clearly, improved hierarchy, and delivered a smooth responsive experience across desktop, tablet, and mobile.
Navigation was also refined. Instead of a single “next investment” button, I implemented forward/backward navigation within each sector, plus the ability to jump to the next sector when reaching the end of a category. This allowed users to explore the portfolio in a more intuitive and controlled way.
UX/UI Problem-Solving
This part of the project helped showcase my ability to spot real-world design issues during implementation, evaluate their impact on usability, and collaborate effectively with designers to iterate toward a stronger solution. By challenging the initial approach and helping guide the redesign, I contributed to a layout that was not only visually appealing but also user-friendly, scalable, and fully responsive.
The Outcome
The new website went live in time for the anniversary celebrations. It provided a fresh, professional digital presence for Wiphold while celebrating their 30-year legacy.
Despite the constraints, the site delivered the interactive elements the client requested, without additional plugin costs. The project demonstrated how design vision and technical implementation can be bridged through adaptability and problem-solving.
Key Takeaways
- Communication is critical: aligning early with UI/UX designers helps avoid scope and platform misfits.
- Flexibility pays off: even within WordPress limits, creative coding can unlock advanced functionality.
- Collaboration works best when both sides understand trade-offs between design vision and development feasibility.