Responsive Web Design Assignment

Project goal

Design a responsive website for a local grocery store that helps users locate products while shopping in person.

User research

This Google UX Design Certificate project focused on responsive website design using a predefined prompt. As a result, no primary user research was conducted as part of the assignment.

To ground the design process, I worked with personas created from sample bios provided by the certificate. In a real-world context, these personas would be validated or replaced through direct user research.

User journey maps

I created a user journey map to outline Joseph’s in-store experience and identify opportunities where a responsive website could reduce friction.

The journey map helped clarify:

• When users would need information most urgently

• Where cognitive load could be reduced

• Which steps should be prioritised in the interface

Sitemap

The sitemap combines sequential and database structures. Pages follow a linear flow, while search and filtering enable flexible navigation. Users can return to the homepage at any point.

This structure supports:

• Fast access to product information

• Clear recovery paths

• Familiar navigation patterns for in-store use

Paper wireframes

Desktop

I began by identifying core interface elements and sketching desktop wireframes for each page in the main user flow. Repeating components were marked early to support consistency in later iterations.

Mobile

Mobile wireframes were derived from desktop layouts and adapted to accommodate limited screen space. Priority was given to preserving content hierarchy while reducing visual clutter.

Gestalt principles were applied to organise content:

• Similarity: consistent colours and product card components

• Proximity: filters grouped together to clarify relationships

• Common region: step-by-step guidance placed beneath the search bar

Digital wireframes

Digital wireframes refined layout and structure while remaining intentionally minimal. Placeholder text and neutral styling allowed the focus to remain on hierarchy, navigation, and functionality rather than visual polish.

Low-fidelity prototypes

Low-fidelity prototypes connected the main screens supporting the primary user flow. This step ensured the sitemap and journey map translated into a coherent experience before moving into visual design.

Usability testing

Due to the scope of the assignment, usability testing was not conducted. In a real-world project, I would test the low-fidelity prototype at this stage to validate navigation, clarity, and task completion before moving to high-fidelity designs.

Mockups

High-fidelity mockups introduced colour, images, icons, and real content. The designs follow a hypothetical user journey in which a shopper searches for a specific product (“banana”) while in-store.

Both desktop and mobile versions were designed to ensure consistency across breakpoints.

Responsive design

Because the primary use case involved in-store shopping, mobile layouts were prioritised. Users were expected to access the website on their phones rather than desktop devices.

Tablet layouts were not explored in this project, but mobile and desktop breakpoints were designed to scale responsively.

Mobile

The mobile prototype contains two slide in menus to mimic functionality. Those are a filter and sort menu. This was done to make use of the limited space available on mobile screens.

View Grocery Shop's mobile screen high-fidelity prototype

Accessibility

Accessibility was considered throughout the design process, with a focus on clarity and usability. Key considerations included:

• Clear visual hierarchy through typographic scale

• Distinct landmarks to support navigation

• Initial focus placed on primary tasks to reduce cognitive load

Accessibility decisions were informed by the needs of the personas, particularly around cognitive load and readability.

What I learned

This project strengthened my ability to design responsive interfaces while maintaining consistency across breakpoints. Reusable components and layout systems improved scalability and reduced friction when iterating on designs.

Designing for in-store usage reinforced the importance of prioritisation. Key actions needed to be immediately visible, particularly above the fold, as users were likely interacting quickly and with limited attention. This influenced content hierarchy and spacing decisions across layouts.

The project also highlighted the risk of assumption-led design. Because personas were hypothetical and usability testing was not conducted, some decisions would require validation in a real-world context. Earlier testing would help reduce bias and improve confidence in design choices.

Finally, I developed a stronger working understanding of Figma’s auto layout and spacing tools, which improved responsiveness and alignment across screens.

Next steps

If continuing this project, I would:

• Conduct usability testing on the low-fidelity prototype to validate structure early

• Refine accessibility further, including alternative text and screen reader considerations

• Explore additional features based on journey map opportunities

• Iterate on the design using real user feedback