Sandino Brothers is a family-owned coffee company, founded by two brothers, Winston and Lenner Sandino. The Sandino Brothers produce premium, hand-picked, traditionally grown coffee beans at their family farm in Nicaragua. The coffee is grown and farmed sustainably, then shipped to Portland, Oregon where the green beans are roasted and sold at their roastery or their second cafe. Company values center on sustainability, equity and family.
Sandino Brothers’ website was functional, but not very user friendly. It was full of bugs, stylistically outdated, and inconsistent. I aimed to simplify and beautify the design, while improving the user flow of most tasks. As a small business owner, my client wanted to refresh the coffee shop's look and improve their website without breaking the bank. I assured the design was modular, simple, and easy for my client to handle without constant assistance of a developer. The designs are fairly basic and unembellished, yet elegant and inviting.
I created a user segment based on coffee industry research and Sandino Brothers' consumer base. Customers are ethical and curious consumers. They appreciate high-quality coffee that is produced sustainably and locally. They prefer supporting small businesses and drinking artisan coffee over chains like Starbucks. They aren't just interested in a good beverage, but also a good story. Learning about where products are sourced and the story behind the shop makes them feel more connected and loyal to businesses they support. Based on these findings and the segment, it became crucial to highlight the brothers' history, their farm, and their sustainability as a means of setting the coffee shop apart.
The original website's architecture was confusing, with a lot of pages and dead ends. I wanted to trim it down to the essentials, with focused actions. I ensured there were multiple access points to the new online ordering platform throughout the site.
I created a task flow for placing an order through the online ordering platform. It was a priority for both the client and customers that there was an easy way to order food and drinks online to pick up in-store or for delivery. The feature was paramount for a small business struggling to stay viable during COVID lockdowns. To avoid confusion and user error around delivery address or pickup, I placed the time and location prompt at the beginning of the flow. They are then brought to a product grid that accurately reflects availability based on those selections. Before checking out, users have an option to create an account, which can help improve customer retention.
The user flow and site map served as the blueprints for low fidelity wireframes. I used these wireframes to further refine my designs through prototyping and usability testing. I included notes on interaction design and functionality.
Inspired by the all-black design printed on the Sandino Brothers Coffee bags, I wanted to simplify the logo with fewer colors. This lets the organic shape of the S stand out more and modernizes the design.
I stripped down the color palette to two hues, giving it a modern, natural, and calming feel. The colors used are pulled from the original palette and adjusted to ensure accessibility and legibility. I selected typefaces with shapes that feel organic, contributing to the environmental ethos of the brand. The photography tells the story of the coffee shop, showcasing the farm and landscape in Nicaragua, the roastery in Portland, and the people behind the scenes every step of the way. My own hand-drawn illustrations further the natural and home-grown character of the brand.
I used my brand guide and wireframes to design a UI Kit for the website. I designed the UI states for each components and established consistency with state style changes incase future components are needed.
The Sandino Brothers farm, family, and mission sets their business apart from all the other coffee shops in Portland, and it was important to honor that story. The homepage opens with the essential information and actions–the shop hours and a CTA to order online. This is proceeded by a breakdown of their values, spotlighting the company's family-operated, sustainable, and local nature. Popular products are showcased below with CTAs to see the full menu or order online.
The original Sandino Brothers site included their story as a large block of paragraphs on the homepage, creating an overwhelming amount of information that cluttered the user experience and caused people to quickly scroll through. I wanted to allow people to read about the Sandino Brothers without these pain points, so I created an Our Story page and broke up the story into three sections describing the farm, La Finca Odisea, their family, and their mission of sustainability and ethical practices.
I included a menu page separately from online orders to allow users to explore offerings without entering a transactional flow. The site's navigation is very simple, with a flat hierarchy outside of the ordering platform.
I placed the time and location prompt at the beginning of the flow to avoid confusion and user error around delivery address or pickup location. This also ensures that the product grid accurately reflects availability as product stock is updated at each location. Users are able to schedule deliveries or pick ups ahead of time, alleviating stress for the many customers who visit Sandino coffee on their morning commute and lunch breaks. Throughout the flow, the time and location selections are omnipresent at the top of the screen to deter user error.
Customers select size, temperature, milk, and any other modifications they'd like to make on the product page. When they add an item to the cart, an updated modal of the cart slides out from the right. This provides additional validation for the user, and gives them the option to continue straight to checkout. Users are prompted to either sign in, create an account, or to continue as a guest. This step is included because research indicates account creation improves customer retention.
