previous project

previous project

next project

next project

Design Concept Passion Project: Mobile Pregnancy & Maternity App | B2C | Healthcare

Momly - coordinated care and support in one pregnancy & maternity mobile app

Image credit: https://www.pregnancylancaster.com/en/2022/11/10/what-is-a-doula/

My role

For this solo design project, I assumed the following roles:


Digital Strategist

UX Researcher

UX/UI Designer

Web Designer

Deliverables

Project Concept

MVP Scope

User Research
Competitive Analysis
User Flows & Wireframes

Style Tile
Hi-fi mockup

Specifications

Duration:

5 months


Tools:

Figma, Photoshop, Procreate, LottieFiles, Jitter

One-Minute Case Digest

Problem

Outdated website with unclear brand identity and poor responsiveness across devices.

Methods & Tools


  • the following methods were selected and used based on their potential impact and project constraints: site audit, competitive analysis, user research, brand strategy, user flows, user personas, prototyping, user testing;

  • Framer, Figma, Procreate;

  • Framer app builder and host platform was chosen for its prototyping capabilities and high level of customization. The client switched from Squarespace to Framer.

Solutions

  • site mapping: 3 levels deep maximum to allow discoverability and efficiency;

Sitemap

  • strong brand identity through business differentiators (in its mission and offers) and cohesive visual design;

  • discoverability of high-impact features through strategic placement, interactive elements and CTAs.

Results

A redesigned website that is cohesive, aligned with the brand identity, and serves business goals.

View live site

View live site

The Brief


Momly is a concept-project of a maternity and pregnancy care mobile app that focuses on two main elements — coordinated support and care. Personalized and personal.

Momly is also my passion project as it deals with healthcare and wellness.

Overview: The Business of Birth

Project Summary


Momly is a mobile application developed in response to growing maternity care crisis in the United States.

At the serviceheart of Momly is a dedicated team of both medical (nurses, midwives) and non-medical (doulas) professionals who deliver coordinated care and support for expectant and new mothers.

Momly's main differentiators are

  • Care Coordinator that acts as a strategist, manager and facilitator of one's care team and care plan,

  • personalized coaching services available in the Library of resources.

Process


I conducted user research, identified key paint points and MVP, developed a brand image and style, iteratively tested solutions, and optimized the app for mobile devices.

Objectives


The main objective of this design concept-project was to create a human-centric and interactive mobile pregnancy & maternity application.

The secondary goal was for me to develop my design style and to learn throughout the process.

Output


Momly — a human-centered mobile pregnancy & maternity app that


Research & Ideation: It Takes a Team

Topic Research


Goals:

  • To understand maternity care problem

  • To outline current practices

  • To explore feasible solutions


The Problem and Implications

Overview: Solving an interesting case of a niche business

Client


Uptown Fungus, a veteran-owned and operated legal organic cultivation of Psilocybe Cubensis mushrooms in Oregon.

Project Summary


Uptown Fungus (UF) is a small niche business that is a pioneer in the cultivation of Psilocybe Cubensis mushrooms, recently legalized in Oregon for therapeutic and medicinal use. As a veteran-owned business, Uptown Fungus is committed to providing high-quality, organically grown mushrooms while supporting the local community.

I redesigned UF website that led to an increase in user engagement by X%. I worked on their existing website built on Squarespace platform and developed its brand identity, brand image, and structured their content. These served as the starting point to design a responsive identity site that positions Uptown Fungus for the future.

Process


I conducted user research, identified key paint points, developed a brand identity and image, iteratively tested solutions, and optimized the website for multiple devices.

Objectives


The overarching primary objective of this website redesign project was to create a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.

I set out to break down and refine my main goal by opening up communication channels with the UF's team.


“What would you like to accomplish with this new website? And what are your offers & services to the public once this launches?”


Asking the UF stakeholders the two questions above transformed a routine requirements-gathering interview into a goal-oriented process. From the beginning of the project, my role grew from Web Designer to that of a Digital Strategist.

After several phone calls with key stakeholders, I came up with the following primary goals for the site:


