Annie’s Buying Club
Case Study user interface design, e-commerce, CMS, and Branding
Annie’s Organic Buying Club (ABC) is an innovative buying club that provides fresh high-quality organic produce at reduced prices. The club is membership-based. Although there is no cost to join, the members have a chance to buy a pre-defined set of organic produce (a share) each week. The company is a small homegrown project with just a few groups in Miami and slowly expanded to serve all of Florida with over 2,000 weekly active members, 5 delivery drivers, and 200+ group coordinators. They are looking to expand to serve the South East coast of the United States. By undertaking research, user interface design, and branding, I embarked on the development of a responsive e-commerce platform and a robust content management system. I created a website that would meet the goals of Annie’s Organic Club and its users.
Project Overview
CHALLENGE
Their current online system is a result of their organic growth and currently serves most of their business needs, but it is a source of confusion for many members because many pages, such as the subscription page, have too many tasks or the information is not clearly explained. Their payment options don’t work as desired, which results in cash and check payments not being posted or not knowing if members have paid for a share and therefore will have their share delivered on that day. Additionally too much time is spent on tasks that can be more automated such as the routing of drivers each week. ABC is also looking to automate the management of inventory for distribution areas.
SOLUTION
Case Study user interface design, e-commerce, CMS, and Branding
- Design a website that meets the goals of the business and user
- To reinforce all of the attributes of the brand by presenting an experience that is easy for consumers.
- A content management system that allows for easy updating and integration with current business processes.
branding
Before defining the overall structure of the website or the UI design, I worked on defining Annie’s Buying Club brand to effectively capture the unique brand personality online and offline.
Mood Board
To begin the branding process, I started by creating a mood board for inspiration and to set the direction that I wanted to take Annie’s Buying Club’s branding. I focused on finding different elements (color, typography, imagery, and logos) that aligned with their brand attributes: stable, socially responsible, healthy, strong, humble, and earthy.
Logo Design
With a clearer vision for the coop’s brand identity, I dove into crafting its logo. This involved brainstorming concepts that captured their core values – fresh, local produce and a sense of community. I then translated these ideas into a series of logo sketches.
Other collateral materials to reinforce the brand
Research
Crafting a winning strategy for Annie’s Buying Club starts with understanding the market and its customers. This involved researching user behavior, analyzing competitor sites, and even interviewing potential members.
Users
Understanding who the users are and what they’re trying to accomplish on the site is crucial to pinpoint their frustrations (pain points) as they navigate the system.
User Persona
For Annie’s Buying Club, where convenience meets fresh, organic goodness at great prices, a user-friendly website is paramount. To make shopping a breeze, I started by understanding the needs of busy families who prioritize healthy eating. By gathering this intel and understand each user’s needs, I could design a website that makes getting fresh, organic groceries a joy, not a chore. “
Defining the problems
Now that I identified our target users, it was time to define what actual problems I was solving based on what I learned about each user.
Building on what I learned about Lisa for instance, I used research insights to craft “Point of View” (POV) statements. These statements put Lisa’s needs front and center, framing the problems she faces. From these POVs, I generated “How Might We” questions to spark creative brainstorming and find solutions that truly resonate with her.
Brainstorming
Now that I knew what problems we needed to solve for Lisa, I started brainstorming to come up with solutions to those problems. I used the HMW questions to help me brainstorm different ideas through mind mapping allowing me to visually explore all the potential solutions.
Project Goals
Before making any decisions on what kind of solutions to implement, I needed to align the user goals with the business goals to ensure the project moved in the right direction.
Information Architecture
Site Map
With the most promising solutions in hand, I charted a course for Annie’s Buying Club. Using a sitemap, I meticulously planned the content structure, prioritizing a logical and user-friendly experience for all of our ideal users (personas).
Mid-Fidelity Wireframes
At this point, I begin to define what information is going to be presented on each page, and how it is going to be organized based on the project goals we want to meet.
High Fidelity Wireframes / Design
Once the wireframes are approved and stakeholder feedback is incorporated, we translate Annie’s Buying Club’s branding into a cohesive website design. This includes not just the look and feel, but also the functionality of the e-commerce platform and content management system (CMS). Every design choice made ensures a seamless user experience for online shopping and allows Annie’s Buying Club to easily manage their fresh produce offerings.
