acuario piscis de baja california
Aquarium Pet Store
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
WEBSITE CATALOG DESIGN
During the development of this project I designed a responsive website catalog for a local aquarium pet store to improve its clients experience by implementing a tool that helps them search and find the article they need. The goal was to create an intuitive and accessible shopping experience that reflects the brand’s identity. I focused on simplifying the product search and filtering process, allowing users to explore items by categories such as Health & cleaning, aquatics, dogs & cats. A clean, consistent UI was developed using cohesive color palettes, icons, and typography that echo the store’s aquatic theme while ensuring clarity and legibility across all devices
Tools used:
Research & Discovery
PersonasName: Ricardo GomezAge: 36Location: Rosarito, Baja CaliforniaOccupation: Construction supervisorPet: German Shepherd named ‘Thor’Tech Use Level: Basic, mostly uses smartphone for browsing & communcation.
Goals
- Find reliable flea medication that works for a large dog.
- Make sure the product is available before driving all the way up to the store.
- Check if it’s a known brand & confirm it’s the desired presentation.
- Avoid wasting his free time by going from store to store. Be as quick as possible.
Pain Points
- Doesn’t want to call or drive over to ask if the product is available.
- Has trouble with websites that don’t manage categories for health products.
- Doesn’t want to waste time ordering online so he rather go to a local store.
- Worried about choosing the wroing dose or product that isn’t suitable for his large size dog.
Needs
- Direct categories.
- Search results that show images, prices, availability.
- Easy way to contact the store via whatsapp.
- Recommendations for similar products.
Behavior
- Uses smartphone after work or during break hour.
- Googles product name and searches for local stores.
- Prefers short descriptions over long texts.
Name: Mariana TorresAge: 29Location: Tijuana, Baja CaliforniaOccupation: Elementary school teacherPet: Rabit named 'Pol'Tech Use Level: Moderate, uses smartphone & computer for work.
Goals
- She wants to find specific accesories for her rabbit.
- Avoid making unnecessary trip to the store if the product isn’t available.
- Browse through catalog quickly and easily from her phone during lunch hour or after work.
- Buy from a local pet shop to show her support to small businesses.
Pain Points
- I often struggle to find specific products in the store, which can be frustrating and time-consuming.
- I want to be able to filter products by category and type to make my shopping experience more efficient.
Needs
- I need a website that allows me to search for products by category and type.
- I want to be able to view product details and images to make informed purchasing decisions.
- I need a responsive design that works well on both desktop and mobile devices.
Behavior
- I typically browse online before visiting a store to see what products are available.
- I prefer websites that are easy to navigate and visually appealing.
- I often use my phone to search for products while I'm in the store.
User flow
The user flow is pretty straightforward, we focused on the product categories. On the navigation bar we also implemented each category so the user can access wether to a specific product group or see every product available. On the right you can see the user flow as basic as possible so the developers could get a preview of the elements of the website.Wireframes
For these wireframes, I developed low fidelity wireframes that showcased the basic structure for both mobile and desktop design. The goal was to design an intuitive browsing experience that allows users to easily find specific products. Each wireframe served as a template for user testing and early feedback, some of this low fidelity wireframes ended up with a couple of modifications to ensure the best user experience.
Lo-Fi Wireframes
Design System
For this project, I developed a comprehensive Design System to ensure visual consistency, in this system I included a library of reusable components, such as buttons & iconography, I also defined a typography scale for both desktop & mobile to keep a cohesive design, ensuring visual harmony throughout the interface. The implementation of this system helped both designing & development, Reducing rework due to missing specifications or inconsistencies, build components quickly & keeping a good collaboration between teams.
Hi-Fi Wireframes
Results
This project concluded with the complete development of a functional, high fidelity prototype in figma, the entire design package was handed off to a development team tasked with building the website catalog and delivering it to the client for their use & implementation on their business. Thanks to the detailed component & prototype the development team was able to efficienly translate the prototype into a fully functional website without major revisions. The system’s UX ensured the final product was not only visually pleasing & cohesive but also highly usable & accessible for potential clients.