A Minimalist Modern Responsive Website Design to Increase Pre-Orders for a Mission-Driven Sustainable Chair Company.
Sit Conmigo
Case Study
I wanted the Sit Conmigo branding experience and online presence to be modern, elevated and minimal while simultaneously evoking excitement to entice orders. I set out to create a visual identity that would capture the philosophy behind Yolanda’s mission to support fair trade and fair labor. I chose warm, inviting colors complemented by elements that are fun and a touch organic. The entire suite is meant to inspire potential customers to order a beautiful piece for their home with confidence their choice benefits humanity and the earth.
inspiration
The Sit Conmigo company specializes in stylish, comfortable chairs that are produced sustainably and ethically. The brand embodies CEO, founder, and designer Yolanda Lopez’s philosophies on eco- and ethically-produced goods. In Yolanda’s work and collections, style and sustainability are communicated visually through intentional design and warm, inviting messaging.
Natural, stylish, and modernly humanistic, the brand is rooted in the belief that creating stylish, sustainable chairs should not come at the expense of the people producing them or the planet.
Adobe XD
Adobe InDesign (mockups)
Adobe Photoshop (mockups)
Chrome DevTools
Tools
Web Design Class Project
PROJECT TYPE
Responsive Website Design
Logo & Brand Refresh
Color Scheme
Typography Pair
Icon Set
Image Curation
Professional Copywriting
scope & Deliverables
Sit Conmigo company is an ethical, sustainable chair company that specializes in modern showpiece chairs. Our 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. We’re also committed to promoting fair labor practices that ensure our
employees have safe working conditions and are paid fairly for their skills. The
result is a chair that you’ll not only love in your home or office but a chair that
was lovingly made by the person building it.
mission statement
Modern
Elevated
Trustworthy
Inviting
Clean
tone
More Than a Conversation Piece, it's a Humanitarian Piece.
Tagline
The primary logo supplied by Yolanda was preserved, but updated by locking it up with the core brand typeface. My goal for the updated logo design was to elevate the icon-style logo and reinforce the brand name. I controlled the size of the lettering so as not to overwhelm the logo and keep the focus on it's minimalist, organic design.
Logos
Kepler std SemiBold
ABCDEFGHI
JKLMNOPQR
STUVWXYZ
Objektiv MK2 Regular, Medium & bold
ABCDEFGHI
JKLMNOPQR
STUVWXYZ
Objektiv MK2 Italic
ABCDEFGHI
JKLMNOPQR
STUVWXYZ
For Yolanda's typography pair, I went for a match that was sophisticated and clean, while also being a modern, humanistic take on tried-and-true traditional typefaces.
Typography
hex#: 986a00
harvest
hex#: f2b705
marigold
hex#: fcfaf5
canvas
hex#: 746661
silt
hex#: Aba49d
Silverdust
Yolanda's unique color scheme was engineered to complement her designs, convey her desired image, feel warm and inviting, and be a touch organic without clashing with her elevated, abstract style.
Color Palette
Icons & Imagery: I sourced fun and relevant icons, rendering them in her brand colors along with her existing logo, and curated some beautiful, on-brand stock images to speak to the environmental piece of her mission.
Styles: Overall styles for the interface focused on being modern, clean, fun, and minimalist.
Interface Elements
My client, Yolanda Lopez, is the designer, founder and CEO of Sit Conmigo - an ethical, sustainable chair company that specializes in modern showpiece chairs. I was hired to help design her brand and subsequent website based on her specifications and project goals.
Since she came to the table with a web developer to code the site, she only needed brand elements such as color, icons, typography, copy, and developer-ready design files.
Her detailed specifications for the website were to design a single-page website with sections for Pre-Order, About, and Contact including a navigation menu for each section and a large CTA above the fold encouraging pre-orders.
Her request also included details about what would be included in each section, such as where she wanted images, product links, and copy guidelines.
Overview
My role for this project was primarily as the website designer, but I also served as the brand designer, using the client project brief provided as a guide.
This was a mock client project, so while I didn’t converse with an actual client directly, my class instructors did their best to conduct the project in a way that was as close to a real-life commissioned project as possible.
This was accomplished by providing me with written content in modules and a project brief, and providing real-world feedback through the class Slack channel and through instructor feedback on selected lessons.
In the project client scenario, I was tasked with working directly with the client, and went through one round of iterations based on feedback provided by the “client” (my instructors).
Roles & Responsibilities
In addition to Yolanda’s visual elements, I developed her brand voice through cleverly-written copy that spoke to her ideal client. This copy, with typescale applied, clearly addressed the main project goals and problems, often being paired with supporting visuals. Using the answers in her Project Brief as a guide to her voice, I started with the copy she provided, extracting pieces to place thoughtfully in key areas, and then added supporting copy where needed.
For the branding work, I addressed some problems by first conducting research in the sustainable, mission-driven furniture market to get a feel for the general aesthetic and vibe. Keeping this in mind, along with her supplied competitors and inspiration, I developed the base brand elements of color and typography to communicate her unique story. The final selections were delivered to Yolanda via an organized Style Tile.
I plotted out her specific requirements first, then decided how to create a layout that would be uncluttered, modern, spacious, and inviting. I think these choices help convey that her company is serious and trustworthy, while allowing the chair images to be the exciting focal points of the website. The low fidelity wireframes I built using Adobe XD allowed me to experiment and adjust the size and space of elements to achieve this look and feel.
To start, I mapped out her site user flow and paper wireframes, constantly referring back to her primary goals and specifications from the Project Brief to make sure they were easy to find right when landing on her homepage.
Design Process
The primary problem Yolanda and I were solving was to make sure we reached her clients and spoke to their strong values around sustainability, as well as eco- and ethically-produced goods. We wanted to highlight her company’s unique niche in the market compared to her big-box retailer competitors, as unlike them, her company focuses on both the source of materials and ethically building their chairs with fair labor.
As for the aesthetics, a problem we needed to address was choosing brand colors that would evoke excitement without distracting from the product photos. The colors also needed to make the company appear serious and trustworthy because their mission is important for the health of the people and the planet. Finally, we needed to represent both the human and environmental elements visually on the website to convey this mission.
The most important work was ensuring her top goals were visually met, which was attained by placing the most compelling product image above the fold with a clear call-to-action button situated below a statement header that narrated her top goals.
Then directly following, including another strong headline dictating the mission in different terms, followed by large, clear images of her designs, with pertinent information for her customers to see including name, price, and description link, above a second clear call-to-action. In my opinion, it was imperative to achieve all of Yolanda’s goals on her one-page site by keeping her clients engaged all the way to the footer.
To do this, I made sure her site sections were broken up by empty space, gorgeous images, color pops, variation in type layout, and bold titles to give visual interest and keep the user engaged.
goals
Website
The primary goals of this project were to showcase Yolanda’s chair designs and encourage customers to pre-order them. Her vision to accomplish these goals was by introducing customers to the Sit Conmigo brand by highlighting her mission as a fair trade and fair labor designer, and by visually communicating the personality and mission of her business.
It was important to preserve the design goals - such as look and feel and space around elements - on all devices.
I studied various professional websites online to understand typography size ratios from one device to another, while keeping careful consideration to colors for new sections - such as the pop-out menu for tablet and mobile.
It was a challenge to find a color scheme that would convey the image goals Yolanda outlined, and that I felt would match her style. It’s common to use green to communicate an eco-friendly message, but because her products were green and red, I didn’t want to use green as a website color, over concern it would clash or start to look holiday-inspired.
In my previous fashion design experience, brightly-colored products stand out best when surrounding elements are complementary neutrals, which is why I chose the soft cream and muted taupe tones.
That said, in the web design world, excitement is conveyed often through bright colors, especially in call to action visuals, so finding the right bright color to add some flair took extra time. I had a breakthrough in the color palette only once I curated her stock images and compared them to her product images, finding the common thread: golden yellow!
Note to self: try this method in the future if I find myself stuck on the right colors.
A second challenge I faced was determining the best type scale to use across all three device sizes. I handled this by starting with the generic size guidelines provided in my Web Design class modules, then conducted research for accessibility best-practice articles on various websites and blogs.
Finally, I used Google Chrome DevTools to inspect some common websites with attractive typography in the furniture market to see what they used across different devices. From here, I pooled my data findings and created a formula to follow, resulting in Yolanda’s responsive type scale.
Challenges
Responsive Design
Right: Pop-Out Mobile Menu, Mobile Design Comp
Below: Tablet Design Comp
device design comps
The resulting project was three beautiful, modern site layouts that addressed each of Yolanda’s goals, and solved her most important problems, through an intuitive user flow, narrative copy, exciting visuals, spacious layout, and an overall fun vibe.
Bold headers introduce the brand, communicate company values and niche, and guide actions to pre-order chairs and support the mission without overwhelming the reader.
Space around elements and strategically-placed visual content separate different sections and ideas, allowing for the chairs to be center of attention, and to keep customers engaged across the entire website.
Meanwhile, colors support, communicate, and elevate the content and mission by being mostly neutral, modern, and complementary earth tones, while matching Sit Conmigo’s personality.
Photos and icons help to express this personality, while showing the human and environmental elements behind the brand.
Finally, customers are supported across all devices with accessible colors, engineered layout, and legible typography, so they can shop conveniently at home or on the go.
Conclusion
work with me
Want to Know More If I'm the Right Fit For Your Mission-Driven Business?
I'd love to schedule a video-chat to get into the details, find out about opportunities in your organization, and answer all your burning questions about my career transition!
find me wherever I am:
Based in the New York Tri-State area.
I work from home most days, but unlock another level of creativity at coffee shops surrounded by other self-motivated creators.
I typically stumble on my best ideas while hiking in nature or exploring a new city.
contact me
about me
Wanna know more?
I love working with mission-driven small businesses to develop an elevated online presence that not only looks great, but is clean, functional, highlights their purpose, and truly feels like their brand.