Responsive website for a flower ordering process
Project overview
The problem
Users want to easily order flowers for different occasions.
The goal
Design a responsive website that let the user choose easily from different options to order flowers for their special event.
My role
UX designer designing a responsive website for a flower-ordering process.
Responsibilities
Conducting user research, digital wireframing, low and high-fidelity prototyping, responsive design, conducting usabilty studies, accounting for accessibility, and iterate on designs.
Understanding the user
User Research
A primary user group identified through research was people who need flowers which fit various occasions and can be ordered quick and easy. Another primary user group are people who want to present others with flowers.
User pain points
Mobile option
A mobile version of the website is needed.
Choices
Too many flowers to choose from, there are no good filter options.
Starting the design (using Adobe Xd)
Paper wireframes
This time I only made one screen as quick scribble and continued already to the digital wireframes as this is more comfortable for me.
Digital wireframes
Confusing icons
The usabilty studies revealed that some users aren't sure what the icons in the drop-down menu mean.
Consistency
Furthermore the usabilty studies revealed that users wanted the design to more consistent.
Final mockups
High-fidelity prototype
Accessibility considerations
Icons were used to make mobile navigation easier.
Images for the products were used to help better understand the design.
A screenreader option will be available.
Takeaways
Impact
This website helps users find the right flowers for their needs and order them right away.
What I learned
When working on a responsive website you need to think of the different screen sizes and how to adapt the design that it is still consistent. This was quite difficult sometimes.