Heat Packet
Easy, Secure, Affordable
Role
UX Designer
Tools
Team
Software engineer
Product manager
Problem
Shipping live reptiles can be a challenging and expensive process for both hobbyists and businesses. Many face difficulties in finding affordable shipping options, ensuring the animals' safety during transit, and accessing reliable information on proper shipping procedures. Heat Packet needs the help of designers to help navigate through efficient user experience solutions.
Solution
As a team, we designed new screens to be added to their website to improve the user experience and make the products more visually appealing. The platform educates and informs users through valuable resources such as packaging guides, temperature guidelines, and FAQs for successful shipping and business growth in the reptile industry. To make the platform user-friendly, the website needed to have clear navigation, and streamlined check, and search functionality implemented in the design.
Project Kick-Off
At the beginning of the HeatPacket project, we organized a team kick-off meeting to establish a thorough grasp of the project's scope and goals. In this session, we conducted a meticulous examination of the resources furnished by the client. These resources encompassed competitors of HeatPacket, a presentation pitch deck, and information about their products. These materials provided invaluable insights into the current status of the HeatPacket website and the client's aspirations for enhancements.
Questions for Client
To ensure the creation of an exceptional product, it is essential to ask targeted questions that aid in understanding the client's objectives for each stakeholder and their desired content for the website. Fortunately, the client responded promptly, allowing us to review their feedback, identify crucial requirements, and clarify specific textual elements that needed incorporation.
User Stories
The foundation of our flows was built upon the user stories provided by the client.
User flow
My team and I wanted to strategically amplify user interaction by fostering a gratifying and intuitive experience across the entire platform. We added screens to help with the flow of the existing pages on the website.
User flow 1
User flow 2
User flow 3
Mid-Fidelity Wireframes
Upon receiving approval for the User Flows, we proceeded to initiate a comprehensive redesign effort. Our approach involved segmenting each flow within the existing sections and developing medium-fidelity wireframes, which served as visual representations of the proposed new design for the client's review. Our objective was to enhance the visual appeal and screen hierarchy.
During our regular weekly meeting, we conducted a thorough review and discussion of each design, focusing on the screens that garnered general approval. Additionally, we meticulously selected features from various screens to amalgamate them into a final design that garnered unanimous agreement and satisfaction from the entire team.
Color Exploration
Color exploration as a team transcends the realm of aesthetics; it's a strategic endeavor. Each color chosen has the potential to convey specific messages, evoke emotions, and guide user behavior. Through open discussions and debates, we can harness the power of color to align with HeatPacket's mission and resonate with our target audience.
Style Guide
We enhanced our style guide by staying true to the brand and the chose the colors based on the color exploration.
High Fidelity
Continuing our work on the familiar screens we've been refining, my teammate and I focused our efforts on user flow 1, which we had previously addressed. We made sure the design was user-friendly with proper color application and proper hierarchy.
We communicated efficiently as a team and asked questions when needed. We hopped into Figma calls to update each other on major changes and go over the final design before submitting it to the client.
Client Handoff
Our team has delivered an extensive developer handoff package tailored for HeatPacket. This package includes exact measurements and informative annotations, designed to be a valuable resource for understanding our complex design process.
Within this package, you'll find pixel-perfect measurements covering both prominent and subtle elements across the entire webpage. We also added annotations about each page.
Looking back
I had a great experience collaborating with HeatPacket to enhance their website with user-centric solutions. From the beginning to the end of the project, my team and I worked with exceptional effectiveness and efficiency. Throughout the entire project, our collaboration was built on open and consistent communication.
Next Steps:
Creating a Prototype:
Building upon the foundation laid by our user research and preliminary design concepts, our next pivotal phase involves the transformation of our ideas into a dynamic prototype. This prototype will breathe life into the design, emulating user interactions and showcasing the application's flow and functionality. We will craft a navigable interface that closely mirrors the ultimate product, facilitating the validation of our design choices, the collection of stakeholder feedback, and any essential refinements before advancing to the development stage.
