Many potential customers such as my persona, Leona, are busy individuals who cannot find the time to flower shop in person, and often struggles to find online ordering services for local stores. Leona wants to support local businesses because she believes in reducing carbon footprints and supporting small businesses, but as a busy new hire, she cannot find the time or energy to go and find physical flower shop locations near her.
As this was my first project working through Adobe XD, I had to learn how it differs from Figma. I then conducted research on various existing flower-selling sites and took notes of their site's architecture.
I conducted two rounds of remote and unmoderated usability studies for this project. The first round was conducted with the low-fidelity prototype as soon as it was finished. The second was conducted with the high-fidelity prototype. Both studies' main goals were to test the general design along with the functionality, smoothness, and intuitiveness of the main user flow. Listed insights are based on priority from most to least important.
• Made Logo clickable to return users to home to help make the design more intuitive for users
• Users had expressed frustrations of being stuck at certain pages so all pages now have a return button, and the logo in the navbar to return them home.
• Users wanted more indepth interactions with the filter in searching for flowers so options have expanded to search products by ocassions, prices, colors, and type.
"Um, guess the logo doesn't work. How do I go back to the homescreen?"
• Added estimated delivery date/timeframe on confirmation page to be consistent through all pages, and help users know when to expect their product.
• The difference between "Shop Now" and "Shop Plants" is disorienting so the "Shop Now" has been changed into "Shop Flowers".
• Added prices of the items for the items under "Best Sellers" on the homepage to let users know more information beforehand.
• Increased font size of item's name in cart while checking out to help legibility.
• Participants wanted a more exciting color scheme
"Very simple. Everything made sense flowing from one page to the next and placing an order was really simple."
Some accessibility considerations that have come up and been implemented in the development for this app and its following usability studies:
• Font made easier to read, and increased contrast between texts and their background to help legibility
• Accessibility options at the bottom of the page
• Most, if not all, buttons have been given a title to assist screenreaders.
This was my first project working on website design, and partcularly focusing on responsive design. This project taught me a lot but most importantly, how to keep brand consistency and brand identity as well as the design principles of pattern, repetition, and proportion in mind. Keeping these things close to heart while attending to this project have helped me learn how to approach responsive design.
This app is still in its beginning stages of development. Moving forward, I hope to:
• Flesh out all the accessibility options available for users
• Create more screen sizes for more devices
• Conduct an accessibility audit by partnering with expert consultants to ensure we are a fully equitable platform.