Creating an e-commerce interface for a startup that aims to halt the destruction of the natural world
What's the problem?
Entocycle is a feed company that produces healthy food for farmed animals "the way nature intended". The recent startup believes that animal farming is destroying our planet, so they have created an insect protein alternative. By using Hermetia illucens (Black Soldier Fly), Entocycle is able to turn food waste into a protein feed for livestock and agriculture. While they may not be ready to sell this cost-effective alternative to customers quite yet, we have designed a hypothetical interface that would allow Entocycle to share their product. So how did we transform their website into an engaging and easy-to-use interface? Below, I will explain the process behind the design of our Entocycle app.
When we were sketching designs for this app, we wanted to focus on the company’s core mission of sustainably feeding the world. We believe that their website should fulfill this aim through two functions. It should explain Entocycle’s mission as well as offer people an ability to buy Entocycle’s product. Because Entocycle aims to serve all animal producers, the site should be accessible to all farmers, both big and small. We chose a mobile format to emphasize Entocycle’s universal availability, enabling farmers to purchase feed on the go.
Creating a High-Fidelity Prototype
The side menu corresponds to the two goals of the site. It is split into two parts, with the top providing access to informational material and the bottom providing access to shopping. We chose to feature informational links first because we anticipated that traffic would consist largely of first-time customers. The homepage establishes Entocycle’s mission while emphasizing the e-commerce focus of the site. We used alternating background colors and closure to split the page into three distinct parts. The eye is immediately drawn to the center of the page, where we explain Entocycle’s mission. The central placement of informational material aids learnability, an important feature for a burgeoning company courting new customers.
The header and footer of the home page emphasize the e-commerce nature of the site, with both the cart and “Our Picks” serving as strong affordances for shopping behavior. The “Our Picks” section allows the user to add an item to the cart with two total actions, providing a streamlined user experience that makes shopping easy. The “Shop” section can also be reached through the menu, requiring two more clicks. Additionally, the cart may be accessed from every page in the site, providing an easy remedy for shopping errors. The icon also signals the number of items in the cart. This feature removes a mental burden for the customer, as they can quickly note the rough size of their purchase. In sum, the concise page flow and strong affordances provide a memorable and efficient shopping experience.
Testing Our Prototype
Lastly, we wanted to perform user tests that could help us improve our design. We first introduced our interface and asked users to complete a few tasks. The feedback we received was very insightful. The testers were confused and found the shop page hard to find. One of the participants felt that the website was losing its purpose by hiding the “Shop” category and the other participant recommended putting a “Shop Now” button on the homepage. Another tester suggested that we add a search feature, but because there are only a few available items for purchase, we deemed this feature unnecessary. As Entocycle expands their selection, a search bar may become necessary.
Testers found it difficult to select certain items because only the text elements were clickable. To fix this problem and avoid user frustration and confusion, we would make the images interactive. The biggest comment that this tester made was that the side menu only worked on the homepage. Because of this, if a user were to click the menu icon on any page other than the homepage, the side menu would open, but the user would be brought back to the home page. We would fix this error by making the side menu accessible from all pages of the prototype. Finally, a few test participants mentioned that they liked the overall layout and design of the prototype, commenting that our focus on simplicity in both design and color scheme was beneficial.
What Will We Change?
As expected, the user testing results and feedback revealed some issues with our interface and indicated a need for several improvements. Firstly, we would change the location of the “Shop” button on the side menu. Almost every testing participant commented on this feature, and the low placement of the “Shop” category on the menu makes it harder for users to find. Secondly, we raise the prominence of the “Shop” button within the menu, making it the first or second choice. In addition to this change, we would add a “ShopNow” button to the home-page given that the goal of the interface is to allow customers to buy the protein products. Thirdly, we would make the images clickable and get rid of the sliders in order to eliminate any user frustration. We would make sure that the menu icon did not take the user off of their current page and back to the homepage. We would also make changes so that the red cart badge accurately reflects the number of items in the user’s cart. Finally, we would create a “Cart” screen to make the interface more complete.Overall, we found the user feedback very important to the improvement of our interface.
Designing this app was not an easy feat. While creating the sketches and prototype was challenging in a positive way, the user testing was frustrating but informative. Our user testing experience showed the necessity of iteration as users tend to hyperfocus on the most visible usability issues, possibly obscuring less acute design flaws. Despite this and the fact that there are always things to improve on, the process in its entirety was a challenge that taught us the importance of creating an interface with the user in mind.