Safety Straw is a health-technology startup developing the first color-changing straw that detects date-rape drugs in beverages. I was brought onto the project to design the company’s first full high-fidelity website, an informative, conversion-focused digital platform that communicates the product’s impact, educates potential users, and prepares the layout and structure for the upcoming development phase. My work aligned with the founders’ vision and integrated requested features, including an infinity-scroll layout, mission and product storytelling, store locator, merchandise shop, and user account pathways for both customers and businesses.
Overview:
Role:
Safety Straw
Create a complete, developer-ready website wireframe that visually communicates Safety Straw’s brand identity, mission, and product function. The design needed to support future features such as login access for bars and customers, merchandise purchasing, newsletter conversion, video integration, and an embedded map for certified locator searches. This required translating requirements, references, and business goals into a cohesive website experience.
Tasks:
This project strengthened my ability to transform vision into structure, especially when working with startups launching their first digital presence. I gained experience balancing clarity, persuasion, and functionality in a single interface. Most importantly, I learned the importance of detail-driven design, from consistent font usage to section spacing, because strategic visuals not only shape brand perception, but they set developers up for success.
Takeaway:
Conducting weekly check-ins with the co-founders to review direction, refine decisions, and apply updates
Designing a structured and visually consistent high-fidelity wireframe to match the intended final coded site
Establishing the visual direction, including interface layout, color palette, typography, and content hierarchy
Producing ongoing revisions post-completion based on feedback and new business needs
UX/Ui Desginer
Design Process:
Discovery & Requirement Breakdown
I reviewed the provided specifications outlining desired interactions, navigation structure, and inspiration references such as video intros, merchandise shop layouts, and store locator examples. Understanding how Safety Straw wanted users to engage with the site shaped the foundation of the design.
Website Specifications
Visual Direction & Brand Alignment
I developed a consistent color palette and typographic style that supported Safety Straw’s identity while maintaining clarity and accessibility, ensuring a cohesive look throughout promotional, informational, and conversion sections.
Safety Straw Website
High-Fidelity Wireframing
I created a comprehensive page-flow featuring product education, mission messaging, multimedia storytelling, merchandise browsing, and a future business login portal. Each section maintained a clear hierarchy to guide users logically down the infinite-scroll experience.
Iteration & Collaboration
Weekly meetings allowed the design to evolve collaboratively—responding to new ideas (like ambassador programs, blog strategy, and compliance considerations), while maintaining scope and prioritization.
Website Specifications