The idea for this redesign stemmed from a few years ago when a friend of mine living in San Francisco had finished a Dev Bootcamp & to congratulate her I wanted to send some flowers from overseas here in the UK. I had no idea of which florist was a reputable one but I scoured google and found a bunch of cool florists — one that stuck out to me, though, was one called Urban Flowers.
Urban Flowers are a small, independent, family-owned and family-run business who deliver locally to San Francisco and they had a beautiful selection of flowers. They’ve been there over 15 years and the owner has been a professional florist for over 21 years so they had a strong heritage rooted in San Francisco.
The main goal is to redesign a website to appeal to a wider demographic and make it easy for users who are on the go — common in a city like San Francisco — to easily find flowers and order. To do this, I would need to give the brand a new visual identity to tell the narrative of their company and product, with the aim to eventually have an app for fast and reliable online ordering.
One thing that was consistent throughout all the florist sites that I visited were that all of them weren’t very nicely designed — information was hard to find, they were a pain to navigate and the checkouts/ product pages used the same system. I really wanted to try my hand at doing a redesign from the ground up, from establishing strategy, forming the UX, creating the user flows, wireframes & of course, a responsive website that feels good to use.
The name Urban Flowers is a memorable one, and it’s one of the reasons I remember it, but perhaps it’s because the word “Urban” fits my demographic. Coupled with their story and ethos, I had to give this redesign a go as it had so much potential for me to play with.
The best user personas strike a balance between traits, demographic and a good story. The end goal is to identify the needs of each user (which is defined by their story) & establish how that need can be met with their traits in mind.
Giving each user a story helps significantly in defining the purpose of that individual: Why are they coming to the site? What is their situation? What do they need? What’s their background? What kind of person are they? And what lifestyle do they lead? Through stories I can define their motivations, goals and frustrations.
I start by sketching out a user flow based on the purposes and attributes established in my User Decision path. These not only help me map out the best journey for the user but also allows me to roughly flesh out the organisation of the content itself. At this stage the goal is to make the user journey — the overall flow from entry to end — align with the needs of each user persona.
After the sketch I take the user flow into Sketch and create a clearer, more defined user flow detailing navigation and main content — I also loosely place down the layout of some elements as a simple guide once I begin the wireframe process. Once this is done I then take each persona, their story and their needs and walk through the user flow to ensure that each user persona can achieve their goal.
The logo for Urban Flowers reflects the longevity of the brand — it’s likeness to a more human-created mark reflects the hundreds of beautiful pieces of graffiti around San Francisco, and how they’re as much a part of the city as any building or culture. The handwritten style was intended to strike a balance between graffiti and rough marker pen, but it was mainly inspired by reminder notes that are written with haste.
To supplement the logo I chose two serif typefaces — Kadwa & Brawler. Kadwa is a typewriter-esque font with a very classic feel and when in upper case it’s a very dominant typeface that’s perfect for headers and other important information. Brawler is a beautiful, more classic style of serif typeface which is clean and elegant. I like how it’s balanced between contemporary and traditional shapes.
I created a small colour palette based off the images within my style scape. These colours were based around very gritty, earthy tones with hues between brown, grey and green. The main lighter colour was very subtle light blue — this compliments the greens really well because it injects this cool tone against the darker hues.
The visual narrative that I created earlier helped with the look and feel of the main page and, in turn, set the precedent for the rest of the site and it’s visual direction. The goal was to create something that looks fresh, clean and contemporary to ensure it appeals to multiple demographics based off the user personas.
Visitors need to know who you are and what you do in the first 12 seconds of visiting a site before their attention dwindles. They want to know if you can match their needs as quickly as possible and so users can align their individual purpose with your service.
Using inclusive language such as “Our Family”, “Read Our Story” or speaking directly to the user in the “What’s The Occasion/ For When?” fields begins this dialogue at a level that’s immediately personal. Even the default setting relates to the user as the language used mimics what they might say; “any — I just want flowers!”. This conveys that the business understands the urgency and removes the decision making.
What I liked about the existing site is that there are two items for each row on the category page — these images are large and the text is much smaller. Inspired by my decision path, this gave me the idea of limiting the number of products the user will see in their view. By doing this we create a yes or no response to what the user is seeing and as a result, significantly reduce cognitive load making it easier for the user to make a decision on that particular product.
On the original site there was no dedicated “about” section, instead it was on the home page and consisted of some basic text and history about the company.
The fact that Urban Flowers are a small, family run and family owned company is a HUGE unique selling point and something that makes Urban Flowers stand out from their competitors. With that in mind, I made a dedicated page that pays homage to the team and their roots in San Francisco.
It starts with a white box with contained text explaining the history and heritage of Urban Flowers, along with a picture of owner and founder, Urbano Reynosa.
This is followed by the rest of his family and their role in the business — Veronica, Juan, Liliana & Deigo. By showing the team members individually grants the opportunity to give a face to the business and allows the user to visually build a connection to the team.
Testimonials are a great way to convince users that you’re trustworthy and help build up that initial impression. Rather than fabricate testimonials in a way that’s only positive, including the direct link demonstrates honesty and professionalism.
The aftercare page is very brief on the Urban Flowers original website, however, given their passion for flowers and arrangements I thought a dedicated information page would be more helpful. This is an effort not just to provide information, but to teach customers how to care for their flowers which speaks to a demographic that may not know anything about flowers.
The general care for flowers and orchids (which require different care) is shown at the top through icons and text — I wanted to include a glossary of sorts for users who don’t know anything about flowers. Initially, this was solely a drop down menu, but I considered that a user may not know the name of the flower, but they know what it looks like. With this in mind I created an area containing images of different flowers (along with a drop down menu) so users can identify, visually, the flower itself.