Beautifully Baked Responsive Design

This was my first responsive design in my UX/UI journey. I took my bakery menu app Beautifully Baked and made a tablet and desktop size. This project taught me a lot about how different screen sizes can alter the user flow and user experience. The challenge was keeping the consistency with the mobile app but adding more details and features. This project helped me discover my preference for mobile first designs. Although I have known about mobile first design before with my front end web developing, I never truly understood the reason behind it until now.

Sitemap

I began my responsive UX project with a sitemap because it serves as the foundational blueprint for the entire user experience design process. A well-structured sitemap helps me visualize the hierarchical structure of the website or application, allowing me to organize and prioritize content and functionality. It not only ensures that I have a clear understanding of the user's journey through the digital product but also assists in identifying potential pain points and opportunities for improvement.

Wireframes

The next step in my responsive UX project involves the creation of paper and digital wireframes. Paper wireframes are an initial low-fidelity representation of the user interface, allowing for quick ideation and sketching of layout and content placement. They help me explore different design concepts and gather early feedback. Once I've honed in on a promising direction, I transitioned to digital wireframes using Adobe XD. Digital wireframes provide a more detailed and interactive version of the design, offering a clearer visualization of the user experience. They enable me to refine the layout, interactions, and responsiveness of the interface across various screen sizes.

I gave myself about a minute on each of these paper wireframes. This was my version of a crazy eights exercise. I then went through and put a purple star next to my favorite design concepts.

I then took my favorite concepts from the first paper wireframe sketches and created a final paper wireframe. I prefer to do these final paper wireframes on dotted paper to keep them as neat and precise as possible.

Digital Wireframes

After finalizing my paper wireframes, I transitioned to the digital wireframes to create more refined and interactive representations of my design concepts. The transition allowed me to translate the rough, initial sketches and ideas into a more polished, structured format, making it easier to convey the user interface's intricacies and interactions. This evolution from paper to digital wireframes enabled me to bring my design closer to its ultimate form while maintaining the flexibility to iterate and fine-tune the user experience efficiently.

This combined approach of paper and digital wireframing ensures that my responsive design is thoroughly planned and user-focused before moving into the more intensive stages of development, ultimately resulting in a more efficient and effective user experience.

Prototype

Upon completing the digital wireframes, I advanced to the next critical step in the UX design process by creating a prototype. Crafting this interactive prototype allowed me to transform static wireframes into a dynamic and functional representation of the user experience. The prototype provided an invaluable opportunity to test the websites functionality, gather user feedback, and refine the design further before moving on to the development phase. This transition from digital wireframes to a fully interactive prototype was a pivotal moment in ensuring that "Beautifully Baked" would deliver an exceptional and user-friendly bakery menu experience to its customers.

Click here to see full Prototype

Mockups

Transitioning from wireframes and prototypes to mockups is a pivotal stage in a UX-responsive design project. Moving to mockups involves adding color, typography, images, and other visual elements to create a lifelike representation of the final product. This step allows for a more detailed exploration of the user interface's aesthetics, enabling stakeholders to envision the app's or website's visual identity. They also offer an opportunity to fine-tune and align the design with branding guidelines, ensuring a cohesive and visually engaging result. It's the step where the design goes from being a rough plan to a polished, good-looking, and ready-to-build version that works well on different devices.