BK Bouquets
The challenge: When only relying on local business and walk-ins, a florist is limited in terms of their business and profit. For a florist looking to expand their customer base, a strong online presence and way for customers to order online is key.
The solution: I designed a responsive website that would allow a Brooklyn-based florist to sell their floral arrangements online and that would allow customers to access the site from any device, whether they are on their computer at home or on their phone while on-the go.
My role: Lead Designer and UX Researcher
Tools: Adobe XD
Responsive design and varying screen sizes
When designing a website that is able to be viewed on multiple screens, the importance of information architecture and hierarchical prioritization becomes clear. What is most important for users to see and access right away? What content can be hidden or moved so as to make the most of limited real estate on smaller screen sizes?
Through this project, hierarchy was one of the main things I focused on as well as consistency. Even with changes to the layout or navigation when changing to smaller screen sizes, my aim was to create something that looked and felt like the same product and gave users the same experience, regardless of the device they used to access the website.
Initial research
Early on in the process, I conducted a competitive analysis of competitor sites that also sell flowers online, like Urban Stems and 1-800 Flowers. This helped me get a sense of common features and conventions but it also allowed me to get a sense for what was missing in the market or what could be done differently.
I also interviewed users early on to get a sense of what types of features they’d be most interested in and in what scenarios or for what occasions they would be most likely to purchase flowers online.
User persona
From paper wireframes to digital wireframes
Because responsive web design was the key aspect of this project, it was important to sketch out different sizes of the wireframes to plan out the layout for the different device types users would be utilizing.
Once low-fidelity wireframes had been created, the most important thing to do was test the designs so that I could get insights and feedback early on in the process. I linked the wireframes together to create a low-fidelity prototype to conduct usability tests. One of the most surprising thing I discovered was how easy it was to miss obvious things like missing prices for products or the option to navigate back to the previous site in a flow. That is why testing early and often is so critical, to catch these things right away.
High-fidelity mockups
After testing my initial wireframes and making the necessary edits and adjustments based on the feedback received, it was time to add color, imagery, and bring everything together.
When creating a mobile version of the homepage I...
-
Utilized a hamburger menu for navigation
-
Changed the layout from a multi-column layout to a single-column layout (except for the photo gallery section, which is two-column to present more pictures)
-
Limited the featured bouquets to one product at a time but as a carousel so that users can flip through the different bouquets
-
Made sure the button sizes were still large enough that they made accessible tap targets for users
When creating a mobile version of the product page I...
-
Utilized a hamburger menu for navigation
-
Changed the layout from a multi-column layout to a single-column layout
-
Much like the featured bouquets section on the mobile version of the homepage, for the "You might also like" promoted products, I presented the bouquets one at a time using a carousel feature
-
Made sure the button sizes were still large enough that they made accessible tap targets for users
High-fidelity prototype
Access the full prototype here
Key takeaways
This project taught me about how many things to take into consideration when designing for a variety of screen sizes and devices. As someone who usually takes a mobile-first design approach, it was really useful doing things the other way around and going from web to mobile to hone my editing skills and determine what content is most crucial for the user.