TAHMEF
Equitable health access in Tanzania, redesigned for the people who need it most
I redesigned, rebranded, and optimised the user experience of the website for the Tanzania Health & Medical Education Foundation - a foundation founded in 2015 that serves marginalised Tanzanians reached through poverty, limited awareness, and cultural perceptions that affect their well-being.
- Role
- UX/UI designer: research, personas, journey mapping, concept and interface design, usability testing, design handover to development
- Timeline
- 4 months, end to end, from discovery to developer handover
- The team
- UX/UI designer: Jo IonescuGraphic designer, logo redesign: Hanna AdamczykDeveloper: Shadrack Abely
- Toolkit
- Figma
- Auto layout
- User personas
- Journey mapping
- Usability testing
- Responsive design
- Dark mode
Who is TAHMEF
An organisation promoting equitable health access in Tanzania through digital healthcare services. Founded in 2015, TAHMEF serves marginalised Tanzanians identified through poverty, limited awareness, and negative cultural perceptions affecting their well-being.
My brief: redesign, rebrand, and optimise the user experience of the website for the Tanzania Health & Medical Education Foundation.
- Research and analysis
- Define goals and objectives
- Create user personas and journey maps
- Concept development
- Iterative design process
- Feedback from the client, users, and usability testing to inform design iterations
- Implementation and development, responsive design, and dark mode
- Close collaboration with the developer to keep design solutions feasible and smooth to implement
Discovery phase
Who is TAHMEF, what needs do they have, and what are their pain points? Before touching the design I established the what, the why, and the how. Part of it came from the client through a shared document where I asked the questions that mattered, and part of it came from my own research.
Below is the website I started from: the look and feel, the functionality, and the brand presence all needed work.
- Inadequate communication
The original website failed to communicate TAHMEF's mission, services, and achievements, which left stakeholders unsure what the organisation actually does.
- Limited engagement
There were no interactive features such as chat support or email prompts, so beneficiaries, funders, and partners had no natural way to start a conversation.
- Poor user experience
Cumbersome navigation, low-quality visuals, and site crashes pushed away exactly the people the foundation needed to reach.
- Accessibility issues
No dark mode, no proper optimisation for mobile or desktop screens, which excluded parts of the audience outright.
- Clear communication
Make it effortless for stakeholders, especially funders and donors, to understand the mission, the services, and the impact.
- Enhanced engagement
Give beneficiaries, funders, and partners direct ways to reach the team through chat support and email prompts.
- Improved user experience
Raise usability, visual quality, and performance so browsing feels seamless rather than fragile.
- Accessibility
Support dark mode and design deliberately for both mobile and desktop screens to maximise inclusivity.
The new design also had to integrate with the existing platform, which mixed no-code pages with hand-coded HTML. That made close collaboration with the developer a requirement, not a nice-to-have. The simplicity of the original design was worth keeping; everything around communication, engagement, and experience was not.
Strategy and user personas
The next step was understanding the needs and preferences of TAHMEF's diverse audience. I built three personas: Sarah, a potential funder from the United States, David, a Tanzanian healthcare professional, and Linda, a rural community member. They let me design for real behaviour instead of an average visitor who does not exist.
- 01Diverse audience needs
Funders, healthcare professionals, and community members each arrive with different goals, frustrations, and levels of context. One page had to serve all three without diluting any of them.
- 02Information accessibility
David works in Tanzanian healthcare with limited connectivity. Information had to stay reachable in low-bandwidth environments and on small screens.
- 03Engagement opportunities
Sarah, a potential funder, wants to talk to a human. Chat support and contact prompts had to be visible without hijacking the page.
- 04Cultural relevance
Linda, a rural community health worker, values resources that reflect her context. Visuals and multimedia had to feel local, not stock.
- 05Clarity and transparency
Every persona asked for the same thing in different words: plain language, no jargon, and honest information about the mission, the services, and the results.
A user-centric website that prioritises accessibility, engagement, cultural relevance, and transparency is what actually serves an audience this varied.
Conceptual design
Layout, navigation structure, and key features came out of a mix of research, creativity, and structured brainstorming. From the research I built the user journey map that then guided the wireframes.
Going into wireframing I reviewed the personas and the journey map, identified the patterns and priorities shared across the audience, and folded in input from the TAHMEF team so organisational goals and constraints were part of the layout from the start.
Since the website already existed, starting from desktop let the TAHMEF team compare old against new directly, which made their feedback far more accurate. It is the harder path, though.
- Screen size
Web design means larger canvases and more complex layouts, which made prioritising content harder to translate down to mobile.
- Complexity
The desktop interface carried deeper navigation, interactive elements, and multimedia. All of it had to be adapted for small screens without losing clarity.
- User expectations
People behave differently on desktop and mobile. Designing desktop first risks overlooking mobile-specific needs, so I checked each screen against them.
- Performance
Layouts tuned for desktop browsers can be slow and heavy on phones, which matters a lot for this audience.
- Testing and iteration
Web first required more rounds of testing to keep the mobile version consistent with the desktop design and still meet mobile usability standards.
The rebrand
The logo redesign was created by Hanna Adamczyk and gave the foundation a warmer, more human identity. I built the web system around it: a palette with enough contrast for low-quality screens, type sizing that stays readable on small devices, and layouts that hold up in both light and dark mode.
Iterating in the open
The design moved forward in drafts, each one reviewed with the client and adjusted from their feedback rather than from my assumptions.
Draft 1 - structure and hierarchy
The first pass reorganised the information architecture so visitors, partners, and donors each find their path quickly, and rebuilt the home page around the mission, the services, and the impact.
Draft 2 - wording
The second draft was mostly about language. The changes let TAHMEF's mission and vision come through the way they intended, with more accurate information on every page.
The redesigned website
The final system covers the home page, the team page, the service pages, and dedicated product landing pages such as NIA, all built with auto layout so they respond predictably across breakpoints.
Responsive design and dark mode
The redesign carried three accessibility requirements that were not negotiable: a chat option, dark and light mode, and responsive design across platforms.
Rather than squeezing the desktop layout down, I designed a separate mobile version that keeps the same look, feel, and hierarchy. Some desktop sections were dropped where they added nothing on a phone, and I added elements the mobile flow needed, such as a back control between pages so people always have a clear exit from one screen to the next.
Responsiveness in both versions came from auto layout with explicit width limits on the frames.
- Web, min width
- 480 px
- Web, max width
- 1728 px
- Mobile, min width
- 320 px
- Mobile, max width
- 430 px
What is next
- 01
Testing and validation
- 02
Gather feedback
- 03
Continuous optimisation
- 04
Dark mode option shipping with the next update
While the website was already in the developer's hands, an email arrived that set up the next collaboration: TAHMEF asked me to design a mental health app with them.
"We had the pleasure of working with you previously on redesigning our organization's website, and I was incredibly impressed with the quality of your work and your professionalism throughout the project. Our organization is currently embarking on a new initiative to develop a mental health app, and I believe your expertise and experience would be invaluable to the project."
My takeaway and lessons learned
- 01
Unless it is a hard requirement, start mobile first. Keeping the message consistent from web down to mobile was the real challenge - hierarchy was easy, matching the feel was not.
- 02
Work with a developer who understands the design and feels it the way you do. The back and forth with Shadrack is what made the final build hold up.
- 03
Designing a separate mobile version was slow and worth it. Accessibility on phones ended up far better than a compressed desktop layout would have been.
- 04
Design with auto layout from the very beginning, not from the moment it becomes painful.
- 05
Ask your teammates one question early: what do you need in order to be successful with this project?
Design that reaches people with limited connectivity and limited time has to earn every screen it asks them to load.
The last live version
Organisations change, and so do their websites. After this project shipped, the live TAHMEF site was updated independently of my involvement, so the current website no longer reflects the design I created and approved.
The landing page below is the last version I designed and strategised for TAHMEF - the version that went live from this case study.