Responsive Web Design Project
Responsive Web Design | Google Certificate Project | Adobe XD | July 2022
Designing a responsive website for a fashion brand using Adobe XD to expand my software skills and understand how different the design system should be depending on the device to optimize the user experience regardless of the type of device.
Problem
Busy workers have no enough time to go shopping in-person. They want online store where they can get detailed information on clothing so that they can buy anything they want online as if they go shopping in person without any worries.
Goal
Design a website for a fashion brand “Bllqe” that allows customers to experience a better shopping journey by offering detailed information about the brand story, clothing, and payment system.
Creating Information Architecture(IA)
Digital Wireframe
After ideating and drafting some paper wireframes, I created the initial designs for the fashion brand ‘Bllqe’. These designs focus on offering an easy and convenient shopping experience for customers.
Based on research on users’ needs and competitors, I figured out what information needed to be on the website for the fashion brand and created the information architecture to organize the contents for making the user flow smoothly.
Since I need to design a responsive website, I designed a smaller version of website by considering what these pages will look like on a mobile phone.
Low-fidelity Prototype
Using the completed set of digital wireframes,
I created a low-fidelity prototype for both a desktop and a mobile.
The primary user flow I connected was Selecting and ordering clothes.
High-fidelity Prototype
Based on a low-fidelity prototype, I developed a design system to create a high-fidelity prototype. The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes considering web accessibility and smooth user flow.
Takeaways
Considering the number of people switching different kinds of devices, I learned that when planning a website design, I need to consider diverse device sizes to offer a smooth user experience on any device. By understanding how the elements on each page will respond to different screen sizes, I’ll be able to optimize design system depending on different screen sizes for different devices.