Flora

Design patterns

The interface is built on established patterns and principles: similarity and visual hierarchy to separate primary from secondary buttons, Hick's law to limit the choices on screen, visibility of system status and the goal gradient effect in the checkout steps, recognition over recall in the basket, common region to group the subscription details, and consistency of standards in the navigation bar.

Design principles applied across the interface

Visual identity

Brand colors, logotype and the words that guided the identity

Text and typography

The font of the logo is inspired by nature's own forms, creating an organic, soft and modern impression that evokes connotations of playfulness and joy.

The primary font in the interface is a rounded sans serif, providing a modern feel. Additionally, there is another font used for headings, a serif that contrasts with the main font. Despite its more sophisticated style, it still conveys a playful and friendly vibe.

Logotype, primary typeface and alternative typeface

Design language and logo

Similar to the wordmark of the logo, the symbol is inspired by nature with its soft, blurred form. The symbol depicts a half-flower placed above the wordmark, resembling a sunrise. The flower is not realistically depicted but has an abstract, modern touch in its design. Together, they form a logo that evokes the feeling of contemporary Scandinavian flower power.

Icons and other vector graphics feature rounded shapes with a "semibold weight" to complement the overall design language and typography, giving a modern and friendly feel.

The flower symbol and an icon in the same rounded style

The Process

Our target group was young adults interested in interior design and the latest trends, as well as conscious about climate change.

Target group

Playfulness was the gap in the market. We had noticed that most flower shops had an elegant sophisticated aesthetic to them, while the obvious connection between a colorful bouquet and youthful playfulness was overlooked. We wanted to use that to stand out from the crowd and use the trends of organic graphic forms to appeal to our target group.

Moodboard

Photography with a Pinterest feel. The photography was chosen for a modern, Pinterest-like aesthetic, to match the way our target group already browses for interior and styling inspiration.

Balancing modern and retro in the logo. We wanted the logo to balance the modern and the retro touch perfectly and started with testing several fonts and playing around with distortion of the font to add an abstract feel to it. At this point the name for the company was not chosen, so we used the working-name of Anna. We iterated different designs of a flower, with one being too retro and the other one being too scandinavian modest. We then designed the "half-flower" that had the balance we were looking for. The idea was a colorful logo to bring out the playfulness so we tested different color combinations from the vision board. We chose the one that balanced best: the blue came out far too strong, and the version with purple on the leaves read more feminine than we were after. What settled it was that these colors sit where a real flower would not have them, with no yellow at the center, which holds on to the abstract feeling the distorted wordmark was already reaching for and gives the mark a little more edge.

Enough colors to feel playful, few enough to recognize. We struggled for some time with the idea of how many colors to include in the brand. Many enough to convey the playful feeling of a colorful bouquet, but few enough to create a strong recognizable brand. We decided on three brand colors and two neutrals. The brand colors (pink, orange and green) were chosen to emphasize playfulness, joy, innocence, and energy, while also reflecting a connection to nature. The neutral tones are earthy, aligning well with the industry the company operates in.

Logo iterations

Contrast checked before the colors were locked in. To make sure we followed the guidelines of WCAG regarding accessibility we did a contrast-check of all the color combinations. This was used as a basis for decision-making of which colors and combinations to use on the most critical parts where perception is paramount. The check showed each of the three brand colors falling short against the light neutral, so buttons and text take a darker step from those color scales instead. The decorative areas kept the original shades: the wavy orange background, the green fields and the orange inside the logo carry no information that contrast rules exist to protect, and the logo letterforms are thick and large enough to hold up on their own. Darkening those areas would only have made the whole page heavier to look at without helping anyone read it.

Every pair checked against 4.5:1, with the ones that pass marked

Accessibility. Status you can read in greyscale. Stock status is written out as "Finns i lager" or "Slut i lager", rather than shown only as a red or green dot. A dot on its own puts the entire message in the color, which is hard to tell apart in greyscale and for anyone who does not separate red from green.

Accessibility. Icons carry a label. The icons in the tab bar are written out rather than left to speak for themselves. A house or a cart is understood almost anywhere, but the flower standing for the subscription is not a convention anyone has learned, so on its own it would be a guess.

From architecture to Crazy 8 sketches. We started by sketching a rough architecture of the app and then defined the user's subgoals for each screen, as well as the company's objectives for the same. With this in mind, along with research on best practices, we created several low-fidelity design sketches using the Crazy 8 method.

Testing the layout before committing to it. In our med-fi wireframes we tested the visual language in the layout by combining ideas from the low-fidelity sketches. We conducted "user tests" with our sync group and made further adjustments based on the feedback we received. Finally, we used these iterations to test the colors in the user interface. The findings included adding a back-button and a add and subtract button in the basket, as well as to remove the "keep shopping"-button since we now have the back-button. It also came to light that the add-button and the price could switch place to make it easier for the user to click the button.

Mid-fi wireframes after the round of feedback

Design system

Where the decisions became components. The system holds the three brand colors and two neutrals, both typefaces, and the buttons, cards and icons built from them. Nothing in it is new: each piece carries a decision made earlier in the project, from the rounded language shared by the logo and the icons to the color combinations that had already passed the contrast check.

A colorful brand needs one more than a restrained one does. Three brand colors gave us the playfulness we were after, but they also give a screen many more ways to drift out of step with the rest of the interface. Defining the components in one place is what kept the palette consistent once there were more screens than we could hold in our heads.

Each button color has a job, matched to how often you meet it. The sheet shows every button with the same label, but in the interface the color is what says which kind of action this is. Pink belongs to the subscribe button, the action the whole business model rests on, so it gets the color that pulls the eye hardest. Orange carries next and add, which come round far more often, so it had to stay easy to spot without demanding attention every single time. Green belongs to the plus and minus buttons.

States and shades were decided before they were needed. The buttons are built as components with variables, so each one has secondary and tertiary variants and a disabled state that switch as a property rather than being redrawn. Every color exists as a full scale too, even though only some steps are in use. Settling a shade in advance is easier than inventing one halfway through a build, when the pull is to pick whatever happens to look right on the screen in front of you.

Reflection

The decision I would revisit is the number of brand colors. Three brand colors and two neutrals gave us the playfulness we wanted, but keeping a palette that colorful consistent across a whole site took more rules than we had time to write. With another round I would define clearer guidance for when each color is allowed to lead.

Accessibility. The habit I took with me. Working with the WCAG contrast check as a decision-making tool rather than a final check is the habit I took with me from this project. It shaped which combinations we could use where, instead of forcing us to fix contrast after the fact.

Accessibility. Some things I would keep working on. The hearts on top of some of the pictures are hard to make out against the image behind them, and the disabled buttons do not reach a contrast of 4.5:1. The "Månadsvis" option is one example. WCAG does not actually require disabled controls to meet that, but it is still something to strive for. With another round I would also adjust the tones of the brand colors themselves, so that more combinations meet the contrast requirements and the palette can be used in more places across the interface. Beyond the colors, the next steps would be focus states, a deliberate tabbing order, error messages, and testing how the interface can be navigated and used when it is heavily zoomed in.

Want to see more of my research?