About
Octopod is an online retailer that manufactures and sells cables and chargers made from recycled ocean plastics and other low-impact materials. They seek to stand out in the personal tech market by foregrounding their commitment to planet-friendly design and business practices in a fresh, confident manner, and by making it simple for customers to find the products they need.
A bold visual style and stylized octopus mascot give Octopod a memorable and engaging personality while emphasizing the company’s mission. In addition to intuitive product filters and categorization, the site includes a chatbot that can help customers find products compatible with their devices.
E-commerce & branding
Bold, committed, fun
Bradford Prairie & Sean Bacon
2022
The visual identity uses an assertive color palette designed to stand out from the aquas and ocean blues that dominate the ocean-friendly market. Headlines are set robustly in Roc Grotesk. The playful logo and octopus illustrations temper these strong elements, giving Octopod a playfully dynamic personality.
Octopod’s mission informs the striking homepage hero, immediately showing customers that this is a brand with purpose. The site balances familiar e-commerce patterns with vivid colors, typography, and illustrations, and weaves the sustainable brand story into every page.
Octopod’s shopping experience is optimized across breakpoints, following a 12-column grid for larger screens and a 6-column grid for smaller ones. On mobile, thumb-friendly UI on the product details page lets the customer easily choose options and add items to their bag from wherever they are on the page.
Many customers find it difficult to determine which cables and chargers are compatible with their devices. Octopod’s customer service chatbot, Ollie, is a rule-based chatbot that can help customers quickly find the products they need by asking a combination of multiple-choice questions and questions made to prompt predetermined keywords.
In an effort to accelerate this project, I jumped from sketches to high-fidelity mockups, but later backtracked to mid-fidelity wireframes when I found I was slowing myself down by trying to solve too many design problems at once. The experience drove home the value of flexibility in the early stages of design.
I learned not to prolong the research phase of a project unnecessarily. I started this project by attempting to gain expert knowledge of cable and charger types, but later realized I hadn't needed such depth, and that I’d lost design time to superfluous study.
Placeholder
