UX Strategy
Research
The first step taken was to look at her current brand and create a project brief describing the objective, context, and other key elements like the user and feature requirements.
After establishing the need alongside the client, I researched similar online flower shops that I believed matched the desires of the client.
After viewing the examples with the client, we decided on a basic site structure and ideal color and mood. for the site.
Describing the user
User types
Sporadic day to day flower buyers
Customers in need of event services like weddings and others
Special day buyers (Valentines, Mother’s day…)
User goals
Day-to-day flower buyers want to quickly purchase flower arrangements and get them delivered without having to go to a flower shop.
Engaged couples and event planners want to be able to look through the shop’s website to see previous events and contact the shop directly to get a cost estimate for their event.
Special day buyers want to see season items and buy them directly on the online store and get them delivered without going to the shop.
Site Map
After going in-depth to understand the goals of the project and the users it is aimed to serve, I and the client established a good site map for the site.
User flows & Wireframes
Based on the user needs I and the client envision 3 main user flows for the app:
Buying a flower arrangement as a sporadic customer
Asking flower shop for wedding cost estimate
Asking flower shop for event (reunion) cost estimate
Then those 3 main flows were hand-drawn as low-fidelity wireframes to start the creation process based on a mobile- first approach.
The high-fidelity prototype was tested with potential users and the app was updated based on feedback. All updates were coordinated with the client to be sure we were going in the right direction.
See below user flows and the evolution on a few selected screens from low to high fidelity including updated wireframe after the user test!
User Testing
Based on the high-fidelity wireframes and prototype, 5 people participated in a user test of the functionality and design of the website to ensure its maximum potential.
The test goals helped me confirm the user types and goals described at the beginning of the case study, as well as update user flows based on input received during the test.
User test takeaways
All participants found the website well designed and easy to navigate. They like the fluidity of the site and the organization. They really liked that a local flower shop could offer their services online to facilitate purchases for customers.
They also liked the ability to look at previous work of the shop in diverse types of events and contact the shop through the website.
Good insight and feedback was received to improve the functionality of the site.
Future Iterations
Replace “Cuidados” and “Reviews” buttons with third priority buttons
Consider adding a section for store information & history, and moving reviews to that section
Consider moving weddings to events section depending on current flower shop clients
Consider adding store information at bottom of mobile homepage
Add search bar and price filter
Update “Checkout” to “Realizar compra” or similar
Consider moving store sections to the top of the page
Display all event types including weddings
Eliminate “Contáctanos” button at top of events page and add it at the bottom
Checkout feature
One of the main features of the flower shop is the checkout when ordering an item, or multiple items from the store. Based on the needs of the client, we decided that the best was to have the flexibility to pay by card, PayPal or cash (through Mexican service by Oxxo or when paying at pickup in the store).
See the checkout process in more detail below:
