Earth + City: Redeveloping Desktop and Mobile-responsive Website for More Efficient Communication
What follows is documentation on my group’s work from start to finish as we attempted for our third project with RED Academy to aid local health food business “Earth + City”, revamp their website to be more efficient and organized in its display of their various pieces of information (including a mobile-responsive design).
The Opportunity
This project marks my fourth major project as a working student at RED Academy, and my second opportunity to work with a real world client, in this case, local health food business “Earth + City” (which will be referred to in short form during this article as “EC”). As with my previous project, hi-fidelity development and UI design were items that factored into this work.
For this project, I had collaborated with Jason Ng, Vivian Ngai, Juhi Khatri, and Michelle Schofield (our collaborator from RED’s User Interface Design program). Together, we would be assisting Earth + City revamp their website, and to a certain extent, their image. Earth + City themselves are a local business, preparing and selling healthy food alternatives out of a kitchen facility in the Toronto neighborhood known as “The Junction”. Their mission statement is “…to enrich the health and sustainability of our local food community and economy,” before going on on their website to say “We prepare health, plant-based food in tandem with the Ontario growing season”.
Prior to our meeting with one of the co-founders, Cassandra Rizzotto, my team and I naturally engaged in some general domain research about the company, while others focused on broader domain research, I focused on their website and right off the bat, noticed some concerning design issues with their site. Highlights included:
- Images and text were difficult to read
- There was a parallax display that made scrolling downwards somewhat disorienting
- Most concerning, the experience of seeking out specific content on their website was not-at-all an intuitive one. Virtually all of it needed to be reorganized.
Between the above items, and information I learned from my group after our meeting with Ms. Rizzotto, we had a clear understanding of EC’s issues. Their company in general is about local food procurement, zero waste, and systems thinking, and their website was performing an inadequate job at showcasing all this. Additionally, naturally, they were seeking a cost-effective way to increase business, particularly, in the “off season” of farmers market activity — which is where there website comes in.
Together with my group members, I looked forward to striving towards creating a platform that would clarify, inspire, and foster understanding about their values and their food products. This way, their business as activist activities could potentially reach more people, and driver further business to their online store. More specifically, we would:
- Convey the business’s values, processes, and offerings in a compelling manner.
- Educate people about the benefits of sustainable foods.
- Justify the prices of the offerings by conveying the businesses and the offering’s values.
- Create a platform that makes people want to buy sustainable food.
- Create a platform that enables people to take action on the desire to consumer sustainable foods.
- Create and deliver a high-fidelity website user interface
Research
Naturally, this next phase of our groups work began with domain research. Viviann, having had some experience in the health food sector prior to this, focused her efforts on the subject of sustainable local food. Juhi performed research on the local food and beverage industry, while I had done some basic digging on EC itself as well as farmers markets that operate inside Toronto. In my efforts, I had noticed a number of basic details here.
Of the figures above, the list on the left highlights a number of general details on EC that would remain central in our work’s focus throughout the project. On the right is mention of the fact that in 2016, there were approximately 32 different farmers markets that operated in Toronto throughout 2016, while also highlighting the markets that EC themselves participate in.
Following this, Vivian and I spearheaded an effort to see EC in action, by visiting their kiosk at the Wychwood Barns farmers market. Our goal here was to:
- Get a sense of EC’s customer demographics firsthand.
- Observe what sorts of choices said customers were making with EC, and possibly in general.
- Get a sense of the atmosphere of the market.
- Probe customers about their general food shopping habits and possibly online food shopping habits.
Here Vivian and I conducted a short interview with the kiosk staff (our contact, Cassandra, was not present this day) before we engaged in some contextual analysis by standing at a distance to observe customers interact with EC. We followed this activity up with several informal interviews with these customers to inquire about their food-shopping habits before circulating ourselves through the rest of the market to observe what was offered. Things we learned from this visit include:
- The market is a highly social environment for people and families of all ages
- There’s a high volume of exchange of ideas and products
- Customers will grab food for the week and / or a quick and immediate snack
- EC’s customers were divided between regular customers and new
- Customers shopped primarily for health food, followed strongly by food that tastes good
- Customers didn’t prioritize EC’s local / sustainability beliefs in any significant way
- Same with website
Of particular note is customers’ reactions to EC’s website. A significant number of customers either were aware of their website and it’s online offerings but didn’t use it / find it useful, or were not aware at all that it and its online store even existed. After this experience, I and the rest of my time were beginning to get a clearer picture of the fact that EC were not communicating very well their social activist message(s) nor their online offerings very well at all, and that this was a significant pain-point in their business operation. If EC was to compensate for their dive in revenue in the farmers market off-season, this would clearly need to be remedied at some point in this project.
A few days after this, I, with the rest of my team, had also visited EC’s kitchen facility (and main base of operation) located in the Toronto neighborhood known as The Junction. It was here that we as a team were able to gain a clearer understanding of their operations and motivations. I personally came away with some interesting notes. My time here reminded me of my research efforts at Wychwood Barns, more specifically, I was reminded of the fact that people go to farmers markets for a collective of kiosk destinations, so I posed a hypothetical question to myself, “How can Earth+City contribute as much as possible to customers’ market goals?”. Additionally, I learned that their primary client base is affluent mid-to-upper class families. From our conversation with Cassandra, I sensed that EC might be a little self-conscious of their packaging and branding, and that they’re also feeling held back by their limited delivery options for customers — currently, they only offer deliveries twice a week through a bike courier the contract out to.
And of course, part of the work that factored into our research was our user experience survey.
The survey highlighted again the fact that when shopping at farmers markets, that taste, quality, price, and health benefits were all important factors. As was the factor whether or not the food was fresh and locally owned & produced. Additionally:
- People generally find farmers markets very appealing
- Go maybe once every 1–3 months on average
- People rarely buy ready-to-eat food online, but when they do, it’s out of convenience way more than anything else.
Finally, although I wasn’t involved in this myself, my group-mate Jason conducted a small competitive / comparative analysis between EC and three other companies (Lululemon, Ben & Jerrys, and Kickstarter) that also also happen to promote their social advocacy activity through their business with customers. This was done to get a sense of what aspects of EC could be remodelled in a particular way to mimic the success of business that successfully made similar attempts.
It is all these research findings that directed my group as we moved out of our research phase and into our planning phase. To reiterate the goals laid out in the initial section of this report, we knew that our effort to redesign EC’s desktop and mobile website, we would have to be inclusive of the fact that their business as activist message was clearly communicated in a compelling manner, that customers were educated on the health and social benefits of their food, that customers were more easily directed towards their online store which offered more convenient shopping solutions than what was offered at that point. EC’s food was and currently remains customers’ primary access point to their overall identity, and from this point on in our work we would aim to facilitate access to all of EC’s values through this primary access point. Whatever we would design, that would have to remain the priority.
Planning
It was at this point that I and the rest of my team saw two large issues that needed to be sorted out and prioritized from the get go in order to minimize complications further down the line. EC had two large priorities when they came to RED Academy and us for help, priorities that remained even up this point and beyond our involvement. First was that they needed to increase customer traffic flow to their online store so that they might increase revenue. Secondly, that it was important to them to promote their “business as activism” social advocacy work, by which I mean local and sustainable healthy food. Being socially responsible is important to them, as is clearly illustrated outside of their business work, in their efforts to support the local LGBT community in Toronto. While EC had these two large priorities to juggle in their future, my group-mates and I had decided that the larger priority was their food. For this was to be the gateway medium in which customers would be exposed to EC’s larger activist activities, such as how Ben & Jerrys promotes Fair Trade ingredients, modern climate science, marriage equality, and peace building.
From our research results materials, we had come up with our main user persona, “Sara Miller”. She would be our target customer case in our work.
Additionally, we were also considering an alternative customer type that EC regularly deals with, the “new customer”. This individual is not necessarily all that familiar with EC and / or its products, and is first looking to find out more before engaging with them. Our goal is to allow them to learn more about the EC and its products, to pique their interest enough to motivate them to visit in person at a farmers market or to engage with ECs website. Following this, we had also began deciding as a group what changes to the appearance of the website would have to take place in order for it to look more attractive to the customer and more efficient to use.
As you can somewhat see from our collective whiteboard design work and my initial simple hand-drawn sketches, larger more colourful imagery was being called for in both the mobile and desktop design. As was clear and easily visible text. Image / text carrousels were also being considered as a means to optimize the amount of information being delivered while minimizing the amount of space that might need to be utilized in the process.
We had also decided that we needed to address the following aspects of the website redesign:
While these issues were beginning to be addressed and discussed amongst my group-mates I temporarily took leave to conduct drafts of sitemaps for ECs then-current website…
…before we eventually settled on a final draft of a website sitemap for our redesigned version of their website, seen below.
If one compares the sitemap to EC’s original website to what we would eventually settle with, one will notice that we saw a great need to reorganize the placement of a lot of their content. Originally, their website was not designed for as an intuitive experience as it could have been. When we had conducted user tests people were not finding information where they expected it to be. We aimed to correct this to greater maximize efficiency-of-use of their website, and to reduce drop-off rates of users that may have chosen to take their business elsewhere.
Design
The design phase for this project proceeded much as it did with my previous project. Knowing we had a mountain of design content to produce, I and my team split up work of various sections of the website. I had begun my mid-fidelity mockup work with the “catering” section of the new EC website.
In regards to the desktop design, I was personally a fan of the second option, in which the positioning of the content & image pairs alternated with each line. I felt this made the page seem more dynamic and lively, and allowed each product sub-section to appear more distinctively divided amongst other sections. Unfortunately, the issue of space consumption came up in discussions with the group, and we decided to alter the design somewhat.
While the columned content was considered nice and attractive by the majority of my group, it was collectively decided in final moments that it would be a more efficient use of space were we to switch to a collapsable “accordion menu”-style of interaction, as seen in the high-fidelity screens put together below with the cooperation of our User Interface student-partner Michelle Scholfield.
I was also responsible for designing the communal kitchen rental section of the new website.
Which resulted in some beautiful final work:
You’ll notice in the transition from the mid-fidelity to high-fidelity that pricing and listing information was removed. Given that rental circumstances are subject to change depending on a clients needs, it was decided that it was impossible to suggest a consistent rate or level of detail on the space, and that whatever arrangements to that effect that might be necessary to discuss would have to be done on a case-by-case basis.
Prototype
Prototyping was a long and complicated process that experienced a hiccup or two along the way. These came mainly from minor disagreements over the logical flow and usage of the website
Desktop Prototype:
Mobile Prototype:
As you’ll see from the prototype, a number of things were made clearer. There are two clear Call-To-Action buttons on the homepage to allow customers to more quickly and directly engage with EC. There’s a hero image, highlights of their impact values, customer testimonials for various EC products, a more clearly organized sitemap, and more accessibly social media button links.
Navigational location of the mobile version is made more clear through the use of “breadcrumbs” at the top of the page (ie “Home > Shop Now >…”), and while this is also done in the desktop version your location is also specified in the top nav bar by subtly underlining the heading of the section the user is in. EC’s Instagram feed is more clearly pronounced through some minor labeling.
An entire section of the website is dedicated to the environmental and social impact of their work (including metrics), and is efficiently organized through the use of collapsable accordion menus. Impacts and initiatives are ordered in level of likely importance to the user
Accordion menus are also employed in the Catering section due to the large volume of organized information in that section. There’s also a clearly dedicated section for finding EC at farmers markets, other retailers, FAQs, and contact methods, making sure it was easy to use as possible.
Food items in the store have more nutritional information written along side them, as well as some informational bullet-points that helps customer understand the positive impact being made for themselves and others when purchasing this product. We added a web-store exclusive item, the sampler box, both to help facilitate greater amounts of user traffic to the store by people that aren’t entirely familiar with EC, and to help make for a more cost effective solution for both customers (sampler helps customers reach the minimum order total for deliveries) and the company (bigger orders / deliveries); packages would also be cheaper than ordering a multitude of individual items.
Summary
Earth+City came to my team and I seeking out help with a challenge they wanted to overcome. From a business standpoint, they were seeking out a way to offset a significant drop in revenue in the offseason of farmers market activity by driving a greater number of customers to their online store. Additionally, they felt their current website wasn’t adequately displaying their collected values of local food procurement, zero waste, and systems thinking. These are at the heart of what they do, yet they weren’t coming across very well.
In the course of our research we discovered that EC is basically dealing two types of customers, regular visitors to their farmers markets appearances, and those that just wanted a specific product or two and didn’t really know anything about the brand they were purchasing from. Regardless of the type, some customers knew somewhat about the website and had no use for it, or they didn’t know about it at all.
Future considerations Earth+City may wish look into the future could include subscription boxes, online store exclusive items in addition to the sampler box, fuller and more prepared meals, and more targeted marketing of their catering services.
I and my team felt we presented solutions to both the problems Earth+City presented to us, as well as other minor ones discovered during the development of this project. We created a platform to clarify, inspire, and foster a greater level of awareness of both their products and their values, believing what we accomplished to be the optimal way to communicate what’s important to them while at the same time enabling them to make more smarter and informed choices to drive increased traffic to their website and thus generate greater levels of income. In fact, following our presentation, Earth+City was so satisfied with our work that they followed through with plans to have our work fully developed by students from RED Academy’s web-development class and marketed by members of the Digital Marketing class. Another job well done.
