All Seasons Florist INC was established in 1997 and provides same-day floral and houseplant deliveries in Rockville, Maryland. As a member of FTD Florists, it also delivers flowers internationally. With quality, value, and professional service, their mission is to exceed their customers' expectations by providing convenience, safety, and security 24 hours a day online.
This was a UX/UI project where we were involved in the entire process, from research to prototyping. We collaborated remotely as a team of three, conducting weekly meetings via Zoom and documenting our progress throughout the project.
The stakeholder in this hypothetical case has an unorganized and outdated website for online sales. As such, it needs to redesign its website based on information architecture to boost online sales.
In the first phase, we checked current customer reviews on Yelp and Shopper Approved of the All Seasons Florist INC website in order to learn more about the shop's condition.
We have included a screenshot of each of the four main pages on it. We numbered the areas we believed needed improvement on the picture. We have listed them with the possible solutions below it.
Since we didn't have the opportunity to interview the customers of this e-commerce, we created an online survey to assist us. Participants who said they were interested in buying flowers or plants received our survey link. We received 58 responses in total.
Based on our analysis of the competitors, the current website has two strong aspects: same-day delivery and offering three bouquet sizes. However, several features are lacking, which are outlined below.
We brainstormed possible features that could be added to the project (especially those identified through competitive analysis), we prioritized the ideas based on their constraints and benefits to the design, as shown in the final decision prioritization matrix below.
We analyzed the entire shopping process for the current website, including the actions, thoughts, and feelings of potential customers.
We created a persona and a scenario to visualize the information we gathered during our research.
Below is an illustration of the scenario in a storyboard.
We designed a user flow that illustrates a basic purchase journey from beginning to end.
This gave us an understanding of how users might interact with the website and navigate through their goals.
In the open card sorting process (provenbyusers.com), 8 participants created their own categories. With more observations and experiences as part of the UI course, we realized there were flaws in ou design for this project, including the ease of navigation in the nav-bar, so we redesigned it. Below, you can see two different versions of Sitemap we created:
Wireframes were designed based on findings through user research:
These pictures and descriptions show the changes made between the first and final wireframes.
As a result of this A/B test, we changed the product details design from option A to option B, as users did not want to scroll. Furthermore, they preferred the design of the two separate buttons for continuing the purchase (Add to Cart – Buy Now).
It was decided to choose design B since participants preferred all selected items to be diMost of them preferred to look at the sort section to see which products had received the highest ratings based on customer reviews, so they chose design A.splayed together in the filters sidebar.
We used the Maze tool to test our prototype with 7 participants. Let's see what happened.
According to version 1 of the Maze test, most users clicked the “Add to Cart” button, while for the task we defined, we expected them to click the “Buy Now” button. Therefore, we created a path for the “Add to Cart” button which displays “Review Cart” so that users can be directed to the Shipping Cart process.
Our design solutions resolved many of the heuristic problems we initially identified and increased user success rates by 90%.
In this section, you can check out our complete final prototype.
