Stylish, vibrant, compelling website for fitness and wellness brand Ecofit H2O.
Client
Ecofit H2O
Year
2022
Services
Website design
Timeline
2 weeks
Limited scope, boundless creativity
Having delivered Ecofit H2O’s stellar packaging design, the company once again turned to me to get their website up and running. The challenge was a limited timeframe and dollar spend. They didn’t want to sacrifice the website’s aesthetics, but were working with strict timeline and budget constraints.
I wanted to make sure I nailed not only the final deliverable, but also did so within their specific scope and budget boundaries. I worked with the team to come up with a custom plan using a pre-built Shopify theme and strict brand guidelines, combined with creative visual design techniques.
Cutting corners without compromising
The first step of the process was finding a Shopify template that suited the company’s functional and visual needs. They needed a number of core features such as checkout, image sliders, and the ability to showcase detailed information such as nutrition facts. We also wanted to find a template that worked stylistically with the brand as a foundation that we could tweak and finesse into perfect alignment.
After a heavy amount of searching, we landed on a theme that fit all their functional needs and largely included stylistic choices that fit the brand. Choosing a template that got us halfway there allowed us to use the remaining project time to dive into creative visual design choices that helped exemplify the brand and product, while also designing and building any custom components that the theme didn’t include by default.
Wireframes
Once we had the Shopify template chosen and purchased, we immediately jumped into wireframe designs. It might seem like an unnecessary step backwards, but these wireframes helped keep the executive team focused on content delivery and user experience without getting too focused on color, image, and overall aesthetics.
These wireframes also gave me the opportunity to think through the custom site elements we were going to need such as an "accordion" product details section and tabbed content to deliver dense, but important product information. Keeping the visuals in a low-fidelity format allowed me to have targeted discussions with the team's engineer around code feasibility and make any necessary design compromises as we moved into high-fidelity mockups.
Speeding into high-fidelity design
As we moved from wireframes into high fidelity mockups, I recognized that time was running out and not every screen or device format was going to make the cut for final delivery. With the clock ticking and the budget dwindling, I took some decisive action to determine which screens, design elements, and responsive formats I prioritized.
I knew the team’s engineer would first and foremost need a clear style guide that outlined brand-specific elements such as colors and fonts. These design tokens would go a long way to personalize the website to fit the brand. I also chose 6 desktop and 3 mobile screens to deliver in high fidelity, focusing mainly on complex elements and behavior/states to help dictate functionality.
Conclusion
The Ecofit H2O website was delivered within strict project boundaries, but didn’t sacrifice any of the quality, functionality, or style that made their brand and product compelling. We implemented powerful elements, striking visuals, and a fully functional checkout experience and stayed entirely within the project’s original constraints. It was a pleasure working with the Ecofit team to deliver such a powerhouse product solution.