GOAL 1 A digital identity

The site will convey Uptown Fungus (UF)'s vision and mission to the general public as well as to the 2 main groups that UF interacts with: public officials and operations officers of the service centers.


GOAL 2 A digital business front extension

The site will serve to extend UF’s on-the-ground business to the digital space. As a user-friendly, and accessible online presence that reflects the brand's core values: quality, transparency, and support. The website is geared towards its distributors – certified service centers – who are knowledgeable facilitators of therapeutic alternatives.

The Menu and Customer sections are projected to play a key part in strengthening UF's market presence.


Research & Ideation: Who am I designing for?

Initial Audit


First, I evaluated the current state of the website via a heuristic analysis of the information architecture & navigation and through examining its analytics data (such as number of unique visits).

Second, I identified three main usability issues and explained why there is a need to resolve them.


Usability issue 1 — Poor readability that prevents one’s interactions with the website

Usability issue 2 — Low discoverability of high-value features

Usability issue 3 — Low compliance with accessibility requirements that negatively affects user experience and renders the website ADA non-compliant.

Problem

  • Every year, more than 34 billion lbs of used textiles gets thrown out in the US

  • We own 66% more clothes now than we did 15 years ago (see the report here)

Clothes Overconsumption Habits

  • Overbuying

  • Discarding still wearable clothes

  • Lack of proper knowledge on real cost of textile industry

  • Lack of adequate organized storage/closet

Consumer Trends

  • People of higher income, spend about 76% more on clothes than people of lower income

Implications (*not a complete list)

Environmental degradation

Depletion of Resources

Economic Stress

Health Risks

Labor Inequality

Recommended Solutions

Environmental & Energy Study Institute (see in full here)

  • Buy less

  • Buy second-hand

  • Donate and trade unwanted clothes

  • Buy sustainable brands

  • Educate yourself

User Research


Goal:

  • Gain insights into clothes purchasing and wardrobe maintenance by a target user group.

In addition, I surveyed three users — operations support specialists at different service centers. Through my research I identified the following key insights and paint points:


Key insight 1 — The most visited pages were Customer Login and Stock.

Key insight 2 — Customers preferred calling as a way of contact.

Key insight 3 — Prices and inventory on the Stock page were frequently updated.


Pain point 1 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).

Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)

Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).

Pain point 4 — Poor mobile responsiveness (the website was built for desktops and laptops).


Suggested Areas of Improvement

  • age banner

  • to display stock info in a table/grid format

  • password protected page for customers

In addition, I surveyed three users — operations support specialists at different service centers. Through my research I identified the following key insights and paint points:


Key insight 1 — The most visited pages were Customer Login and Stock.

Key insight 2 — Customers preferred calling as a way of contact.

Key insight 3 — Prices and inventory on the Stock page were frequently updated.


Pain point 1 — Lack of cohesive brand image and inconsistent outdated design (various colors, fonts and images used).

Pain point 2 — Usability and accessibility problems (poor readability — no information and typography hierarchy; congested text; poor organizational structure of the content)

Pain point 3 — Efficiency problems (e.g., contact info was hard to find, external links open in the same window).

Pain point 4 — Poor mobile responsiveness (the website was built for desktops and laptops).


Suggested Areas of Improvement

  • age banner

  • to display stock info in a table/grid format

  • password protected page for customers

Competitive Analysis


I looked to several key players in the psilocybin cultivation and therapy space to study how those businesses position themselves in the digital space.

I analyzed six direct and indirect competitor websites for strengths and weaknesses: Satori Farms PDX, Myco Synergy, Omnia Group Ashland, Epic Healing Eugene, Brain Brew PDX, and Alchemy Community Therapy Center.


Satori Farms PDX and Myco Synergy stood out for their strong brand image and focus on product quality. I analyzed the way each one communicates their identities through their websites.

Satori Farms PDX

Epic Healing Eugene

