Urban Petals.
Making flower delivery for special occasions a breeze.
Project Overview
The Product
I was tasked to create a floral delivery responsive webpage. A website that allows users to place large orders for every event to be delivered at home or on the go.
My Role:
UX Designer through all design stages.
Duration:
October 2023 - November 2023
The Challenge
There are multiple ways to buy and order flowers, but it seems as though there are advantages and disadvantaging when ordering flowers online. From research, users enjoy the convenience of ordering online. Allowing the flowers to be delivered also saves users the pain of figuring out how to move large orders of flowers. There are also risks. Users concerns arise from their flowers being late for delivery, or being shipped far away which risks quality and freshness.
Pain Points:
Time
Due to demanding schedules, working adults do not find time to buy flowers in person.
Quality
Most users do not have the means to transport large flower orders, which could cause the flowers to lose quality before they reach the event. The Problem
Users are looking for a convenient way to get bulk orders of flowers delivered, without giving up the quality and freshness they desire.
The Goal
The goal is to create a responsive web page design for a florist shop with a smooth and accessible layout. This is where users can place large flower orders for any occasion at home or on the go through a local florist shop.
Project Research
Research showed that users prefer florist websites that have great photography of the product, easy to navigate, and a portfolio section to see the previous work that the florist shop has done. Users also enjoy seeing who it is creating their bouquets and bios about the owners, along with some sort of business testimonial.
To help myself get in the shoes of the users who are looking to buy flowers, I created two personas. Lauren is a mortician who runs a funeral home, and Jayden is engaged and looking for a florist for his wedding.
Main Features and Structure
With understanding where my users interest lie, and researching how other florist shops layout their navigation and pages, I started my own information architecture to include in my responsive webpage.
How would be users be navigating Urban Petals webpage? I came up with a map of how I believe users would search through Urban Petals website.
This helped me decided which pages are most important to the flow most users would experience. This also helped me decide that a well organized navigation bar would be the most important to curate. There is a lot of inventory and themes to flowers that needed to be organized and easily accessible.
I also created wireframes to help me get a sense on the general layout Urban Petals website. I did this for both the desktop website as well as the mobile website. The key difference is the navigation bar.
I create an 8 page wireframe of the general layout of my responsive website. In this flow, there was a landing page, an example of one of the occasion item, a single item description page, as well as the whole check out process that simplifies the sequence for users.
For the desktop website, the navigation bar is laying right in front of the user, allowing them to hover and click on any prompt they need. For the mobile app, the navigation is set aside in a hamburger menu that will slide out for users to choose a prompt. This allows for a clean homepage and keeps the same items still accessible, just on a smaller screen. Over all, the mobile and desktop version will have the same look and feel.
Since I had the general layout down, I went ahead and create my low-fidelity prototype in AdobeXD. I used general shapes, lines, and text to create the general layout of my screens. Some of my ideas changed as I was putting this together, like creating a grid panel selection to replace the hero image idea in my wireframes.
Low-Fidelity Prototype for Desktop
Low-Fidelity Prototype for Mobile
Visual Design
Once I had the layout down and the user flow I wanted to follow, I did research into the visual design and visual hierarchy of the Urban Petals web design. I used the type face Poppins in different sizes and weights.
For the color, I chose two main colors of the brand: An earthy green, and a dusty pink to visually match the look of a flower. With that, I also chose neutral text colors that highlight the primary colors.
Once I had my visual designed laid out, I went straight into designing my high-fidelity prototype for Urban Petals. After looking at my digital wireframes closer, I decided that the landing page looked busy, I made some changes to layout and structure while designing.
High Fidelity Prototype for Desktop
High Fidelity Prototype for Mobile
Design Iterations
Landing Page
The first design reiteration I tackled was the landing page. It seemed very busy. As I looked back into my research, other florist shops used their homepages to display seasonal flowers, as well as customer favorites. Something else that caught my eye was testimonials from the business owners, and what they hope to achieve for their shop. Instead of the box layout idea, I replaced it with a hero image of a bouquet.
With that, I added more spacing which allowed for Urban Petals testimonials for their business. It’s what they promise to give to customers, and having it front and center will strengthen business and client relationship. This also puts the customers at ease knowing their needs and concerns are heard but can place trust in Urban Petals.
Checkout Process
The second design reiteration I tackled was the check out process. I felt like it was clunky and could be better organized. Its a lot of information for the user to input, so it was important for me to get it as clean as possible. To do that, I looked at accessibility standards and text hierarchy to keep everything clean.
Having too many pages for user to fill out information can get annoying. I reiterated on my design and created two separate pages to input your information, shipping information, and delivery day details. I then created a confirmation page to make sure users look over any mistakes they could have possibly made while inputting their information. Then this allows them to place their order in Urban Petals.
Accessibility Considerations
1
Paid close attention to color contrast to make sure people with seeing impairments could still navigate the screen.
2
Key information on the home screen is upfront and visible for screen reader technology.
3
Text is at a hierarchy making it easier or screen readers to go through. There is also a use of sans-serif typography to make it easier to read.
Takeaways
There was a bold change from the beginning designs to the end of the design. After iterating on the design more, it was created to be more of a human centered design focused heavily on feedback to make the app as easy to use and navigate.
I learned a lot about accessibility through creating my own app. Even the smallest of design choices can have the biggest impact, and can also be looked over.
Next Steps
1
For future research, include a broader sample to gain more research on what users look for while ordering mobile.
2
Conduct a usability test for the interaction of the high-fidelity prototype.
3
The user profile section can be developed further. A place to save your favorite items to make ordering easier.