Paws & Pours | Web Design

The goal of this project was to design a responsive website that promotes a fictional cat cafe business and its initiatives while providing an engaging user experience for visitors. The project involved creating both desktop and mobile versions of the website, developing a site map, and creating both lo-fidelity and high-fidelity prototypes using Figma.

The website reflects the brand's identity and values and also incorporates an online retail platform that is user-friendly and optimized to drive revenue and support of the cat cafe's mission to help with the adoption of homeless cats. I am excited to share the process and outcome of this project, which showcases my skills in user interface design and my ability to translate business objectives into effective visual solutions.

Site Map

Lo-Fidelity Prototypes

Style Guide | Brand Identity

I began by creating a comprehensive site map to visualize the website's structure and ensure a seamless user experience. Next, I developed a style guide that outlined the website's visual elements, including typography, color scheme, and imagery, to ensure a cohesive brand identity throughout the website.

Once the site map and style guide were established, I created lo-fidelity prototypes to test the website's functionality and user flow. These prototypes allowed me to make necessary adjustments and iterate on the design before moving on to the high fidelity prototypes, which I created using Figma.

By taking an iterative approach to the design process, I was able to deliver a website that not only met the project objectives but also provided an enjoyable user experience for visitors.

I utilized Midjourney's AI image generator to create all the images used in the design. The AI-powered tool allowed me to quickly and easily generate high-quality, royalty-free images that aligned with the project's branding and aesthetic. This innovative technology not only saved me time, but also ensured that the design remained visually appealing and consistent throughout.

See Paws & Pours firsthand in the video walkthrough above.

See the mobile version of Paws & Pours in the video walkthrough above.

Below are detailed screenshots of some of the key pages from the Paws & Pours website design, comparing the desktop and mobile versions side by side. These screenshots provide a visual representation of how the design elements were adapted to ensure a consistent, optimal user experience across devices. By examining the similarities and differences between the desktop and mobile versions, you will gain insights into my design process and see how I prioritized user experience and functionality throughout the design.

In order to make better use of the limited screen space on mobile devices, I made the decision to remove some of the larger images when designing the mobile version. This helped to improve the website flow and allowed for a more streamlined and efficient user experience.

Additionally, I made adjustments to the menu and navigation on the mobile version to ensure ease of use for visitors using smaller screens.

I removed some of the less critical information when designing the mobile version. This allows visitors to quickly and easily find the most important information without overwhelming users.

I made changes to the adoption profiles on the mobile version of the website. Instead of including detailed information about each cat on the main page, I created pop-ups that visitors could access to learn more about each cat. This not only made the mobile version more interactive, but also saved valuable screen space, allowing visitors to view the website's content without having to scroll endlessly.

I created a separate merchandise page for the mobile version of the website to improve user experience and make it easier for visitors to access and purchase the cat cafe's merchandise.

The Paws & Pours UI was optimized for responsiveness, ensuring a consistent user experience across devices. The desktop and mobile versions featured subtle, key differences to enhance user experience, such as streamlining the menu, removing certain images and details, and creating a dedicated merchandise page. Through this project, I prioritized functionality and user experience to create a cohesive and enjoyable online experience for visitors.

Site Map

Lo-Fidelity Prototypes

You may also like