Both businesses present cohesive brand images and are consistent with utilizing color style guide to organize their content and imagery to support their mission. Both Satori Farms PDX and Epic Healing Eugene use long and linear landing page layout with a navigation bar that disappears when the user scrolls downwards.

The cleanliness of Satori Farms PDX navigation bar (at only five top-level menu items) is impressive for a nonprofit of their market share.


However, a key weakness on both websites is in the way they both ineffectively use typography hierarchy and don't adhere to web accessibility standards in their text-to-background contrast ratios. Epic Healing Eugene would also benefit from a top-level menu reorganization.

Myco Synergy

Myco Synergy

Omnia Group Ashland

Myco Synergy and Omnia Group Ashland opted for evocative vivid imagery and a fixed navigation bar.

Myco Synergy's use imagery to tell their story is visually compelling. However, dedicating a whole hero space to it was hampering the delivery of essential content and obscuring the colorless menu navigation located on the left side-bar.


Both Myco Synergy and Omnia Group Ashland do a great job in organizing dense information into readable chunks supported by related imagery.


However, a key weakness on both websites is their inconsistency in following the web accessibility standards in their text-to-background contrast ratios (primarily, navigation menus).


Structure


I defined the functionality, content, and site navigation through page-level wireframes and sitemaps.


Sitemap


I was able to narrow down the scope of the website design effort and convey it in this preliminary sitemap. I made every effort to make sure that a piece of information is never more than three levels deep.

Sitemap

Wireframe structure


Initially, I considered a large image as a background for the hero space. However I didn't want to risk users being unable to discover information easily or being distracted. At this stage, I knew that I was going to implement a fixed top navigation bar due to the long and linear nature of our landing page.


To increase discoverability and facilitate better storytelling, I opted to go with a long and linear page layout that succinctly narrates Uptown Fungus' background, mission and services using just the right amount of text and imagery.


I created a Menu as a long feature page that presented visual (through an interactive ticker element) and textual information. This format, compared to a gallery or a carousel allows for information scoping with the least effort from the customers and assures that the information is findable and digestible.


For the most vital for business information — product information, quantities and prices — I opted to present it as readily available and complete information for logged-in customers, rather than an information available through phone calls or emails only, as it is frequently delivered in the market space. The password-protected page safeguards my client's product information and time, and allows customers of Uptown Fungus access to all the services and products details on their own time.

UF"s Home and Menu pages

Design Studies: Softness and Simplicity


Visual Design


Uptown Fungus brand identity is rooted in the identity of its owner and its mission of service through nature.

The UI opportunities that I identified and that are central in building a strong Uptown fungus brand identity — contextual consistency and organization, and hierarchy (visual, typographic, textual) were used in creating UI style guide.

The UI elements implemented are warm colors — red-brown and green — and a round typeface Chango support the aesthetic and emotional value of the Uptown Fungus business brand.

For its ability to complement the roundness of Chango for the headers, the typeface Poppins was selected for the body text.


Style Tile

Accessibility Considerations (aka Universal Design)


I consulted WCAG SC Standards to assure that the design complies with best practices and meets accessibility requirements. Some of the practices I implemented using table format for data information, contrast b/w background and foreground, content spacing and heading, and different designs for different viewport sizes, controls for looped animated GIF, and labeled, scalable elements.

Development: Iterations and Inclusion of Stakeholders' Preferences


Design Iterations & Preferences Tests


My focus in designing a hero space was for it to be informative and organized in such a way as to facilitate the discovery of high value features (contact info, business highlights) without unnecessary distractions.


Hero space

"Which configuration of images and information is more readable and engaging?"

Menu

"Which of this two menu feed layouts is more informative?"

Customer Services/Info

"Which of this two customer information/services layouts is easier to browse?"

Note: sensitive information is blurred.

Other notable iterations


  1. A pop-up age verification cookie banner was not implemented due to limitations of subscription of the host platform. I DIY-ed the solution with a permanent fixed notification that assured Uptown Fungus' compliance with the state regulations.

  2. The layout for the Stock page includes a left-side bar with a legend (similar to the one on Customer Services/Information page) and the data is organized in tables.


