Type: Digital Wireframe / color scheme / typography / Digital comp
Tools: Adobe XD
Project Scope
I was hired by Yolanda Lopez CEO, Designer, and owner of Sit Conmigo chair company to design a mobile-first one-page website to showcase her products and take pre-orders of her chairs.
The Project's Goals
In order to maintain a clean look and organization, I made sure to fit the content into a one-page highlighting Sit Conmigo's chair gallery, information about Yolanda Lopez, and the mission that makes her chairs so special.
The Design Process
Design Research
I usually like when I first meet with my client, to complete a questionnaire in order to know more about her goals and understand her needs. This way, we start direct constant contact, working together to achieve our goals. Having this information allows me to design a wireframe as a foundation for her website.
Wireframe Sketch
I started sketching paper wireframes with a mobile-first design in mind. My priority was to include a large call to action button on the Hero Image on the homepage to attract users to pre-order, as well as display Sit Conmigo's beautiful chairs with plenty of white space to make the products more attractive to purchase.
Digital Wireframes
In AdobeXD I handcrafted each paper wireframe into a digital wireframe for mobile, tablet, and desktop devices. Since is a lo-fi wireframe, no logo, icons, colors, typefaces, or images are used in this stage. I added Sit Conmigo's text so that the website can take shape allowing me to determine the amount of space per section. I have included some of Yolanda’s quotes in the hero image and contact section to give it a warm touch and develop a company-customer connection and loyalty.
Color Scheme
The colors that I selected were very bright and contrasting to reflect Yolanda’s brand style which is very eco-friendly, ethical, casual, and bright. I wanted to give Yolanda a creative edge on her brand but also look approachable.
Typography
The fonts that I selected look very artistic, elegant, bold, creative, and fun. The page title font is Georgia bold which is a serif font that gives the brand a sophisticated modern look. The font selected for the headings and navigation is Allura to give it a more artistic and warm look, and Tahoma for the body text is a sans-serif easy-to-read font.
Digital Comps
When my client and I started this project, after compiling her information and goals, we agreed that we wanted a very friendly experience for our customers. After all, who doesn’t love a good comfy chair to have a conversation with family and friends?
I added all the design elements and components into my digital comps balancing bright colors with soft hues as backgrounds to compliment the layout and content in all of the different devices used to display this website.
I started by placing the logo and company name as the page title, having the navigation links to the right in the header, presented in a hamburger menu for mobile and tablets a full navigation menu on the desktop. Below it, the hero image I picked is the brightest of all four chairs, the Red Urbe with a call to action button to entice users to pre-order Sit Conmigo’s beautiful chairs. Then continue with the chair gallery presented against a white background card with rounded corners for a softer look to highlight the colorful chairs. The chair gallery's background lays against a neutral tone to enhance Sit Conmigo’s unique vibrant designs.
I thought it would be really important to make a special short About section placing a picture of Yolanda Lopez, who is an ethical business visioner, showing her friendly smile and mission statement to create a connection between users with Sit Conmigo.
And lastly, I wanted the contact section to look very welcoming and convincing to make a purchase, so I decided to use a light lime green color as a background, and displayed the logo, one of Sit Conmigo’s mission statements, the contact information, and social media to follow Sit Conmigo at the left, and an easy to use the contact form at the right, should the customer decides to send an email with a large orange button, again, to attract customers to pre-order, which is one of Yolanda’s priority as per her request.
Final Design
During the process of this project, I learned that is very important to research and have very direct close communication with my client about who her competitors are, and the retail websites that are her inspiration for her company website so that I can have a clear understanding about her goals and mission before spending any time on designing her website.
Also, after the first revision with my client, it’s necessary that when some changes need to be done, I implement them right away before continuing with the design so that we are reassured that we’re accomplishing our goals and working more effectively.
Conclusion
I delivered Yolanda Lopez a beautiful modern one-page responsive website for mobile, tablet, and desktop so that she can showcase her beautiful designs and continue to expand Sit Conmigo as a unique, ethical, fair-labor company with a warm comfy welcoming approach that will invite you to relax and enjoy your conversations on a more eco-friendly humanitarian piece.