Software Suite Design

This app was stuck in development hell for about 7 years, I was brought on to clean-up what they had and polish the design for delpoyment

Main Client Goal: turn their working prototype into a deploy-ready polished design

Disciplines
UX to improve the genral user experiance
UI custom made assets
Brand Strategy guidance to get their app ready
Deliverables
Full design Audit with imporvment recommendations
user flows and prototyes
costom artwork icons and symbols, and app website
recommendatons for next steps with legal, launghing, promoting, and managing comunity chats
Timeline
5 months
Process
Full design Audit with imporvment recommendations
user flows and prototyes
costom artwork icons and symbols, and app website
recommendatons for next steps with legal, launghing, promoting, and managing comunity chats
Why they wanted a designer

Constraints

frustratitions/fixes

Problem: Also known as perceptual salience, referring to what information is able to capture attention. This is when hierarchy is useful, so that important ideas don't have to compete with background details.

Example A, Dark Value Focus: A black and white silhouette scene of a girl in a field under a large moon. The highest contrast is between the bright, white moon and the dark sky, making it the undeniable focal point and creating a dramatic, lonely mood.

Example B, Dark Value Focus: A painted version of the same scene using the same lighting. The moon is brilliantly illuminated against a deep night sky, while the girl and flowers are in shadow. The light forces the viewer's gaze to the moon, demonstrating how value contrast creates hierarchy.
Research

Discovery

Stories are our most powerful tool to communicate ideas. Visual channels are our most potent sensory input and processing. This is why data visualization is such a powerful medium.While visualization usually invokes ideas about sight and visuals. You can also express data relationships through audio and tactile.

Design Audit Findings

Charles Minard and Florence Nightingale were very good at evoking emotional impacts through graphic design. Both of these graphs encode increasing death in shape size. This was back when data was presented as very tedious tables of numbers. These graphs tell stories that humanize the meaning of those numbers.The structure of these graphs were enforced by strong design gestalt that helped focus the attention on the flow of the numbers. and the visual aesthetic helps keep the audience engaged.

Charles Minard's harrowing flow map of Napoleon's Russian campaign, a masterclass in depicting catastrophe. It traces the army's advance as a thick band that withers away to a ghost of itself even before reaching Moscow. The retreat is a nightmare: a thin black thread of men fleeing west, paired with plummeting temperatures below -20° Celsius. You can almost feel the line itself freezing and snapping, visualizing the utter annihilation of a grand army, from 422,000 to a barely-there 10,000 survivors.Florence Nightingale's stark rose diagram of soldier deaths in the Crimean War. It delivers a devastating argument: the blue sections for preventable diseases like cholera are not just larger but utterly dominant, completely overwhelming the small red slivers of combat deaths. This visceral, disproportionate circle screams that the real enemy wasn't the Russian army, but the army's own disastrous hygiene and medical care.

frustratitions/fixes

There is a lot of power in science and statistics. One bad habit of misinformation is leeching of the reputation of well thought out graphic design by stilling the aesthetic. This is used a lot in scams and manipulative advertising.

For example, the newspaper clipping is using clipart of graphs to associate the idea of statistics with their narrative. This is also used when people use 'scientific' sounding words like 'quantum' to add validity to their arguments.

A professional-looking bar chart with precisely drawn x and y axes. The axes have no scale or labels, and the chart displays no data.An absurdly complex pie chart split into thousands of microscopic segments. The legend attempts to label a few with emojis and meaningless percentages, highlighting the complete meaninglessness of the data.

Recommendations

high
medium
low

Scientific Term

A skeletal formula, or line-angle structure, of a DNA nucleotide. In this abstraction used by organic chemists, carbon atoms are implied at every line bend and endpoint. Hydrogen atoms bonded to carbon are omitted entirely, focusing only on the functional groups and bond connectivity that dictate the molecule's chemical behavior.

Chemical

A space-filled model of DNA, representing each atom as a smooth, overlapping sphere based on its van der Waals radius. This abstraction transforms the molecule into a single, complex surface, emphasizing its three-dimensional volume. This model is critical in pharmacology and drug design, where researchers use it to see if a potential drug molecule will physically fit into a target protein's binding site, like a key in a lock.

Space Filled

