Jo Ionescu
UX/UI Designer
Tanzania Health and Medical Education Foundation (TAHMEF)
Who is TAHMEF?
An organization promoting equitable health access in Tanzania through digital healthcare services.
Founded in Tanzania in 2015, they serve marginalized Tanzanians identified through poverty, limited awareness, and negative cultural perceptions affecting their well-being.
I am redesigning, rebranding, and optimizing 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
✅ Collaborate closely with developers to ensure the feasibility of design solutions and smooth implementation
What am I doing?
The Team
My role: UX/UI designer
Graphic designer (logo redesign): Hanna Adamczyk
Developer: Shadrack Abely
Total project duration: 4 months
Sometimes, brainstorming and gathering ideas are the best when scribbled
Discovery Phase
Who is TAHMEF, what needs do they have and what are their pain points?
Let's see where are we starting from.
Below, you can see the initial TAHMEF website that I will work on, improving the look and feel, and functionality, and creating a stronger brand appearance.
Before taking any steps into the design, I have established the what, why, and how of the project.
These questions were partially answered by the client through a shared Google document where I asked the right questions to have a good understanding of the client's needs, and partially answered through my research.
1. What:
The project entails redesigning the website for The Tanzanian Health and Medical Education Foundation (TAHMEF), a health tech organization dedicated to promoting health equity in Tanzania. The current website inadequately communicates the organization's mission, services, and impact, leading to difficulties for stakeholders, including beneficiaries and funders, in understanding and engaging with TAHMEF effectively.
2. Why:
The redesign aims to address several critical issues with the existing website, such as poor communication of TAHMEF's work, ineffective engagement mechanisms, and suboptimal user experience. By enhancing usability, communication, and engagement features, TAHMEF seeks to better serve its target audience and attract support from funders and partners.
3. Problems We Solve:
a. Inadequate communication: The current website fails to effectively communicate TAHMEF's mission, services, and achievements, hindering stakeholder understanding.
b. Limited engagement: Lack of interactive features like chat support and email prompts restricts stakeholder engagement and communication.
c. Poor user experience: Cumbersome navigation, low-quality visuals, and website crashes diminish the user experience, deterring potential beneficiaries and funders.
d. Accessibility issues: The website lacks compatibility with dark mode and requires optimization for both mobile and desktop screens, potentially excluding certain user groups.
4. Goals:
a. Clear communication: Ensure stakeholders, especially funders and donors, easily understand TAHMEF's mission, services, and impact.
b. Enhanced engagement: Facilitate active engagement and communication from beneficiaries, funders, and other stakeholders through intuitive features like chat support and email prompts.
c. Improved user experience: Enhance the website's usability, visual appeal, and performance to provide a seamless browsing experience.
d. Accessibility: Ensure compatibility with dark mode and optimize the design for both mobile and desktop screens to maximize inclusivity.
User Experience (UX) Considerations:
1. Primary Goals:
a. Clearly communicate TAHMEF's mission, services, and impact.
b. Facilitate prompt engagement and communication from stakeholders.
c. Ensure easy access to and understanding of digital products.
d. Enhance brand positioning and personality for different stakeholder groups.
2. Typical User Journey:
The user journey involves visitors easily navigating the website, understanding TAHMEF's mission and services, engaging with interactive features for communication, and accessing specific product information through dedicated landing pages.
3. Accessibility Requirements:
Ensure compatibility with dark mode and optimize for both mobile and desktop screens to enhance accessibility and inclusivity.
Integration:
The new design will integrate with TAHMEF's existing website platform, which includes both non-coded and HTML-coded pages. Collaboration with a developer will be necessary for seamless integration and implementation.
Current Design Assessment:
The simplicity of the current design is appreciated, but improvements are needed to enhance communication, engagement, and overall user experience.
Elements Available for Redesign:
Logo and various image folders from TAHMEF's activities will be provided for use in the redesign process.
Brainstorming and note-taking continue throughout the entire design process
Strategy Development Phase
This is the next step of the project where I try to understand the needs and preferences of TAHMEF's diverse audience.
User personas, such as Sarah, a potential funder from the United States, David, a Tanzanian healthcare professional, and Linda, a rural community member, are created to represent different user groups. These personas help me empathize with our audience, enabling me to tailor the website's design and content to their specific needs and behaviors.
By focusing on strategy development and creating user personas, I ensure that the redesigned website effectively communicates TAHMEF's mission, engages with stakeholders, and ultimately serves as a valuable resource for both local communities and international supporters.
⚠️ Click on the picture for a better experience
Analyzing the user personas' background, goals, frustrations, and needs, I can summarize everything under 5 big ideas that will drive my design process further on and inform the redesign of TAHMEF's website:
-
Diverse audience needs: The user personas represent a diverse range of stakeholders, including potential funders like Sarah, healthcare professionals like David, and community members like Linda. Each persona has unique goals, frustrations, and needs, highlighting the importance of designing a website that caters to a broad audience with varying backgrounds and priorities.
-
Information accessibility: David, as a Tanzanian healthcare professional, may face challenges accessing the internet or navigating complex websites due to limited internet connectivity or lack of mobile optimization. Therefore, the website needs to prioritize accessibility and ensure that information is easily accessible, even in low-bandwidth environments.
-
Engagement opportunities: Sarah, as a potential funder, seeks opportunities for direct engagement with the organization to explore collaboration or funding opportunities. Therefore, the website should include interactive features like chat support or contact forms to facilitate communication and engagement with stakeholders.
-
Cultural relevance: Linda, as a rural community health worker, values resources and information that are culturally relevant and accessible. Therefore, the website should incorporate visuals and multimedia content that resonate with the local context and cater to diverse cultural backgrounds.
-
Clarity and transparency: All user personas express a desire for clear and transparent communication from the organization. Therefore, the website should prioritize clear messaging, avoid technical jargon, and provide transparent information about TAHMEF's mission, services, and impact to build trust and credibility with stakeholders.
The user persona analysis underscores the importance of designing a user-centric website that prioritizes accessibility, engagement, cultural relevance, and transparency to effectively serve the needs of TAHMEF's diverse audience.
Conceptual Design Phase
Generating ideas for layout, navigation structure, and key features that address the needs and preferences of the target audience involves a combination of research, creativity, and brainstorming.
Based on the research and information gathered, I created the user journey map that will serve as a guide in creating the wireframes.
Here is what I took into consideration in the wireframing process:
- I reviewed user personas
- I reviewed the user journey map
- empathized with the users to understand their needs, behavior, and pain points
- I identified common patterns, preferences, and priorities among the target audience related to website layout, navigation, and features.
- I took into consideration the input from the TAHMEF team, to understand organizational goals, priorities, and constraints
- I discussed with the team the expectations for the website's layout, navigation, and features, ensuring alignment with user needs and project objectives.
Because the website will be web and mobile-responsive, I decided to start from something that I already have in place - the website. Redesigning with web first, allows me to compare the new website with the already existing one. Like this, will be easier to be assessed by the TAHMEF team and I believe that the results would be more accurate.
Of course, designing web first is more challenging than a mobile-first approach, for multiple reasons:
- Screen size: web design involves working with larger screen sizes and more complex layouts compared to mobile design. I believe that this will make it harder for me to prioritize content and features and ensure that they translate effectively to smaller mobile screens.
- Complexity: web interfaces may include more detailed navigation structures, interactive elements, and multimedia content. These elements will need to be adapted to fit on smaller mobile screens while maintaining usability and clarity. This will be challenging!
- User expectations: users have different expectations and behaviors when accessing websites on desktop versus mobile devices. Designing for web first may result in overlooking mobile-specific user needs and preferences, leading to suboptimal mobile experiences.
- Performance considerations: web designs optimized for desktop browsers may not perform well on mobile devices in terms of loading times, responsiveness, and resource usage. Adapting these designs for mobile requires careful optimization to ensure smooth performance across different devices and network conditions.
- Testing and iteration: designing for the web first may require more iterations and testing to ensure that the adapted mobile version maintains consistency with the desktop design while also meeting mobile-specific usability and accessibility standards.
- Workflow disruption: designing for the web first and then adapting for mobile can disrupt the workflow and might require additional time and effort to adjust the design for smaller screens.
It may be more efficient to design with mobile considerations from the outset to avoid significant redesigns later.
Brainstorming wireframes
for the landing page (web)
Brainstorming wireframes
for the Team section (web)
Brainstorming wireframes
for the service/products section (web)
⚠️ Click on the picture for a better experience
Once I have my hand-draw wireframes in place, I am creating the digital once using Figma.
One thing I am taking into consideration when creating the wireframes in Figma: the grid. It is very important to respect the grid as it helps me visualize the project as a whole: grid, white/negative space, hierarchy. This startegy is already telling me about a possible look and feel of my design.
The products (desktop)
The team (desktop)
The landing page (desktop)
Mockups and Prototype
The next step in my design process is creating mockups followed by a draft feedback from the client.
What I have in place so far are the wirefrems, logo redesigned and TAHMEF's brand colors.
DRAFT 1
After designing the landing page, I have sent it in a pdf format, to be reviewed.
The feedback was given using Google Docs. This allowed us to comment back and forth, to ideate and brainstorm for the best outcome.
According to the client's feedback, changes should be made to the website to represent the best organization's purpose and mission and bring value to its end users.
Here are the important things that needed to be changed, after the first draft:
-
Color and Look:
-
Use a bolder blue as the dominant color, aligning with TAHMEF's brand toolkit.
-
Ensure all colors match TAHMEF brand colors, avoiding deviations like the yellow "Learn More" button.
-
Consider animating figures for a more engaging experience.
-
-
About Us, Our Reason for Being, Our Partners, Our Approach:
-
Increase font size for improved readability and emphasis.
-
-
Wording:
-
Prioritize the problem statement on the landing page, making it bold and prominent.
-
Update the introduction to reflect TAHMEF's mission and values.
-
Enhance clarity and alignment with TAHMEF's identity based on provided wording guides.
-
-
Our Reason for Being:
-
Consider adding a photo reflecting TAHMEF's digital technology aspect.
-
-
Partners List:
-
Update with the latest partner list and logos provided.
-
-
Our Solutions:
-
Rename to "Our Products" and list AHADI, TAHMEF Academy, and NIA in that order.
-
Provide clickable links for each product.
-
-
Our Impact:
-
Replace current photo with a map showing Tanzania's coverage by TAHMEF services.
-
-
Call to Action:
-
Alongside donation and volunteering prompts, highlight options to subscribe to the newsletter and fill out a contact form for more information.
-
⚠️ Click on the picture for a better experience
The new redesign based on the first feedback:
⚠️ Click on the picture for a better experience
The home page (web)
The team (web)
The product (web)
DRAFT 2
The second draft had changes more related to wording. These changes helped the message to be sent out as TAHMEF wanted to, the changes are conveying better their mission and vision and bringing accuracy to the information presented.
⚠️ Click on the picture for a better experience
Responsive Design
The website redesign had multiple important accessibility requirements: a chat option, dark/light mode, and responsive design for all platforms.
Responsive design was created minding the fact that while scrolling on the mobile, some features from the web version might not show entirely responsive or might not be necessary to be designed.
Designing the web first is more challenging than a mobile-first approach, for multiple reasons:
- Screen size: web design involves working with larger screen sizes and more complex layouts compared to mobile design. This made it harder for me to prioritize content and features and ensure that they translate effectively to smaller mobile screens.
- Complexity: the web interface includes more detailed navigation structures, interactive elements, and multimedia content. I adapted these elements to fit on smaller mobile screens while maintaining usability and clarity.
- User expectations: users have different expectations and behaviors when accessing desktop and mobile websites.
- Performance considerations: the web design optimized for desktop browsers may not perform well on mobile devices in terms of loading times, responsiveness, and resource usage.
- Testing and iteration: designing for the web first required more iterations and testing to ensure that the adapted mobile version maintains consistency with the desktop design while also meeting mobile-specific usability and accessibility standards.
- Workflow disruption: designing for the web first and then adapting for mobile might have created workflow disruption and required additional time and effort to adjust the design for smaller screens.
Taking this into consideration, I created a separate design for the mobile version, keeping the consistency, look, and feel of the desktop version.
While designing for mobile, I had sections that I did not find necessary on the mobile devices, and I also added elements like a back button from one page to another, to facilitate the user's multiple exit points from one screen to another, and an easier flow for getting from point A to point B.
Responsive design
The responsive design in both the desktop version and the mobile version was created through auto layout and limits for the width of the frames.
For the web, the responsiveness was created for:
- min width 480
- max width1728
For the mobile devices, the responsiveness was created for:
- min width 320
- max width 430
Desktop and mobile version + dark mode
What is next?
⚪ Testing and validation
⚪ Gather feedback
⚪ Continuous optimization
⚪ Dark mode option with the next update
Also next, will be another amazing collaboration with TAHMEF, where I get to redesign a mental health app. When the website was already in the hands of the developer, I received an amazing email that made me excited for the next project.
Dear Jo,
I hope this email finds you well. My name is Neemamaria, and I am the Program and Operations Officer at TAHMEF. 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.
I'm reaching out to you today with an exciting opportunity. 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. Given your outstanding work on the website redesign, I am eager to collaborate with you once again.
I have already submitted the project details to Catchafire, and if you are willing to work with us again, I kindly request that you respond at your earliest convenience. Your insights and skills would greatly contribute to the success of this project, and I am confident that together, we can create something truly impactful for our community.
Thank you for considering this opportunity, Jo. I look forward to hearing from you soon and hopefully having the chance to work together again.
Warm regards,
Neemamaria
My Takeaway & Lessons Learned
- Unless it is a MUST, start with a mobile-first design. It was a challenge to keep the consistency of the message when designing from web to mobile. The hierarchy was not hard to create but what I wanted to achieve was having the same feel in the mobile devices as it was in the desktop version.
- it is SO IMPORTANT to work with a developer that understands your design and feels it the way you do. I was lucky enough that have a perfect collaboration with Shadrack. Our back-and-forth chats lead in the end to a valuable design. We understood each other's needs and limits and overall, knew that we both had the same goal.
- It was challenging and time-consuming creating a different version for mobile, but, on the other hand, it was worth it, as we have better accessibility on the mobile platforms
- My skills in creating responsive design are improved and I can say that I am proud of all the work and lessons learned in this project
- Another lesson learned: design with auto layout from the beginning!
- I have learned that it is important to ask your team colleagues: What do you need in order to be successful with this project?
I look forward to starting my next project with TAHMEF: the AHADI mental health app.