Overview: For this project, I created a smart water bottle brand (Hydra X) and developed interactive prototypes based on research. Role: Graphic Designer (solo project) Project type: User Experience & User Interface Design (UX/UI), Branding, Graphic Design. Tools: Figma, Illustrator, Photoshop, Adobe Express, and After Effects.
The Brand Identity
Hydra X is 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, Hydra X makes tracking hydration habits intuitive and enjoyable. With a fresh, modern aesthetic and a commitment to positive change, Hydra X empowers everyone to “hydrate smarter and live better,” as our slogan proudly states.
The Idea
Research: Personas + Competitive Analysis
The Casual Gym Goer Persona
The Active Student Persona
Competitive Analysis Chart for Hydra X
Research: Journey Maps + Conclusions
Based on the research, including the customer journey maps, Improvements should focus on improving measurement accuracy and enhancing the user experience by making the bottles more adaptable and flexible. Additionally, eliminating the need for companion apps and consolidating all functions into a single device would improve usability. Enhancing security and the metrics being tracked is also essential. Furthermore, incorporating voice activation features could improve accessibility. The detailed Customer Journey Map for Eloise can be found HERE.
Ideation: User Flows + Sketches
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.
Hydra XStrategy
Hyra X User Flow
Hydra X Sketches
Prototyping: Wireframes + Low-Fi + 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.
Sign In Screen
Hello Message Screen
Log Drink Menu
Drink Selection
Post Workout Summary Screen
Workout Selection Screen
During Running Workout Activity Screen
Main Menu
Prototyping: Development
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.
Included in the hi-fi version of the home screen was a notification bar positioned just above the menu items. This was added to simplify the experience for users, allowing them to quickly see key information about their water intake when needed.
Initially, the "Welcome" was at the top; however, I’ve moved it below the logo for proper hierarchy, as the logo should be seen first by the user to help improve awareness.
Not much changes in terms of development here; however, there is more implementation of brand typography and colours.
Incorporated in the final design is the acutual percentage of completion for the users goal
Introduced recent workouts so the user could easily see past workout history and its parameters, or repeat a past workout if desired.
Protoyping: High-Fi
Hello Screen
Sign In Screen
Workout Completion and Post Workout Main Menu Screen
Drink Selection Screen
Drink Notification
Workout Countdown Screen
Running
Running Workout Screen
Water Log Confirmation Screen
Post Workout Screen
Workout In Progress Screen
Workout Goal Completed Screen
Water Log Screen
Home Screen
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.
