"Design a specialized app for a florist in Michigan."
This UX case study began with a randomized UX prompt. That I used to develop a profile for "Great Lake Flowers": a fictional florist in Ann Arbor, Michigan. I used target audiences from real-life floral services to develop the company profile and made educated inferences as to their clientele in order to develop personas.
Great Lake Flowers is a small business in Ann Arbor, Michigan that has been serving its community for almost two decades. Lately, they've noticed more and more phone calls asking about ordering flowers via mobile app, and they decided it's time to give their customers what they want.
GLF has a dedicated customer base, many of whom did not grow up with smart phones. The application must be accessible for them and allow the human touch they have come to expect from GLF.
Additionally, research insights suggested that about half of end users want to order pre-made bouquets, while the other half want to customize. The design must make either approach as simple as possible for the user.
The good news is that GLF has a solid brand identity, and there are lots of similar, though not local, services that can provide clues for best UX practices. Research began with persona development of GLF clientele and a competative audit of national floral arrangement delivery services.
Before I could begin thinking about the UX for this product, I had to take a look at what features similar services offer. A competative audit of 5 top online floral services was conducted to assess current practices for balancing ordering pre-made, customizable, and completely custom floral arrangements.
After collecting basic information on the competitors, each company was assessed in terms of
This competative audit of 1-800-Flowers, Edible Arrangement, Urban Flowers, ProFlowers, and FTD revealed three major gaps in the market:
1. Few-to-no options to customize arrangements online
2. No options for in-store pick-up
3. No accessibility considerations for neither the online ordering process nor the delivery process
Usability Study 1
After the audit, research was on hold until I completed a low-fidelity prototype of the user flow outlined in the next section. After I made the GLF low-fidelity prototype, I conducted an unmoderated usability study paired with a system usability survey. After the data was cleaned into an affinity map, this study revealed four actionable insights:
1. Shopping by best sellers should be promoted as a feature of the app.
2. There should be more obvious visible indications when a user is browsing with a filter enabled
3. Buttons need to be larger and uniform visually
4. The quick order feature should be balanced with other key features presented on the home screen.
Usability Study 2
As I wrapped up my high fidelity prototype for the GLF app, I began to design another usability study to assess the effectiveness of my design element choices. I needed to be sure that my interface design choices enhanced the experience of using the app while maintaining ease of use.
How easily can people find action buttons throughout the user flow?
How easily are users able to undo actions?
Did the order of inputting information make sense to users?
Were users able to easily interpret what icons mean?
Were users able to distinguish between sections on pages through visual design elements?
Key Performance Indicators
User error rate
SUS questionnaire immediately following usability study
Action buttons should be uniform in size and color
Action buttons should be uniform in screen position whenever possible,
Users were able to undo erroneous actions easily in every part of the prototyped user flow.
Users wanted more explanation of the rationale behind their actions when prompted for a delivery ZIP before seeing the available arrangements.
To address the challenge of balancing pre-made floral arrangements with custom arrangements in the ordering process, I designed this user flow that uses components of both, taking a pre-made arrangement and adding customizations to it.
With a working user flow for the GLF app, I started work on the sitemap of the entire application including the "Build-a-Bouquet" feature and different ways to browse the great inventory GLF has to offer.
First I went screen by screen from the tentative sitemap and developed some rapid iterations of possible designs. I made sure to list what components each page needed and used checklists as guides as I designed.
Low Fidelity Digital Wireframes
After I identified specific components and iterations of those components on paper, I made the below digital wireframes.
Since GLF doesn't have a notable digital presence, I adopted their brand standards from print media to develop the design system for the app. With this as my starting point, I made alterations as needed to account for the interactive affordances of digital technology.
I completed design system development and the second usability study around the same time, which together informed my first iteration of mockups.
From the first screen (left) to the last (right) I tried to emphasize clarity and easy of use while balancing the aesthetics people enjoy when they visit GLF in person.
As someone with vision impairments, I am particularly attuned to text that is too small or fonts that are hard to read. I made sure to keep text as large as I could without sacrificing usability. Not only will this benefit users like me, but also the elderly who frequently find need for larger texts.