Florist Toledo is a responsive web design project for a fictional florist shop located in Toledo, Spain. This is a personal project as part of my Google UX design certificate.
It was developed based on a design prompt from Sharpen. The website design consists of both a desktop version and a mobile version web design. The website provides an online ordering function and subscription for recurring orders.
Prompt: Design a flower-ordering website for a florist in Toledo.
ABOUT
THE PROJECT
My role: UX/UI
Timeline: 2 weeks
Project year: 2021
Conceptual project
DESIGN
PROCESS
Users
Florist Toledo's primary users are residents of Toledo with the need to order flowers online. In addition, the web subscription function targets business owners, corporate customers, and event planners who have frequent needs to order flowers. For those users, a periodical subscription will be more convenient.
Research findings
I conducted survey research online to investigate the target users’ preference on flower subscriptions. I collected some valuable insights such as business owners’ needs, how often they needs flower delivery service, and their budgets for subscriptions.
User story
As a Busy restaurant manager who needs to change the flowers twice a week, I want to have a convenient flower subscription and make changes easily so that I can prioritize my time for other tasks.
Problem Statement
Monica Adler is a busy restaurant manager and owner who needs to order weekly flowers in batches with customizable options because she wants flower subscriptions to be easy and stress-free with the freedom to choose.
Persona
I created persona based on the information gathered. Monica Adler, a restaurant owner and manager who lives in Toledo, Spain. She orders flowers for the restaurant using a flower subscription service. However, the current service provides very little flexibility. She has to spend a lot of time communicating and purchasing extra to fulfill different needs. She was hoping for an easy, time-saving customizable flower service.
To make the flower-ordering process effortless and enable subscription option and recurring orders.
The subscription includes home delivery, office delivery, restaurant, and event styling service. To set the flower-ordering service apart from regular florist websites, the design emphasizes the effortless ordering process, recurring orders, and subscription options.
DESIGN
PROBLEM
In the ideation stage, I sketched out brain-storming ideas and wireframing ideas on paper at first.
I created a sitemap based on the functions and overall content of websites.
SITEMAP
In this stage, I created digital wireframes in Adobe XD
WIREFRAME
D E S K T O P & M O B I L E
High-fidelity Prototype
Link
Reflection
Usability testing
Usability testing showed that users had no problem in navigating or placing an order. Presumably, the navigation menu and order process conforms to the norm and will be familiar to common users. However, more usability test needs to be done as visual details and site information archetecture (on-float 2nd level menu was only available on high fidelity prototype)
Accesibility concern
Contrast checker was used to check contrast and color accessibility of the website design. The result suggested that contrast ratios on every screen are legit and readable. Additional functions such as ALT text for screen readers was also included. Usability testing for users of assistive technologies will be performed in a later phase.
Visually appealing vs. readability
It is without a question that visually appealing is not to be celebrated at the cost of reduced readability or usability. This case study tries to combine visual appeal with adequate readability and to make the style in accordance with the design of the website. The contrast level is acceptable however can be further enhanced if necessary.
What I have learnt
The most important thing I've learned from this sharpen project journey is that comforming to norms and following successful UI patterns is extremely important in designing responsive website, and that practice makes perfect.