Problem Statement:
Woof N Go, a company that launched approximately two years ago, initially began its operations by offering its products through a third-party platform. However, they soon encountered several limitations associated with third-party platforms. In response, the manager of Woof N Go expressed a strong desire to establish their own dedicated shopping platform, with the primary aim of enhancing the overall user experience.
Role: Product Manager and UI Designer
I set the overall vision and goals for this project and fully understood the purpose of this product. I communicate with the manager of WNG on the designs and requirements and gather feedback, also defining the user interface, features, and functionality. As a product manager, I ensure that the most important aspects are developed. I also set milestones for the project and made sure everything stayed on track and met the deadline. I also communicate with the engineer in detail to ensure a clear understanding of the product requirements.
Background of Woof N Go
Through an online product selection store, Woof N Go introduces top foreign brands and local specialty pet products to all customers in Taiwan.
Woof N Go
Pet Product Shopping Platform
Prototype
User Flow Diagram
High Fidelity Design
Interaction Design
In my role as a Product Manager and UI Designer for the Woof N Go project, I introduced engaging interaction design elements to enhance the user experience and facilitate intuitive navigation. I implemented hover effects on the product page, allowing users to gain a deeper understanding of each product through interactive tooltips and enlarged images on hover. Additionally, I integrated a side menu with dropdown options, significantly improving navigation and overall site organization. To ensure a clear visualization of the user journey, I created comprehensive user flow diagrams that depict the various pathways users can take to interact with the website.
Design Element
Tool and Software
In the context of design implementation, I proficiently employed Figma for prototype development and Miro to foster productive collaboration with the manager of WNG and the project engineer. With Miro's board functionality, I adeptly conducted virtual design review sessions and brainstorming activities with the manager. Figma's collaborative workspace provided a platform for immediate sharing of prototype designs with the manager, thus facilitating prompt feedback exchange. Using Figma, I was able to create very detailed and realistic prototypes that truly represented how we wanted the users to experience our design.
To achieve a clean and organized appearance on the initial page, we've implemented a consistent white background for all images. Subsequent pages then have lifestyle images to enhance user engagement. Our chosen typography is clean and easily readable to ensure that users can quickly and effortlessly consume the content when they first visit the website.
The color palette we've opted for at Woof N Go combines green and yellow. The brand's founder has a strong affinity for the color yellow, and we believe that incorporating a vibrant green can create a distinctive and eye-catching color theme that sets us apart from competitors. Our design also incorporates straightforward icons to convey meaning instantly.
On the product page, we've included hover effects to provide users with a more comprehensive understanding of each product before they decide to click. To maintain a neat and visually appealing layout, we've limited the number of grids to three per row. This approach prevents overcrowding and ensures that the designs remain visually cohesive and easy to navigate.
Personal Reflection
From the experience of being a product manager and UI designer in this project, I have a better understanding of user-centered design. I reaffirmed the importance of placing the user at the center of the design process by creating a dedicated shopping platform for Woof N Go. As a Product Manager, I was responsible for setting milestones, managing the project's timeline, and ensuring clear communication, from this experience, I learned to improve my management and communication skills and taught me the importance of effective communication in a project team. The introduction of interactive elements, such as hover effects and dropdown menus, was also a valuable aspect of the project. These are techniques that I didn’t have a chance to touch on in the past. I learned that these design elements can significantly impact user engagement and understanding of the product. Using tools like Figma and Miro was important in the project's success. Figma enabled me to create detailed and realistic prototypes. I'm truly grateful for the chance I had to kickstart and lead this project from scratch. It was an incredible opportunity to shape and guide the project.
Future Steps
After finalizing the designs on the high-fidelity prototype, I am still working with the manager on the photos that will be included in the designs and communicating with the engineer that is building the website.