Sit Conmigo Responsive Web Design
Project Type
E-commerce Web Design
Date
March 23
Contribution
UX Research, UX Design, UI Design
Sit Conmigo is a responsive web design concept that aims to showcase a designer's sustainable and ethically produced chairs
Breaking down the fashion industry one item at a time
Sit Conmigo is an ethical, environmentally friendly chair company and was founded by Yolando Lopez. She contacted me to design a responsive single-page website for her new chair collection that would also enable pre-ordering from clients. Due to the likelihood that many of her customers will shop on their phones, she wants a mobile site that looks amazing and functions well.
Challenge
Increase customer conversions by creating responsive web designs for multiple platforms while establishing a lasting brand identity that emphasizes the designer's mission as a fair trade & fair labor based company.
Solution
The solution involves crafting a responsive web design that ensures a seamless experience across all devices while reinforcing the brand's identity as a fair trade and fair labor-based company. This includes integrating a cohesive visual style that reflects the company's ethical values, incorporating a clear and compelling mission statement, and designing intuitive navigation and user-centric features to enhance engagement and drive conversions. By focusing on these elements, the design will not only attract and convert customers but also effectively communicate the company's commitment to ethical practices.
Sit Conmigo's mission is to create chairs that are trendy, stylish, and best of all, comfy! Every Sit Conmigo chair is made with only sustainable, fair-trade materials.
The client already conducted user research and included that in the client brief. I analyzed the information provided to understand not only what the client was looking for but also what the users were looking for.
The client researched her competitors and noticed many of her competitors are big-box retailers who often focus on either sustainably sourced materials or fair labor. She is very proud of her business and wants to make sure that her mission is shared with the world.
User research was not part of the scope of the product but I made sure to read through all the information and understand not only what was best for the client but also the users.
I began the design thinking process by conducting a stakeholder interview to gain the necessary information needed to approach the project.
Paper Wireframes
I began by creating rapid sketches, known as "crazy eights," using a mobile-first approach. These quick sketches allowed me to capture ideas swiftly and visualize the design effectively.
After several iterations for each screen size, I developed the final paper designs. The wireframes displayed here represent the completed paper designs for each screen size. I also included margin notations in each design to stay organized throughout the process.
Low-Fidelity Wireframes
After finalizing the paper wireframe designs, I scanned them into the computer and used them as a template to create the digital wireframes in Figma.
To ensure a clear and user-friendly design, I applied the Gestalt principles, focusing on similarity, proximity, and common region. Additionally, I utilized an 8pt grid for alignment and spacing to maintain consistency and even distribution of elements throughout the layout.
Coordinating colors and fonts
The client provided an existing logo for the website, but the company's color scheme had not yet been established, leaving the selection of colors and fonts up to me.
To choose a suitable color palette, I drew inspiration from the colors of the company's chairs, ensuring the chosen hues complemented their products. Once the color scheme was finalized, I checked it against WCAG accessibility standards to ensure the colors worked well together and were appropriate for use in text and buttons on the website.4o
High - Fidelity Prototype
After incorporating all images and design elements, the prototype reached its final stage, ensuring all of the client's requirements were met.
The purpose of the prototype is to test the design with users before handing it off to developers, allowing any issues to be identified and resolved prior to the coding phase.
Mobil-first approach
I began with a mobile-first design, focusing on the client's goal of maximizing customer visibility for her chairs. Prioritizing the device most users will access, I ensured that key information was easy to find and accessible.
Once the mobile layout was finalized, I proceeded to design for tablet and desktop. For each device, I carefully arranged the information to create a user-friendly experience that both supports the users and aligns with the client's objectives.
.png)
Usability Testing
Learning from the users
During the usability test, I received feedback that users were not automatically scrolling to view all the chairs. To address this, I implemented a carousel to save space and reduce the need for excessive scrolling.
After researching the effectiveness of carousels, I revised the design, considering the project’s scope and Yolanda's goal of maximizing visibility for her chairs. This adjustment ensures a better user experience while aligning with her objective.
Iteration
After redesigning and conducting another usability study, I found that users engaged with all the products using the new layout. This usability test revealed that, while I initially thought the carousel was efficient, it wasn’t the best fit for the client's goal of attracting customers to purchase her chairs. The primary focus is always to create a design that best serves both the user and the client, which guided my design changes.
Client wrap up
I reviewed the checklist of client requests from the initial interview to ensure all requirements were met.
For next steps, I recommended creating a cart screen that aligns with the site's design for when users are ready to purchase chairs. Additionally, I suggested developing an app where users can log in and create favorites, allowing them to receive notifications when chairs become available or new products are added.
Client Brief Complete
✔️A large header (CTA) with images and text encouraging customers to pre-order
✔️A Pre-order section with chair photos, product names, and links to pre-orderAbout section with information on the company and its mission including a photo
✔️Contact section in the footer with links to social media, email address, and phone number
✔️Navigation with links to the Pre-order, About, and Contact sections
Key Lessons Learned
User Engagement: Prioritizing user feedback is crucial; designs must be tested with users to ensure they meet their needs.
Flexibility in Design: Being willing to adapt designs based on usability tests can lead to better outcomes for both the client and users.
Accessibility and Visibility: Ensuring that key information is easily accessible is essential for maximizing user engagement and achieving client goals.
Importance of Clear Communication: Regularly communicating next steps and recommendations with the client helps align expectations and project objectives.
Holistic Approach: Considering both user experience and business goals is vital for creating effective design solutions.
Straightforward Path to Purchase: Ensuring a clear and intuitive path for users to make purchases through frequent and distinctive call-to-action buttons is essential for enhancing user engagement and conversion rates.