Background
Cicla is a mobile app designed to help users understand the menstrual cycle—what it is, how it works, and how it impacts the daily lives of women and people who menstruate, beyond just its reproductive aspects. The app provides detailed information on the different phases of the menstrual cycle, what happens during each phase, how the body changes, what symptoms might be experienced, and offers practical daily recommendations.
Cicla app is free to download and available on both iOS and Android platforms. The app ensures user privacy by not selling data to third parties or using it for marketing or profiling purposes. Since its launch Cicla has achieved, without investing anything in marketing and advertising, over 7,200 users registered with ratings ranging from 4.4 to 4.9 on the Apple Store and Google Play. It has also received two prestigious design awards: the Laus Silver Award for Best Mobile App 2022 and the ADCE Bronze Award for Interaction and Mobile Experience 2022.
Challenge
Redesign the webpage while maintaining the brand's visual identity, shifting its focus from purely corporate content to becoming a consumer-oriented platform. This new platform should enable Cicla to generate income through the sale of content, service bookings, and voluntary contributions.
Project Goals
Based on the briefing received, the team's objectives were prioritized as follows:
1. The sale of content on the website, such as courses and workshops.
2. The offering of services, including one-on-one consultations with experts in female health.
3. To a lesser extent (though already developed), generating income through voluntary contributions.
4. Additionally, providing free content accessible to everyone.
Solution
We carefully identified and prioritized the key insights gained throughout the project and redesigned the Cicla page to enhance its usability, functionality, and content monetization. To achieve this, we introduced new features in the user flow, including the ability to subscribe to plans, promote events and courses, and book services. Additionally, we developed a user area where individuals can access their profiles, view their consumption history, and monitor their progress in courses and upcoming events.
With these new features, the website has evolved from an institutional page into an accessible content platform, providing monetization opportunities for the client and delivering value to users by addressing their needs and expanding knowledge on women's health.
With these new features, the website has evolved from an institutional page into an accessible content platform, providing monetization opportunities for the client and delivering value to users by addressing their needs and expanding knowledge on women's health.
Overview
ROLE: UX/UI Designer
TEAM: Ferdy Cruz, Manuel Fortes, Regina Mizuno, Verónica Santchordi and Virginia Benitez
TIMELINE: 2 weeks
TOOLS USED: Miro, Figma, FigJam
TEAM: Ferdy Cruz, Manuel Fortes, Regina Mizuno, Verónica Santchordi and Virginia Benitez
TIMELINE: 2 weeks
TOOLS USED: Miro, Figma, FigJam
This project is a school project completed as part of the UX/UI Bootcamp at UXERSchool.
KICK OFF and Research
Benchmarking | brainstorm
The initial task involved reviewing content from prior research conducted by the Cicla app team. Along with the project briefing, our client provided user survey results, enabling us to identify and categorize key insights.
An online survey was distributed via email and contested by 11 participants. The survey aimed to gauge user preferences regarding potential content on women’s health, including their willingness to pay for such content, preferred topics, and their interest in paying for individual online sessions with specialists in menstrual and women’s health.
survey results:
· Content Preferences: 6 out of 11 participants expressed interest in events, workshops, or talks and indicated a willingness to pay for these offerings. Meanwhile, 2 participants stated they would not pay, and 3 did not respond.
· Popular Topics: The most popular topics were nutrition, hormonal health, sexuality, menstruation, and perimenopause.
· Individual Online Sessions: 5 participants were willing to pay for sessions with specialists, 3 were not, and 3 did not respond.
Additionally, surveys conducted on the client's social media platforms identified online talks and expert-authored articles as the most preferred content formats for consuming information on women’s health and well-being.
As the next step, the group conducted a benchmarking research, with each member responsible for analyzing one direct and one indirect competitor. This research allowed us to collect and analyze data, identify trends, and use these insights to state our design decisions, ultimately helping to develop a better product for Cicla.
Kickoff board
Benchmark board with highlights of what could be interesting for our project
Using the clustered survey data and benchmarking research, we held a brainstorming session to generate solutions for our "How Might We" (HMW) question: "How might we create a monetization system for Cicla through valuable content?"
After generating ideas, we used dot voting to select the most promising solutions for our design challenge.
After generating ideas, we used dot voting to select the most promising solutions for our design challenge.
With the most promising solutions selected, we conducted another round of voting to prioritize the solutions that the group believed would be the most interesting for our client and its users. This allowed us to reach a consensus on what our final idea for product development would be.
Description of the final idea
As our final idea, the group decided to propose the creation of a subscription membership called Cicla Club. The Cicla Club will be available in two subscription models: monthly and annual.
The purpose of this subscription program is to offer users exclusive discounts on services such as one-on-one consultations with expert collaborators from the Cicla app, workshops, courses, access to paid content at no additional cost, and membership in a private community called Foro Cicla.
This community, moderated by the Cicla team, will be a space where only Cicla Club members can share experiences with other users and seek advice from professionals.
Additionally, to uphold Cicla’s mission of providing more women with access to information, helping them understand their bodies, and making informed decisions, the platform will offer free content accessible to everyone in the form of articles and videos developed by experts from various fields related to women’s health and well-being.
POTENTIAL design SOLUTIONS
CRAZY 8´S | SOLUTION SKETCH | INFORMATION ARCHITECTURE
With the final idea defined, the group began creating initial sketches using the Crazy 8's and Solution Sketch techniques. After several rounds of voting, a final sketch was chosen by combining the most interesting ideas from each proposal.
Once our Solution Sketch was finalized, we moved on to the next step: digitizing our sketch in Figma. To ensure the information was clear and understandable for the team, I decided to make use of information architecture to create a structure for Cicla’s webpage before starting the wireframe. With this structure in place, the team was able to begin the wireframe with greater confidence.
Since our objective was to present the new features for the webpage, we focused our efforts on designing the wireframes related to those features.
After completing the wireframe stage, we moved on to the high-fidelity prototype. With the UI Kit provided by the Cicla team, we only needed to develop a few additional components to complement our project’s design.
DELIVERY
HIGH FIDELITY PROTOTYPE
Following the steps of the project, we designed a new proposal for the Cicla website.
For the homepage, the existing site structure was largely retained, with only minor adjustments made. To simplify navigation and better organize content, the 'História' and 'Nosotras' sections were combined into a single section called 'Conócenos.' The 'Home' link was removed, and the logo in the header now serves this function, always redirecting to the Cicla homepage when clicked.
Additionally, new sections were added to the header, including 'Servicios,' 'Cicla Club,' and 'Recursos Gratuitos.' The previous collaboration link, which looked like a section link, is now highlighted as a button labeled 'Colabora.' Links for user login and the shopping cart were also added.
In the body of the page, the only significant change was in the featured content. Previously, the focus was just on promoting the app. In the new design, the primary emphasis is on promoting the subscription plan and its benefits.
The footer was also redesigned for better information organization. The newsletter subscription was given more importance, while information about social media, app downloads, and site content was placed below.
The 'Cicla Club' page is specifically designed to explain the mechanics of the subscription program. It outlines the two types of plans available, detailing their respective prices, advantages, and benefits. Just above the footer, there is also a section for frequently asked questions.
The 'Servicios' page is a new section where users can explore the latest features. An introductory text explains the new offerings and invites users to discover the content.
On this page, users can book one-on-one sessions directly with professionals. (This feature reinforces Cicla’s partnership with the professionals who already collaborate with the app).
Another new feature presented is the events section, where users are invited to participate in talks and workshops, either physical or virtual. These events could help promote the Cicla brand, expand its influence among users, and attract potential new partners.
The courses section offers users on-demand knowledge, accessible directly through the Cicla website.
Just above the footer, there is a section promoting the 'Foro Cicla'—a community designed as a welcoming space for women to share their ideas, feelings, and emotions without judgment or taboo. This section also includes a call-to-action button that directs users to the Cicla Club page.
The first image shows a detailed course page. The idea is that when a user selects a course, they are directed to a dedicated page for that course. This page displays the course duration, access period, and pricing. There is also a button to purchase the course if the user chooses to proceed.
Additionally, the page highlights the benefits of taking the course and provides a comprehensive overview of the course content. At the bottom of the page, there are suggestions for other courses that might be of interest for the user.
The user page is essentially a dashboard that provides a summary of the user's purchases, courses in progress, access to the exclusive community, and a calendar displaying the current month's events. On the left side of the page, there is a vertical menu with links to configure settings such as Profile, Notifications, Privacy, Subscription, and Account management.
To align with Cicla's visual identity, I developed several additional digital illustrations to complement the project design.
RESULTS
After presenting our project to the Cicla team, we received positive feedback. The aspect that most captured the client's attention was the idea of creating an exclusive community for Cicla users. According to the client, a space where users feel welcomed and can share their ideas, feelings, and emotions without judgment or taboo is closely aligned with the company's values.
Regarding the subscription plan, the client found it to be a viable and appealing solution, noting that the benefits offered are attractive, the prices are affordable, and the topics covered are relevant to their users.
Our proposal met the client's expectations, and from this point forward, it will undergo adjustments to better align with the client's current capabilities. One of the key points raised was that, as Cicla is currently a non-profit project, the team lacks the time and technology to fully develop such a complex content platform. As a result, some aspects of the proposal could be implemented immediately, while others would be set aside for future development when the project gains more resources and autonomy.
Project learnings
During this project, I had the valuable opportunity to explore the importance of empathy in truly understanding and designing for users. Working with the Cicla team allowed me to engage with a project that has an incredible purpose.
Additionally, I gained experience working with a Design System created by another professional. I witnessed firsthand the benefits of a well-crafted, consistent style and reusable components, which not only enhanced time management throughout the design process but also minimized errors, making the entire workflow more efficient in this project.