🎯 Objective
Redesign the website to be responsive and mobile-friendly. Our aim is to establish it as the primary digital hub for the company, directing customers to relevant information, the latest blog updates, and easy enrollment to courses, prioritizing group courses.
✍🏼 Role and Deliverables
In this project, I collaborated closely with the Social Media Manager to develop business strategies. My role encompassed end-to-end UX and UI design, including problem definition, creation of visual assets, and development using WordPress.
💪🏻 Challenges
This project presented significant challenges as my partner and I both took on PM responsibilities. We had to launch the first MVP within 6 months with a limited budget and tech resources.
đź’Ą Outcome and Impact
After the release of our MVP, we saw an 80% increase in outcomes, including traffic website, significant growth in group course sales through the website, resulting in a 15% revenue boost. Additionally, we received positive feedback from both customers and the company.
Background
Dins el Baobab is a highly frequented holistic therapy center located in the Bages region. Five years ago, the Social Media Manager created a website for them to establish an online presence. However, due to her limited experience crafting websites and the center’s limited resources, the website had little impact beyond the blog and course information, and was not responsive at all. Clients showed a stronger preference for individual therapy sessions over group ones, leading to the cancellation of many group workshops due to low participation.
Old’s Dins el Baobab website
Despite their efforts to maintain a strong social media presence, the center found that their target audience at the time did not heavily engage with social platforms, rendering their efforts futile.
Dins el Baobab Instagram feed
So, initially, I decided to focus on the graphic design aspects of the Dins el Baobab project. This involved creating the branding, developing the visual and digital identity, and designing social media posts. Through these efforts, I established a cohesive and engaging brand presence that resonated with the target audience and set the foundation for the project’s success. Afterwards, along with the Social Manager we’ve started working on the whole website redesign.
Dins el Baobab’s Branding
Process
1. Understand
Conduct the user research to understand both the user’s and business’ needs.
2. Define
Run workshops to identify the problem and define hypothesis to work on
3. Ideate
Run design jams during the product development to explore potential solutions. Documentate.
4. Validate
Execute A/B testing, qualitative surveys, analize, iterate and conclude.
Understand, emphatize, understand...
The most important, the begining of of journey: understand not only the company and its needs, but also the customers.
Understanding customers is at the core of our work, as it is from this understanding that opportunities emerge. Therefore, keeping the customer at the center of everything we do has always been our priority.
We conducted various workshops, like interviews and different diagrams and customers maps, with the entire team to deeply empathize with and understand both the customers and the employees.
One of the most inspiring workshops was when we decided to use an Empathy Map:
Miro’s Jams from our personas’ research process
Different hypotheses emerged during and after the workshops we conducted. However, instead of jumping straight into ideating solutions (a common tendency to solve problems before forming well-structured hypotheses), we decided to first conduct a benchmark and research.
This allowed us to see what the competition was doing and how they were creating impact and influence:
Miro’s Jams from our research process
Hypothesis
And we finally came to the Hypothesis:
The website must be the main digital space for Dins el Baobab, which will receive all possible resources, leaving social networks to a secondary role.
1. Enhancing the UX and UI of the website, improving information structure and hierarchy, will help users find information more easily, thereby increasing conversion rates for group courses.
2. Implementing various targeted methods to redirect users to the website will increase traffic and, consequently, course conversions.
Company and project Roadmaps
Let's start ideating, co-creating all together...
I started by creating potential wireframes to define how the website should look and function. With every small step forward, I quickly communicated my progress to the entire company.
“Create fast, share it, without fair of failing”
Â
This approach ensured that we were all aligned, sharing the same vision and moving in the same direction.
Below you’ll find some Design Jams and workshops done, menu labels and style guide, plus the initial lo-fi wireframes we created:
Design jams and workshops done with the company and Social Media Manager: menu labels and style guide
First wireframes of the new product
Until we finally came to an... MVP!
For Dins el Baobab, our primary focus was to address the core needs of their digital presence while maximizing resources efficiently. The MVP aimed to establish a solid foundation for the website to serve as the primary digital hub for the center, prioritizing key functionalities and user experience enhancements. All we needed to do is iterate with the MVP.
Let me explain you about different charateristics the MVP included:
The MVP included essential features such as improved navigation and information architecture to streamline user access to relevant content, focusing particularly on grupal course offerings and bookings. Additionally, the MVP integrated responsive design elements to ensure optimal viewing experiences across various devices, with a focus on mobile responsiveness to meet the needs of the growing mobile user base.
We’ve also prioritized inclusivity and accessibility by considering the needs of our neurodivergent target audience. We meticulously designed the user interface using dyslexia-friendly typography and color schemes suitable for individuals with color vision deficiencies, such as daltonism. By integrating these features, we aimed to create a digital experience that stands for diverse user needs and ensures equal access for all,…
…”that feels like a safe space, like home”.
By prioritizing these core features, we aimed to deliver tangible value to Dins el Baobab and its users while laying the groundwork for future enhancements and iterations based on user feedback and evolving business needs.
In addition, we crafted compelling newsletters to deliver valuable content and updates to subscribers, enticing them to explore the website for more information. Furthermore, we introduced a welcome data sheet at the center for visitors that walk in for them to leave their contact information. This allowed us to automate email campaigns, prompting visitors to subscribe to the newsletter and redirecting them to our website for additional resources and offerings.
By combining digital and physical strategies, we aimed to create multiple touchpoints for user engagement and foster a seamless transition from offline to online interactions.
MVP on desktop web
MVP on mobile web
Welcome data sheet and
logs of the email automatizations
Validating, analyzing and iterating
Following the launch of the MVP, we embarked on a rigorous process of validating, analyzing, and iterating to refine and optimize the digital product further. In this phase we conducted extensive testing of the digital product to ensure its effectiveness and accessibility. User testing sessions were conducted with diverse participants, including neurodivergent individuals, to gather qualitative insights and feedback on usability and accessibility.
Through these tests, we identified areas for improvement and refinement. Based on the feedback received, we iteratively refined the user interface, adjusting typography, color contrasts, and navigation elements to better accommodate diverse user needs.
Furthermore, we engaged in continuous analysis of user interactions and behaviors, leveraging analytics tools like Amplitude to collect quantitative data on user engagement, conversion rates, and website performance metrics.
By continuously validating, analyzing, and iterating, we were able to enhance the digital product iteratively, ensuring that it consistently met the evolving needs and expectations of both users and the business.
Final Product and impact
Building upon the success of our MVP, the final product has delivered remarkable outcomes for Dins el Baobab. Following the release, we experienced an impressive 80% increase in outcomes, including a substantial rise in website traffic and significant growth in group course sales through the website. This increase in sales resulted in a 15% revenue boost, highlighting the tangible value and effectiveness of the digital product.
Moreover, the impact extended beyond metrics, as we received a very positive feedback from both customers and the company. Customers appreciated the improved user experience and accessibility features, while the company celebrated the tangible business growth and enhanced digital presence achieved through the product.
To ensure the continued success of the digital product, the Social Media Manager underwent comprehensive training to maintain the live product and keep metrics up to date.
The final product stands as a testament to our commitment to excellence and innovation. By prioritizing user needs and utilizing data-driven insights, we have not only met but exceeded the expectations set forth by Dins el Baobab.
Some pages of the final product
Final product’s interaction