Mishie Floral
I’ve always had a love for floral arrangements, so I came up with this case study after noticing that so many floral shops have websites that could use a major upgrade! I worked on this while completing online UX courses in my spare time. Throughout the process I gathered user feedback that was graciously provided by my family and friends. Below I show samples from the steps in my process and the end result.
The Problem
Most local floral shop sites are dated and overwhelming. Having a love for flowers I thought that shopping for them should be a pleasing experience. I found that to not exactly be the case when looking at my local flower shop’s websites. As you can see in the images below the problem is that they are too busy and not up to date with the latest web design trends. Flower arrangements are complex enough and many shops choose to have a detailed background. Also, in the case with the shop on the left, a really complicated menu taking up precious space that could be used to promote products. These things make it really difficult for the user to focus their attention on the actual products.
I tasked myself with designing a floral site that was simpler and more enjoyable while keeping the user’s goals in mind. I went through the full UX process including sketching, creating user stories, a sitemap, wireframes, and a full high fidelity visual design, while building upon the previous steps and iterating on each piece along the way. I gathered user feedback throughout the process as well from friends and family in order to get a true sense of what user’s look for.
The final result was a beautiful site that focuses the user’s attention while still providing all of the information and features they need for an effective and pleasant online shopping experience. Having worked on this project alone I would’ve liked having more of a team to work with, such as product managers to give requirements and feedback to continually iterate on the product. Overall, I think I came up with a good solution to the challenges the problems I identified earlier with local floral sites.
Example 1 of problematic floral site design
Example 2 of problematic floral site design
Sketching
I began my sketching process just trying to get as many ideas as I could down on paper. I thought about what the most effective way to present the products would be. I don’t want to overwhelm the user but I want to catch their attention. So many floral shop sites are overwhelming, with many products and complicated menus attacking your vision from the moment you land on the site.
Teasing out page organization and site structure were two key parts of my sketching process. Not every sketch became usable but letting the ideas flesh out on paper reveal some neat ideas!
User Stories
I began developing user stories with a loose structure in mind that I had developed from my sketching process. Shown here are a couple examples of user stories I came up with. Identifying the steps in a process helps to further work out the details of how this site will start to shape out and identify any branching paths that may exist. I tried to keep standard flows of what a typical web user is used to, while making sure to include details that a user would be most interested in. For example, in the purchase user story I made sure to include an order summary through every step of the cart, to checkout, to order confirmation page so the user is always aware and assure that their order is correct.
Sitemap
I looked back on my sketches and user stories to try to identify all of the pages needed and build a sitemap for Mishie Floral. I caught pages that I had forgotten about and identified some issues in my sketching. Those discoveries allowed me to iterate on my sketches and user stories in order to make them better.
Wireframes
Referencing my past sketching, user stories, and site map I was able to start creating wireframes. As I garnered more feedback I was able to quickly iterate and improve these wireframes.
HOME PAGE
PRODUCT PAGE
CART PAGE
FAVORITES
Hi-Fidelity Mock Ups / Visual Design
Building on all of the previous building blocks of the site I was able to come up with a simple and elegant visual design for the site, letting the focus be on the arrangements themselves.
HOME PAGE
PRODUCT PAGE
CART PAGE
FAVORITES
Logo Design
When coming up with the logo for Mishie Floral I focused on the shape of a flower. I was able to come up with a petal structure that I liked but wanted to add another layer to it. I was able to create a shape similar to a sun in the negative space in the center of the flower, which added a depth to the icon that I was very happy with!