Bather: Web Design + Brand Asset Creation
Designing and documenting design assets for Bather’s e-commerce tools.
Bather is a Toronto-based streetwear Brand focuses on offering modern and chique summer swimwear clothing to North American customers.
I collaborated with the Bather Team to develop several enhancements based on their interface needs. I made sure to keep their brand identity in mind while delivering assets for various mediums, ranging from social media to printed materials, and website design, and design documentation.
Please note this is a limited case work, as under NDA I cannot show the whole scope of work.
Website
contributions
design consultation, web design, ui/ux design, research, design strategy, social media
Tools
figma, illustrator, after effects, indesign
duration
oct 2023 — nov 23
intro
As the In-House Design Intern, I was handed to work on several components of Bather. In the first quarter of my work at my time, I worked on their website.
During my time at Bather, I worked on the User experience of their website, I created documentation and a complete design system for their Shopify e-commerce platform.
To do this, I worked in tandem with their Shopify platform while working on recreating design assets for internal documentation, research, and branding. I also worked with the team to understand the target audience and the company's needs.
Delving Into Research
In collaboration with the Operations Manager, we developed design documentation and systems for our website, referencing industry standards and best practices. We analyzed various fashion websites, focusing on CTAs, layout design, and user interfaces to be then translated into mid-lofi wireframes.
Designed assets through an agile, scrappy process to iterate constantly.
Created Mid-Fidelity Wireframes for their website, which included layouts, interactions
Mapped and reorganized Bather's website content through Site Maps + Information Architecture.
Competitive Research
Design System Components
The primary focus in developing Bather’s documentation was understanding how to strategize around their pre-existing branding. Although their internal design system was not yet established, the redesign of the Bather website relied entirely on their Shopify Theme. This meant that all design decisions had to align with the existing brand elements, ensuring consistency and coherence throughout the website.
This included me asking questions for various key members of the company, and seeing what they knew and how they operated.
Design System
Mapping Insights
As I was preparing to create content, I recognized the significance of ensuring that the content about Bather would be visible to a wide range of stakeholders, including website developers and prospective customers. I understood that it was essential to craft the content to grab their attention, engage them, and easily understand.
Bather has varying ways how to strategically market their content, so I mapped their website too include potential points of navigation, , content, and flow in order to be easily accessible, understandable for every party involved.
Information Architecture
Web Page Creation
After initializing the main body or research work, I focused mainly on developing the new concept pages for the Product, Journal and Stockist pages. My prime objective was to ensure that these pages were easily accessible on all platforms, be it web, tablet, or phone views.
These pages served as concepts of hierarchy that could be used to help deliver their content in a more accessible way.
Brand Asset Creation
The Bather brand embodies a fusion of classical typefaces with modern design elements. As I worked on creating additional internal assets, I incorporated the usage of photography paired with typography that stayed true to their existing brand system. This helped to ensure that their content remained cohesive and didn't feel disjointed. By doing so, the brand could introduce new clothing lines to their social media and brand kit while maintaining a consistent look and feel.
Final Thoughts
This marked my initial foray into the fashion industry, specifically in the capacity of an in-house designer. The timing of my arrival coincided with the Black Friday season, adding complexity to the situation. My lack of familiarity with the industry and its operational structure initially left me feeling overwhelmed and disoriented. However, with the guidance of my manager, coupled with consultations with various web developers to obtain consent on my design decisions, I gained confidence in my abilities. Instead of doubting my capabilities, I viewed every conversation as an opportunity to learn and grow.
Feedback
Manager - Marc Gamboa
• Regarding Lyndon’s web design research and pitchdeck, he went above and beyond to best communicate the changes we wanted toimplement by not only mocking up the design of our potential website, butmocking up the functionality, making it very clear and easy to understand forany developer taking a look at this project.
• Lyndon definitely takes initiative by not only completing tasks thoroughly, but going beyond the expectation of the task by providing more research and design input.