DESKTOP VIEW OF SIT CONMIGO WEBSITE HERO SECTION
A branding refresh & responsive storefront website for a sustainable chair company.
PROJECT OVERVIEW
The client for this project was Yolanda Lopez, the owner of an eco-ethical, sustainable chair company, Sit Conmigo. She reached out to me to design a single-page website to showcase her four new mid-century modern-inspired chair designs and allow customers to place pre-orders. Since many of her customers shop from their phones, a mobile site that looked and worked great was an extremely high priority for the project.
ROLE
As the sole visual designer on this project, I worked closely with Yolanda to understand her goals for the website and implement them into a polished final design.
PROBLEM STATEMENT
Sit Conmigo’s mission is to create chairs that are trendy, stylish, and comfortable! Every Sit Conmigo chair is made with only sustainable, fair-trade materials. The owner, Yolanda, is also committed to promoting fair labor practices that ensure all employees have safe working conditions and are paid fairly for their skills.
In order for her business to be successful, she needs a place to showcase her work to buyers outside of her studio. In addition, getting pre-orders of her chairs allows her to focus her production on in-demand items and make a higher profit because she doesn't spend money on wasted materials.
She is ready to launch her new line of four mid-century modern-inspired chairs, which are aesthetically aligned with current trends in home furnishings...but her previous identity branding and website reflect the look and feel of her previous work, which was stylistically very different from her current designs.
SOLUTION
I developed and executed a plan to quickly refresh the Sit Conmigo brand identity to align with the new aesthetics of Yolanda’s work whilst still emphasizing what sets her apart from her competitors-an emphasis on ethical values and focusing on sourcing materials responsibly. Using the new branding guidelines, I then designed a one-page site with a mobile-first approach, prioritizing layout and ease of pre-ordering.
The result of this process was a modern and welcoming design that centers on Sit Conmigo’s new chairs. With strategic design choices informed by research, I built a site that balances a modern professional look while still being welcoming and warm.
Keeping Yolanda’s goals in mind, I was able to weave Sit Conmigo’s mission into various parts of the site design and ensure that the mobile experience was every bit as compelling as the desktop experience.
DESKTOP & TABLET VIEWS OF SIT CONMIGO PRODUCTS SECTION
GOALS
The primary goal for the branding refresh is to visually communicate the current personality and mission of her business, while also highlighting the ethos of being a fair trade/fair labor designer.
The goal of the website is to encourage customers to pre-order her new line of chairs and introduce new customers to the Sit Conmigo brand.
DELIVERABLES
Updated brand style guide including an updated logo, color scheme, typography, and usage guidelines
Mobile, tablet, and desktop design comps
Exported assets that will be used by Yolanda’s web developer
A project Playbook with exported project assets, design files/links
CREDITS
Product Photography・Inside Weather
Mockup Photography ・Karina Zhukovskaya, Mart Production, Anna Nekrashevich
Typography ・ Etcetera Type Company
Copy・Yolanda Lopez
DESKTOP VIEW OF SIT CONMIGO ABOUT SECTION
DESIGN PROCESS
EXAMPLE OF SIT CONMIGO'S PREVIOUS BRANDING AND PRODUCTS
DISCOVERY
To better understand Yolanda’s goals for the Sit Conmigo website, I provided her with a questionnaire to learn more about her vision and business needs.
Through the questionnaire, it became apparent that what sets Sit Conmigo apart from others is that they focus on both the source of materials and ethically building their chairs with fair labor. It was also clear that a great mobile layout and focus on pre-orders should be top priorities to keep in mind when creating a site for Sit Conmigo.
Yolanda was also able to share Sit Conmigo’s previous branding and accompanying website examples as part of the discovery process, as well as product images and descriptions for her new line of mid-century modern-inspired chairs. This allowed me to find that much of the values-based copy and taglines could be carried over into the new site, but we agreed that the branding for Sit Conmigo needed a refresh to align stylistically with her new products and sales goals.
RESEARCH + MOOD BOARD
With information and assets from Yolanda organized, I began the process of research-building a mood board in Figma with visual references and inspiration I acquired in the process. I learned in previous projects that mood boards are so helpful in discovering themes and communicating with the client in the beginning stages of a project!
I looked at Yolanda’s references, and competitors, and explored other visual resources available for additional inspiration.
COVER OF BRAND REFRESH STYLE GUIDE
BRANDING REFRESH + UPDATED BRAND STYLE GUIDE
Using the information from the discovery and research process, I then built an updated brand style guide for Sit Conmigo, including an updated logo, additional icons, color scheme, typography, and usage guidelines for all assets.
The guide was created in Figma for easy access by developers, and also exported as a PDF for additional usage.
LOGO CONSTRUCTION
The logo for Sit Conmigo needed to represent the brand's commitment to sustainability and stylish, comfortable chairs. I started by sketching out my ideas and then tested a few versions in Adobe Illustrator.
I wanted the logomark to be modern and reflect the mid-century modern aesthetic of the chairs. I also wanted to emphasize the company's name and focus on the "Sit Conmigo" text in a full logo for future alternate usage.
LOGO + LOGOMARK
I landed on a final logo that was a combination of a modern typeface and a chair icon.
The typeface was chosen to emphasize the company name and create a sleek, modern look. The chair icon was used to emphasize the focus of the business while still keeping a modern aesthetic. The combination of the two created a logo that was modern, clean, and most importantly, communicated the mission of Sit Conmigo.
ADDITIONAL ICONS
I then created a set of additional icons in Adobe Illustrator, featuring silhouettes of the new chair designs from multiple angles.
I had envisioned using them in the design of the website design create visual cues for users and connect the overall site design…but found (surprisingly) that they added unnecessary, distracting clutter to the design. I removed them from the initial design but included their exported files in the project Playbook for potential use in the future.
COLOR SCHEME
For the Sit Conmigo brand refresh, I created a color palette to reflect the mid-century modern aesthetic of the chairs. I pulled colors directly from the Sit Conmigo product images provided by Yolanda.
The primary color was a deep plum that was used to emphasize the modern yet inviting feel of Sit Conmigo. The secondary color was a light yellow that was used to provide a warm, bright backdrop for the primary color. The accent colors warm orange, light green, and periwinkle blue that were used to create visual interest and add a pop of color to the design. All colors were tested for accessibility and used throughout the website to create a consistent look and feel.
TYPOGRAPHY
The typeface used in the branding refresh and website design project needed to be modern, yet legible. I chose to use a sans-serif typeface from Etcetera Type Company called "Epilogue," in multiple weights.
The typeface was chosen to emphasize the company name and create a sleek, modern look. The typeface was also used throughout the website and in the brand style guide to ensure the same look and feel would be maintained in the future.
Having established the color scheme and type choices for the brand refresh, I created a quick-reference project style tile in Figma (see image above) to use as I began the website design part of the project.
WEB ACCESSIBILITY CHECK: COLOR BLIND SAFE
Before moving ahead with designing the website, I used the Adobe Color tool to verify that the color scheme I'd created for Sit Conmigo didn't contain any conflicts that create confusion for people with color blindness.
WEB ACCESSIBILITY CHECK: CONTRAST CHECK
I also used the Adobe Color tool to ensure that the color choices I made were visually accessible to the widest possible audience by checking the contrast ratio of the background and text colors.
VIEW OF WIREFRAME SKETCHES CREATED IN GOODNOTES
SITE STRUCTURE: ORGANIZATION, SKETCHING, AND WIREFRAMING
When designing with a mobile-first approach, I start by creating a wireframe for the smallest screens first, smartphone screens before moving on to the next largest screen-tablet. After creating the mobile wireframe sketch, I moved forward with a tablet and desktop version of the site to ensure that the layout was attractive on all kinds of devices.
With Yolanda’s goals in mind, I started by drafting a quick hand-drawn wireframe for a mobile device using GoodNotes, which allowed me to easily export sketches and preliminary wireframes as PDFs to work with in Figma.
I wanted to ensure that a large call to action was included as the primary focus of the homepage to encourage users to pre-order. I also made sure large images of Sit Conmigo’s beautiful chairs stood out as the focus of the page.
DIGITAL WIREFRAMES
With a general idea of the layout on all devices, I brought the sketches into Figma.
I added Sit Conmigo's text to better visualize how much space each section of text would need. At this stage, I also decided that a great way to weave in Sit Conmigo's mission throughout the site was to use quotes from Yolanda about the company mission as subheadings.
To ensure that I could focus on the overall spacing and layout, I didn’t add any colors or typefaces until we were happy with the basic structural design of the site.
SCROLL THROUGH THE DIGITAL WIREFRAME IN THE THE PROTOTYPE ABOVE ↑
WIREFRAME USABILITY TESTING
One of the reasons I love working with Figma is the ability to mirror prototypes live on devices for testing. Before moving forward with design work, I viewed each wireframe on a real device to physically interact with and verify that the configuration of elements I'd selected actually worked.
I recruited several additional users to test out the preliminary designs and discovered some minor issues with spacing, placement, and item orientation from their feedback. This allowed me to course-correct early in the process, making adjustments as needed before moving on to adding details and styling to the designs.
VIEW OF MOBILE DESIGN COMP UNDER CONSTRUCTION
DIGITAL DESIGN COMPS: UI DESIGN
With the usability issues resolved and basic wireframes completed in Figma, I moved on to create the digital comps for all devices, beginning with the mobile device format first.
I added the colors, typefaces, and icons I had chosen in the previous steps and made sure they were all consistent across the site. I also added the product photography provided by Yolanda, as well as additional mockup images to make the site design more appealing and bring the product details to life.
I then tested the designs on multiple devices to make sure the layout was attractive and easy to use on all devices. I also tested the site on various browsers to make sure it looked and worked correctly. Once I was happy with the designs, I exported all the assets and compiled them into a project Playbook to present to the client for feedback and approval.
CLIENT FEEDBACK
After submitting the digital comps for feedback, I worked with Yolanda to make sure the design was in 100% line with her vision. After making minor adjustments to the spacing, layout, and color palette, Yolanda was thrilled with the final design.
With her approval, I exported all the assets and put them in a project Playbook for easy access by her web developer. I also provided Yolanda with a list of sources for all the mockup images and additional assets used in the project.
Yolanda was extremely pleased with the end result, and Sit Conmigo's new website was able to provide a modern and welcoming design that centered the company's new chairs, while still emphasizing their mission of ethical values and sustainable materials.
FINAL DESIGNS
SCROLL THROUGH THE FINAL DESIGN IN THE PROTOTYPE ABOVE ↑
MOBILE DESIGN
The final mobile design for Sit Conmigo is tailored to the smaller screen size and unique features of mobile devices.
With a heavy emphasis on the eye-catching product photography and clear call-to-action buttons below each item, the layout makes the pre-ordering process as friction-less as possible, one of the client's top priorities.
SCROLL THROUGH THE FINAL DESIGN IN THE PROTOTYPE ABOVE ↑
TABLET DESIGN
The design was adjusted to make full use of the extra space available on tablets, while still remaining user-friendly and visually appealing.
DESKTOP DESIGN
Completing the design process, a desktop version of the site expands all previously collapsed elements and showcases even larger versions of Sit Conmigo's beautiful product line.
SCROLL THROUGH THE FINAL DESIGN IN THE PROTOTYPE ABOVE ↑
MOBILE VIEW OF FINAL SIT CONMIGO DESIGN
DEVELOPER HANDOFF
Exporting well-organized files for a front-end developer is a crucial part of the design process. Without a clear understanding of the design elements, a developer will have a very challenging time creating a site that aligns with the creative and strategic goals of the project.
I include all the necessary images, vector files, and other assets, as well as the finalized design comps. I also include a detailed style guide with exact specifications for all the fonts, colors, and icons used in the project. This ensures that the developer has everything they need to bring the design to life, and there is an excellent record of the work completed to refer to in the future.
CHALLENGES + TAKEAWAYS
One of the design challenges I faced in this project was creating a website that emphasized the mission of Sit Conmigo while still being aesthetically pleasing. I wanted to ensure that the website was modern and welcoming, but also focused on highlighting the company's commitment to sustainability and ethical values. To do this, I incorporated quotes from Yolanda about the company mission as subheadings and used the color palette and icons I had created for the branding refresh to emphasize the mid-century modern aesthetic of the chairs.
A key takeaway from working on this project is that research is essential before beginning the design process. By talking to the client, learning about their mission and competitors, and understanding their overall vision, it was possible to craft a personalized website that highlighted their mission and values rather than creating a generic design. Additionally, sharing design ideas, mood boards, and drafts with the client during key points in the process allowed for quick improvements/adjustments to meet the client's needs.
TABLET VIEW OF FINAL SIT CONMIGO DESIGN
DESKTOP AND TABLET VIEW OF FINAL SIT CONMIGO DESIGN
CONCLUSION
The result of this project was a well-organized and welcoming one-page design that highlights Sit Conmigo’s new chairs. With strategic visual design choices, I was able to create a site that balances a modern professional look while still being welcoming and warm.
Keeping Yolanda’s goals in mind, I was able to weave Sit Conmigo’s mission into various parts of the site design and ensure that the mobile experience was every bit as compelling as the desktop experience.
Thanks for taking the time to look at my work!
Need help getting started on a project?
Questions about my work or availability?
Send me a note anytime, connect with me on LinkedIn, or see what I'm up to this week on Instagram!