Hydra X Smart Bottle
Overview
For this project, I created a smart water bottle brand (Hydra X) and developed interactive prototypes based on research.
Goal: The goal of this project was to create an innovative yet engaging smart hydration product, along with its branding, some marketing materials, and the digital experience for the product.
Role: Graphic Designer (solo project)
Project type: User Experience & User Interface Design (UX/UI), Branding, Graphic Design.
Tools: Figma, Illustrator, Photoshop, Adobe Express, After Effects.
Challenge
For this project, the challenge was to design a digital experience backed by research that would appeal to a variety of people and be easy to navigate. It needed to be clear and adhere to the created brand identity, ensuring consistency. The same applies to any branding materials and promotional graphics that were to be created.
Strategy
I approached this project as if I were really developing the Hydra X Smart Bottle and its brand. I utilized bold typography, blue tones, and research to design something that reflects smart hydration.
I started by doing research on why a smart bottle would be a good idea and understanding the current market. I then designed and created the brand identity for Hydra X, a brand built on encouragement, progress, and a sense of fun.
Its dynamic blue tones not only reference water, but also symbolize a journey of personal growth and improvement—echoing the core mission of Hydra X: to help users become their best selves. By blending wellness with technology in a unique and approachable way,
Journey Maps
Now, with understanding the brand, I then utilized my research, and I created personas and customer journey maps to determine potential solutions to the pain points that the target audience may have, and any other features the bottle could include.
Personas & User Flow
To help visualize the flow of the user in completing the specified task, creating a user flow was useful. Additionally, making sketches allowed me to see the potential direction I wanted to take in designing the interface.
Wireframes, Prototyping & Testing
Minor changes were implemented to better align with the brand, while also taking into account feedback from my peers. This includes the use of brand colours, typography, and the Hydra X logo. In consideration of accessibility concerns, I designed the wireframes according to standards for mobile devices. I also put forth my best in creating smoother transitions.
Prototyping Development & High-Fi
Next was creating the wireframes, followed by the low-fidelity prototype, as well as some user testing. Testing for the low-fi Prototype was informal, where my peers were instructed to complete the task of finishing a workout and logging their water intake. After completing the task, they were free to explore the prototype and provide any feedback they had. Finally, I used the findings from testing to adjust the prototype and create the high-fidelity prototype.
Key Takeaways
Overall, I really enjoyed this project. To further enhance it, I could conduct more formal usability testing on my high-fidelity prototype. Additionally, I could add more features and pages to support a wider range of tasks. This project also helped me deepen my understanding of User Experience Design and the various methods involved in designing a product, from iteration to conception.
Of course, these methods are not just done for the sake of it; they have a direct purpose that helps meet design goals and ultimately leads to the best possible product for users.
