A collection of responsive versions of the design

Website Redesign

Urban Flowers

2017

CLIENT

Self Initiated Project

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.

read the 4-part series on the process over on medium

part 1: strategy

part 2: wireframing

part 3: visual design

part 4: responsive design

Creative Approach

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.

A collection of images collected as reference for the redesign

A Trello board with questions for the client

Getting the (hypothetical) answers

I utilised Trello to house & answer the questions that I needed to ask in order to begin defining a strategy. This strategy will help me establish what I need to make, keep in mind and what may be expecting from the project so that I aim to meet both business and project goals.
‍
I began by creating a list of as many relevant questions (which is always expanding the more varying my projects are) & then I organise these questions into categories. Trello is perfect for this workflow as I can add an “Answers” list which I use to add cards in response to each question. Once I’m done answering questions from one column I move it to the next and work my way down that one. Once I’ve gone through the entire thing I copy the list and move it to another board where I can plan what needs to be considered and delivered.

Building and Establishing User Personas

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.

A side by side comparison of user personas and their stats

Becoming a Storyteller

Stories are one of the main things in User Personas that can — and should — be carefully crafted and reiterated. The more ground it covers and the more variety there is, then the more considerate and accessible the user experience will be.

Carrie — one of our personas — is a busy, on-the-go wife who has a great job in the city. That might be considered sufficient for a user persona “story”, but I don’t believe it tells us enough about Carrie’s lifestyle.

Let’s add to this; she has a 1 hour commute each way, she’s a mother, she’s a project manager with responsibilities such as team management and meetings with CEOs. By giving more depth to her story I can put myself in her shoes and ask how and when she would have chance to browse products and/ or order flowers. What devices is she likely to be using? Where will she be? What will she be doing? The answer could be on her work computer during her lunch break or it could be on her phone whilst commuting.

The Spectrum

If you compare the spectrum where Carrie, Jim & Doris are one the cost concern spectrum, you’ll notice that cost isn’t of huge importance to Carrie, but is somewhat more important to Jim & Doris. If you look at their lifestyle, info & demographic, it might not accommodate for a lot of disposable income, therefore this is where their value lies.

Similarly, Carrie & Jim have similar needs in terms of speed, however, their needs are driven by very different reasons. Carrie needs to find a florist, a product and make a purchase between being a wife, mother and working for the majority of her day. Whereas Jim needs a fast experience because he could potentially miss an important date that he hadn’t remembered — he needs to order something, from somewhere, fast.

Identifying Needs & Solutions

Reviewing what I have so far from the basic info, individual user story and of course the spectrum, I can start defining what each user needs. This is basically combing through every piece of information and where I can put myself in the shoes of these personas and ask myself what I would need! There will almost definitely be similarities between user needs, for instance, Carrie and Jim both need a quick and easy way to view, purchase and checkout, however, Carrie wants delivery on a specific date, whereas Jim needs delivery as fast as possible. Meanwhile Doris’ needs are vastly different from Jim and Carrie’s— she cares about product range & quality.

Once I’ve established the needs of the users I will then look at what ways I can solve those needs. This can be any number of things but it doesn’t have to be a long list — it’s important to be concise because it can be expanded upon later when I begin defining features.

The Value Loop

One of the things that is crucial to do is develop a User Decision Path — when any user is visiting a site or using an app there’s a particular process that happens. This process goes from why we’re there to identifying whether or not it’s valuable to us.

This process is called a value loop and it’s a continuous process that happens until we’re able to make a decision.

Value loops are an integral part of the User Decision Path and how long it ‘loops’ for is entirely down to each individual user. Some questions might not be important for some people, yet for others they may weigh heavily on their ability to make a decision.

A Trello board created to establish a value loop

User Flow

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.

Wireframing

For wireframing I go back to pen and paper and start sketching some very low fidelity wireframes using basic squares & rectangles to represent the different elements on each page. Sketching at such a low fidelity allows ideas to flow much more freely and it’s basically just a brain dump of compositions that can be cut up and pieced together again to create something new. Of course these compositions need to keep into consideration the user needs which is where referencing my Trello boards come in handy — I know exactly what actions need to be done on each page.

Once I’ve gotten enough ideas down I jump into Sketch and begin creating some of the ideas using placeholder elements to define the correct layout. Although starting with a pen and paper is great, it’s never consistent given the variables of the dimensions, layout and the elements themselves. This stage is collecting the parts of the sketches that work best and placing them in a way where layout, size and flow are a priority. It’s also a way to clearly define the actions on that page and give you a feel for using the website, aside from the visuals that come afterwards.

Styling

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.

Home Page

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.

Reducing Cognitive Load

On the original website (left), each flower arrangement has a category and a code (G1, F2 etc) so instead of a code, I gave each arrangement an identity — many of which are named after areas in and around San Francisco:

“Fresh from the Muir” is a reference to Muir Woods National Park — the closest National Park to San Francisco.
‍
“Sunshine in Richmond” named after the Richmond district of San Francisco as well as “Dills of Delores” — a nod to Delores Park in the Castro district.
‍
Similarly, some named after more famous areas such as “Ashbury Garden” and “Lombard Winter” referring to the notorious Haight Ashbury and Lombard Street which has been featured in many films.
‍
Renaming the products in this way further ties the Urban Flowers family to their roots in San Francisco and it allows users to relate on a personal level.

Product Page

On the original product page there’s a bit of information about the product itself — primarily what flowers are included. The user then has to select a vase type (or none at all) which will in turn, affect the price of the product excluding delivery and tax. Generally with this process the user would select the vase, go to checkout, review the purchase then add the delivery details, custom note and then proceed with the billing process. The problem I have with that process is that I often find it quite convoluted in the sense that the user has to ensure they’re entering the correct information at the correct time.

For this redesign I wanted the same type of information to be entered at the same point in the user journey allowing users to more clearly differentiate between the two processes.

I presented the user with a sequence of buttons that initiate a pop up menu on each press where the user can enter information. This information is required before proceeding to checkout and each option is activated when the previous one is filled out

Checkout

Although there was no basket feature on the original website, I created a checkout page that would allow the user to make a purchase on more than one product at once.

This means that users could add an order for June, and an order for an occasion in August in a single transaction. To go even further, users could order flowers for every occasion on their calendar for the entire year, all in a single transaction.

I also made sure that the elements on this page stayed true to the CRUD methodology — Create, Review, Update & Delete. Can we create a new order? Check! Can we review our current orders? Check! Can we update or edit an order? Check! And can we delete an order? Check!

I wanted the billing page to be seamless in a way that the product pages were — each stage is contained within one page and completed through pop up menus.

Confirmation

The confirmation page is the page users will see once the transaction and order has been made. As Urban Flowers see their customers as part of their family, I really wanted this to be a personalised notice welcoming the user to the Urban Flowers family. Once again I used positive, inclusive language such as “welcome to the family” and “we’re so happy!” — it’s all very much about serving the user and making them feel valued.

I sign off “with love…Urban Flowers” which marks the end of the process and visually comes full circle — seeing the logo at the home page (start) and on the confirmation page (end). Mimics a personalised note found on flowers.

Bespoke

The bespoke page requires the same information as the product page, so it made sense to replicate the layout and elements on that page, however, I added a few drop down menus to make it easy for users to specify flowers, colour and occasion. I also included a message field for users to fill in further details about their bespoke order.

The choice of imagery is very supportive of the user action, and the text also augments this by using language that excites and intrigues the user — “let’s create something spectacular.” Similar to the product page, once the form has been filling in and the buy button is activated, users can proceed.

About Page

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.

After Care

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.