The American Sign Language sign for DNA: the dominant hand's index finger, representing the double helix, twists in a downward spiral in front of the non-dominant hand, which is held flat.

ASL

A highly abstracted logo for DNA: a simple, sleek icon of a double helix, reduced to two intertwined lines. It functions as a symbolic brand mark for genetics, prioritizing immediate recognition over scientific accuracy

Symbol

Abbreviation

A grainy, black-and-white electron micrograph of DNA strands. The molecules appear as faint, wiry filaments tangled against a dark background. This image represents a direct, instrument-mediated observation, though the subject remains abstracted by the technological process of magnification.

Photo

A highly simplified and stylized diagram of the DNA double helix, as commonly found in textbooks. Two ribbons represent the sugar-phosphate backbones, with horizontal rungs labeled A, T, C, and G symbolizing the nucleotide base pairs. This abstraction reduces the molecule to its core information-storing function.

Stylized

UX design

User Flows

The visual processing skills needed to read are very cognitive taxing. This can get in the way when reading is the means to accomplish another task. Human factor engineering principles can be used to reduce cognitive load and human failure.

Onboarding Flow

An important theme in their brand was treating both partners as equals by not infantilizing the disabled partner or treating the caretaker partner as a babysitter.

This logo shows that by having the fish with the full tail and fish with the weaker tail both creating the heart, as a metaphor for both partners showing up in the relationship in the ways that they can.

The other metaphor is that with chronic conditions, there is an ebb and flow of good and bad days. So the fish swim with the currents and adjust as needed to restore balance when they can like yin/yang.

Logo concept sketch exploring a yin-yang inspired flow within a circle. Two bodies create a heart shape from the negative space between them, symbolizing partnership and balance.Mood board for organic brand direction. Contains images of flowing flowers, sunsets, and dresses to capture the dynamic, natural, and ever-changing essence of human relationships.Evolution of the brand's color palette. The original direction of stark purple and red is shown next to the chosen softened, more romantic valentine palette of purple and pink.Testing various custom-drawn fish logo variations alongside different typography treatments for the brand name to find the most harmonious pairing.A logo variation within a perfect circle, with two bodies flowing into one another and a heart formed positively in the center. This was rejected for its poor scalability in solid black or white.An early, more realistic fish logo concept with subtle heart shapes formed by the bodies. This was rejected due to its complex edges, which created too much visual noise for a functional logo.

Chat Flows

Catagories having a heart theme

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

ions being playful and nautical to match theme

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.

Accessiblity

The visual processing skills needed to read are very cognitive taxing. This can get in the way when reading is the means to accomplish another task. Human factor engineering principles can be used to reduce cognitive load and human failure.

multi-inputs

An important theme in their brand was treating both partners as equals by not infantilizing the disabled partner or treating the caretaker partner as a babysitter.

This logo shows that by having the fish with the full tail and fish with the weaker tail both creating the heart, as a metaphor for both partners showing up in the relationship in the ways that they can.

The other metaphor is that with chronic conditions, there is an ebb and flow of good and bad days. So the fish swim with the currents and adjust as needed to restore balance when they can like yin/yang.

Logo concept sketch exploring a yin-yang inspired flow within a circle. Two bodies create a heart shape from the negative space between them, symbolizing partnership and balance.Mood board for organic brand direction. Contains images of flowing flowers, sunsets, and dresses to capture the dynamic, natural, and ever-changing essence of human relationships.Evolution of the brand's color palette. The original direction of stark purple and red is shown next to the chosen softened, more romantic valentine palette of purple and pink.Testing various custom-drawn fish logo variations alongside different typography treatments for the brand name to find the most harmonious pairing.A logo variation within a perfect circle, with two bodies flowing into one another and a heart formed positively in the center. This was rejected for its poor scalability in solid black or white.An early, more realistic fish logo concept with subtle heart shapes formed by the bodies. This was rejected due to its complex edges, which created too much visual noise for a functional logo.

ADA and WCAG 2.2 AA compliant

Catagories having a heart theme

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

ions being playful and nautical to match theme

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.
brand strategy

The Brand Identity

The visual processing skills needed to read are very cognitive taxing. This can get in the way when reading is the means to accomplish another task. Human factor engineering principles can be used to reduce cognitive load and human failure.

Logo Exploration

