Flower shop
Landing page | ORDER PROCESS
PROJECT OVERVIEW
The Product
bluebell is a flower store website.
The focus is on a clean fresh natural look, ease of use and versatility of personalization. The quality of the images is an important factor to stand out to customers, which the app already focuses on.
Key challenges
Users find it frustrating to be visually overwhelmed, they want to search for products efficiently and customize them according to their needs.
The Goal
Development of the home page and ordering process for the flowers store to provide better interaction and user flow for the user. It should feel very high quality, fresh, light, natural and elegant.
My role
UX designer designing a homepage and ordering process for the bluebell flower store from concept to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Target audience
Urbans, 20 to 60
UNDERSTANDING THE USER
In SUMMARY, users want to determine exactly what they are looking for and how, in order to place their order efficiently and flexibly. They value a light and appealing appearance. The order should be easy without any distractions.
34 | Berlin | College degree | MaisonetteWedding & Event Designer
Seraphine
is an early riser, getting up just before 6am, opening the big windows to the busy street, to feel the light and the breeze, to create order out of complexity. Like well-told stories, beauty is dynamic and always in flux, so she believes that rhythm is what keeps her creativity going.
Goals
High quality flowers at competitive prices
Being able to customize your own order
Frustrations
Shopping experience is not seamless
Difficulties with complicated settings and menus
User story
As an event and wedding designer, I like to order as versatile as possible so that I can individually tailor the atmosphere of each venue.
Problem statement
Seraphine is a busy event and wedding planner who needs a simple and versatile app to put together her own flower order, as she is not tech savvy and doesn't want to waste time.
STARTING THE DESIGN
DIGITAL WIREFRAMES
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
LOW-FIDELITY PROTOTYPE
Using the digital wireframes, I created a low-fidelity prototype. The primary user flow I created was to mimic an ordering process so the prototype could be used in a usability study.
Research Insights
P01 | Users need better guidance on what steps are required to find the cart.
P02 | Users need a more intuitive way to order a product.
P03 | Users need a quick way to move forward in the ordering process.
Research Goal
Find out if users can complete the main tasks within the app.
How long does it take for a user to order a product?
How long does it take for a user to find the shopping cart?
How easy is it to successfully complete the ordering process?
REFINING THE DESIGN
HIGH-FIDELITY PROTOTYPE
The final high-fidelity prototype provides a clearer user flow. It meets the users‘ need for a clear, easy-to-use architecture and a simple and fast ordering process.
MOCKUPS
ACCESSIBILITY CONSIDERATIONS
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Used detailed imagery and colours to help all users better understand the designs.
TAKEAWAYS
IMPACT
The app offers users a real help to put together their order easily and quickly and not get lost in the ordering process itself.
„The site is beautiful, I can easily understand it and get what I am looking for. “ Frances
WHAT I LEARNED
Through repeated interviews and improvement loops – the elegant and easy-breathing designs and the application of design principles – the app almost feels like part of a real product.
NEXT STEPS
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more research to determine any new areas of need.
Completing the app with the full range would be the biggest challenge.
