Our web team partnered on the launch of SagaV, a tarot-inspired premium mocktail brand, to create an online presence that matched its sophisticated, mystical identity. Balancing creative vision with technical execution, our two key deliverables were a set of Figma wireframes and a sleek, interactive website developed directly from these blueprints. We worked extensively with other teams, making sure to follow established color palettes, design assets, and brand content to ensure a unified vision. Throughout the project, we emphasized both UX-friendly structure and SagaV’s unique branding. We iterated through ideation and feedback cycles, continually refining our approach as challenges arose. The end result is a robust, responsive website that invites users into the rich, imaginative world of SagaV, successfully bridging thoughtful design and front-end execution.
From Inspiration to Implementation of the Tarot Aesthetic
Our ideation phase prioritized creative exploration. Each member of the team provided a variety of ideas for the project at hand, ultimately leading to three final choices for directions in which to head. We experimented in many different directions, whether it was creating a UX-friendly layout while maintaining a sleek aesthetic, or pitching various technical features that would follow client guidelines. While collaborating on the concepts, our team realized the value of such work as it helped to discard unworkable concepts and refine those that followed through with feedback we were given.
Wireframes in Motion: Mocking Up SagaV’s Tarot Platform
The web team’s primary objective was to translate SagaV’s tarot-inspired brand vision into a clear and engaging user interface, using Figma for wireframing and a simple development stack for prototyping. We began by breaking down required pages into lo-fi wireframes, including the homepage, product view and detail, a recipe blog, about, and a full checkout experience (D2C). Wireframes were shared with both the client and the other teams for feedback. As web development lead, I kept in contact with the UX lead as she and her team finished the high-fidelity wireframes, including assets from the Content team as well as following the guidelines set by the Brand Team.
Iterate for Impact: Evolving the SagaV Experience
Once our Figma designs aligned with client expectations, we focused on developing the website to match the approved wireframes. Our development stack included HTML, CSS, Bootstrap, jQuery, and JavaScript for the frontend, and the code was deployed via Netlify. Collaboration was possible through version control with GitHub. While transforming designs into code, we iterated heavily on responsive layouts, often adjusting the wireframe in real time to resolve discrepancies or technical constraints that emerged only during the prototype creation. As lead, I made sure to stay in constant contact with the rest of the team. Regular feedback from the other teams as well as client-prompted refinements created a polished site that successfully delivers on SagaV’s unique creative vision.
Guiding the Vision: Leading Development from Concept to Code
From the earliest sketches to the final deployment, my role extended beyond writing code. I acted as the development lead. Steering the team to stay true to the wireframes, I facilitated clear task division and consistency in implementation. GitHub management became a daily responsibility - resolving merge conflicts, assisting teammates with branching issues, and keeping version control clean. Code reviews for each page acted as checkpoints for functionality, flagging discrepancies early. My coding contributions included creating the lo-fi homepage, refining the product detail modal to match updated designs, and writing responsive styles that adapted seamlessly across devices. When all components were submitted from the others on the team, I oversaw the production deployment, testing page flows and verifying visual details before release. Lighthouse audits confirmed site readiness, ensuring accessibility scores aligned with project goals.
The product is a polished site that successfully delivers on SagaV’s unique creative vision. The team prototype is available for review at:
Top comments (0)