An important theme in their brand was treating both partners as equals by not infantilizing the disabled partner or treating the caretaker partner as a babysitter.

This logo shows that by having the fish with the full tail and fish with the weaker tail both creating the heart, as a metaphor for both partners showing up in the relationship in the ways that they can.

The other metaphor is that with chronic conditions, there is an ebb and flow of good and bad days. So the fish swim with the currents and adjust as needed to restore balance when they can like yin/yang.

Logo concept sketch exploring a yin-yang inspired flow within a circle. Two bodies create a heart shape from the negative space between them, symbolizing partnership and balance.Mood board for organic brand direction. Contains images of flowing flowers, sunsets, and dresses to capture the dynamic, natural, and ever-changing essence of human relationships.Evolution of the brand's color palette. The original direction of stark purple and red is shown next to the chosen softened, more romantic valentine palette of purple and pink.Testing various custom-drawn fish logo variations alongside different typography treatments for the brand name to find the most harmonious pairing.A logo variation within a perfect circle, with two bodies flowing into one another and a heart formed positively in the center. This was rejected for its poor scalability in solid black or white.An early, more realistic fish logo concept with subtle heart shapes formed by the bodies. This was rejected due to its complex edges, which created too much visual noise for a functional logo.

UI Elements

Catagories having a heart theme

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

ions being playful and nautical to match theme

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.

Strategy Support

QA

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

app filling unique need gap and not being a weaker veriosn of a current app

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.
Prototype

Results and next steps

The visual processing skills needed to read are very cognitive taxing. This can get in the way when reading is the means to accomplish another task. Human factor engineering principles can be used to reduce cognitive load and human failure.

prototype insights

An important theme in their brand was treating both partners as equals by not infantilizing the disabled partner or treating the caretaker partner as a babysitter.

This logo shows that by having the fish with the full tail and fish with the weaker tail both creating the heart, as a metaphor for both partners showing up in the relationship in the ways that they can.

The other metaphor is that with chronic conditions, there is an ebb and flow of good and bad days. So the fish swim with the currents and adjust as needed to restore balance when they can like yin/yang.

Logo concept sketch exploring a yin-yang inspired flow within a circle. Two bodies create a heart shape from the negative space between them, symbolizing partnership and balance.Mood board for organic brand direction. Contains images of flowing flowers, sunsets, and dresses to capture the dynamic, natural, and ever-changing essence of human relationships.Evolution of the brand's color palette. The original direction of stark purple and red is shown next to the chosen softened, more romantic valentine palette of purple and pink.Testing various custom-drawn fish logo variations alongside different typography treatments for the brand name to find the most harmonious pairing.A logo variation within a perfect circle, with two bodies flowing into one another and a heart formed positively in the center. This was rejected for its poor scalability in solid black or white.An early, more realistic fish logo concept with subtle heart shapes formed by the bodies. This was rejected due to its complex edges, which created too much visual noise for a functional logo.

Deliverables

Catagories symbols having a heart theme

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

ions being playful and nautical to match theme

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.

Outcomes

renued enthusiaim, project felt legematament

Hand-drawn icon for "Partner Quest": two puzzle pieces fitting together to form a hidden heart shape, symbolizing building something together.Hand-drawn icon for "Exploration": a map with a winding path that leads to a heart-shaped destination.Hand-drawn icon for "Play": a classic game controller with its wire coiled into a subtle heart shape.Hand-drawn icon for "Self-Improvement": a flexing fish with six-pack abs and hearts floating around its muscles.Hand-drawn icon for "Gratitude": a collage of small hearts forming one larger heart shape.Hand-drawn icon for "Self-Reflection": a brain swimming alongside bubbles, some of which are shaped like hearts.Hand-drawn icon for "Acts of Service": a gift box with a heart-shaped ribbon.

able to release a version of their app that they are proud of this year instead of another 7 years

Custom nautical-themed "Home" icon: a simple house shape.Custom nautical-themed "Quests" icon: a message in a bottle.Custom nautical-themed "Community" icon: a globe tilted on its axis.Custom nautical-themed "Timeline" icon: a stopwatch.Custom nautical-themed "Dares" icon: a sand dollar.Custom nautical-themed "Settings" icon: a ship's gear or steering wheel.An alternative "Dares" icon not used in the final design: a treasure chest.