This project was developed for Sweetpea, a London-based Florist located in Hampstead. The responsive e-commerce store is to help users quickly and efficiently place orders for delivery at any given time or location and on a variety of devices. I collaborated in a team composed of a full-stack developer and graphic designer.
It was integral to develop a thorough understanding of our user’s thoughts, goal and motivations; enabling us to create a store that met their needs & requirements. We began by producing a research plan outlining goals, target audience, methodology and schedule.
The goal of the research was to answer the following questions:
To assess the accuracy of assumptions held about our users we circulated a survey to existing customers. The results disproved our assumptions, exhibiting the user’s preference to order bouquets online (62.3%). A pattern emerged uncovering the dominant aspects effecting the user's choice of florists to be as follows:
We wanted to gain a better understanding of the reasons behind our user’s choices and identify what an ideal experience would look like from their point of view. The interviews verified the survey findings but also delved deeper into the pain points users were facing with current online services. To highlight our findings and plan the next stage of our research we compiled an in-depth research report.
Armed with a list of pain points we set out to discover if current services had developed solutions for any of the concerns raised, was there a gap in the market for a service tackling all pain points? We compiled a report using the Nielsen Norman Group’s 10 heuristic principles. Choosing to focus on these specific websites as they were repeatedly mentioned during interviews. We set out to answer the following questions:
Clearly a pattern emerged revealing a gap in the market for a service that tackled all pain points simultaneously. We could provide this by ensuring the delivery of the following:
To define our pain points into deliverable features tackling these issues we began by developing personas. Our users fell into two groups: full-time mothers and housewives. Both faced marginally diverse problems but these concerns overlapped. The personas served as a vital guide for our design decisions and prioritisation throughout the project.
We wanted to build a definitive picture of our users ensuring that they were clearly understood. This is why we used quotes from interviews and surveys to create empathy maps for our personas.
Delving deeper into our personas frustrations helped to steer the project in the right direction, where we decided the following:
To define the product needs into a list of deliverable features we implemented the jobs to be done framework. The process of considering our users’ motivations in various scenarios and their desired outcomes resulted in a better understanding of the features they needed to complete their tasks. The features are as follows:
To define the screens to be created for the site, we produced task flows mapping the user’s journey in searching, viewing and purchasing a bouquet for delivery. This gave us a clear view of the user’s journey enabling us to devise a straightforward and distinct process for them.
To push the boundaries of the existing sites layout and style we created a wide-ranging variety of wireframes. We produced a select few of the wireframes with adapted visual design and branding. Due to the time restraint, we worked on the design which adhered most to the current site but decided to reserve the designs for a future overhaul of the overall site design.
We needed to iterate fast and uncover any issues missed during the creation of our task flows which is why we sketched our wireframes on dotted paper by sneekpeakit. During this process, we discovered a few screens which were missing from our task flows.
We generated a rough first draft version using the Marvel app to test with users. During our testing, we realised there were a few confirmation screens missing. This overall process allowed us to focus on the most efficient solution without emphasising UI style and elements.
While creating wireframes we generated elements which weren’t included in the existing style guide, such as buttons for a call to action, secondary or completed actions. We produced a style guide specifically for the e-commerce store which worked in harmony with the existing guide.
Based on the initial sketches and newly created style guide we produced a high-fidelity prototype for searching, viewing and purchasing a bouquet in Sketch.
To ensure our e-commerce store was in keeping with the users’ needs we carried out usability testing throughout. As our time was limited we carried out 3 rounds of user testing focusing on the following tasks:
Usability testing directed our designs towards developing into a more user centred system, producing a seamless experience for users. Improvements included adding functionality to further guide people and discarding cumbersome ones.
I worked together with the developer to create a design language, applying my knowledge of HTML/CSS to create a system which streamlines the development of the prototype into a live site.
During the development, we again made improvements to the user flow and are working on the final touches before launching the site soon.