Responsive Design

At desktop widths, I provided a horizontal top navigation bar that docks to the top of the viewport once a person scrolls past the hero image. It was important to give users the ability to quickly navigate to and from a page at any point during their page-scrolling experience. Since the menu contains four tabs only, I decided that for the tablet widths, the top navigation bar is a condensed desktop version.

At mobile widths, the double-bar icon summons a modal view that covers an entire viewport.

Results: The first launch is never perfect (more iterations!)

Putting it all together


Launch

Go-live date: June, 2024

Initial feedback was positive.


Results & Improvements

The redesigned UF's website was cohesive, well structured and minimal. It reflected the shareholders' inputs and crystallized brand image without compromising functionality.
I was able to successfully solve the usability issues I initially identified:

Usability issue 1 — Poor readability that prevents one’s interactions with the website

Usability issue 2 — Low discoverability of high-value features

Usability issue 3 — Low compliance with accessibility requirements that negatively affects user experience and renders the website ADA non-compliant.

Some minor issues (missing layers, style inconsistencies) were easy to fix.


Alterations/Iterations

  1. After a few weeks of the upgraded site being live, the owner asked me to revise the stock data tables on the Stock page. The columns and rows in the tables weren't responding properly to the input. After several trials, I opted to simplify the data tables by preserving only one column and multiple rows for data input. This way, there was no data misalignment. This was a viable simple option that was within the capabilities of the design platform, even though it was not as ergonomic or aesthetically pleasing as multiple delineated columns and rows.

  2. After consulting with the stakeholders, I replaced the pop-up age banner that I originally created through a specialized (Elflight Widget) website with a free no-maintenance alternative of a fixed line of text under the hero space. The Elflight widget requires a subscription after a limit of visitors was reached.

    WIN: The number of site visitors increased (see metrics)!

Impacts/Metrics (KPIs)


My own impacts aka Learnings

  1. Insight- not process-driven. This is not the first version of this case study, but it is the leanest one (cut down by approximately 50%). I trimmed down the non-functional filler text and focused on presenting just the major points that collaborate the bigger picture of this project.

  2. A 100 ways to make it look good, but only a few to make it work. Different ways to present data vary depending on whether that data gets frequent updates or is kept unchanged (as in the case with the the data tables on Stock page).

  3. Include it if it has logic. The stakeholders of UF business expressed strong preferences in a style of the website. I worked to include many of them, given that they pass the test of logic and serve the functionality practices and accessibility guidelines.


Impacts on users

  1. Once my redesign was implemented and was live for two months, I measured its user traffic. The first two months saw an averaged 42% increase in user traffic compared it with the numbers of the old version of the UF website for the timeframe of the six months prior to the implementation of redesigned website. This data indicated site's redesign adoption rate.

Impacts on business

  1. I plan on measuring a broader impact of my work with UF — its increase in revenue/brand loyalty and retention — within a six months after the launch of a redesigned website.

Conclusion


My enthusiasm and a very lean team of one led me to create a design that represents a coherent brand image, is personable, and is very consistent in structure, but offers flexibility in arranging content.

Presented below are high-fidelity desktop mock-ups of selected pages of the final website design vs the original versions of those pages prior to the redesign.

Reflections & Personal takeaways


This was a challenge. To design a website without a budget, code and on a brand new for me platform — Framer — wasn't easy. Both, my stakeholders and I were benefited from setting tentative deadlines.

This project confirmed that small business owners have strong preferences and great influence on brand images of their businesses. And that is what makes their business' websites stand out.

This case study reconfirmed that a redesign is a process, not a destination. It's a cyclic process of continuous refining of a product. A redesigned website is not perfect, but completed enough to satisfy set requirements.

Original Home page vs. redesigned Home page

Original Service Centers page vs. redesigned Service Centers page

Redesign solution: Password-protected Customer Login/Information page

Original Customer Login vs. redesigned Customer Login/Information page (* a snippet is blurred for sensitive content protection)

View live site

View live site

previous project

previous project

next project

next project