Sit Conmigo (E-Commerce Project)
Tools: Adobe XD
A UI/Visual Design project focused on designing an e-commerce site for a sustainable and ethical chair company.
THE PROJECT
Yolanda Lopez, the CEO and founder of Sit Conmigo company. Sit Conmigo specializes in chairs that are produced sustainably and ethically. So far, the client has designed four chairs and feels it’s the right time to launch her website.
The main goals of Yolanda’s site:
1. Showcase her chairs and entice customers to pre-order them.
2. Highlight her mission as a fair trade and fair labor designer.
3. Visually communicate the personality and mission of her business.
The deliverables I provided:
​
-
Mobile, tablet, and desktop design comps.
-
Color and type styles that are inspired by the Site Conmigo logo and mission.
-
Exported assets that will be used by Yolanda’s web developer. Yolanda’s additional requests:
-
A large header (CTA) with images and text encouraging customers to pre-order.
-
A Pre-order section that includes chair photos, product names, and links* to pre-order the new chairs.
-
An About section with information about the company and its mission. The section should also include a photo.
-
A Contact section in the footer with links to social media, an email address, and phone number.
-
Navigation with links to the Pre-order, About, and Contact sections.
-
MY ROLE
For this project, my role was the Lead UI Designer.
For my role as the Lead UI Designer of this project, I was responsible for all wireframing and designing of the client's portfolio site.
BREAKING DOWN THE PROCESS
My process for designing the client's portfolio site consisted of sketching snd creating the wireframes and designing the final design comp of the site using Adobe XD.
​I began the designing process by sketching the layout of the website to decide on what the structure of the site content should be to best accomplish the client's goals.
Once the structure was decided, I created a paper and then digital wireframe of the site​ to refine the decided layout of the site. I used a 12 column grid for this design. Next, I created a style tile to layout the color scheme and font choices for the design. When that was completed, I began adding visual elements to create the final web design comp before handing off the files to developers.​
Paper Wireframes
Mobile
Tablet
Desktop
Digital Lo-fi Wireframes
Mobile
Tablet
Desktop
Style Tile
Final Design Comp
After the initial digital wireframe, I decided to rearrange the photos of the chairs on the desktop wireframe to allow more whitespace so the page doesn't seem so crammed.
Mobile
Tablet
Desktop
TITLE OF THE CALLOUT BLOCK
LESSONS LEARNED
Since this project was made up for the class, I was working within the constraints of not being able to do more research to prepare for the project.
I would have liked to have had the opportunity to speak with any current or potential clients of Sit Conmigo. I would have liked to see what the original process was to purchase chairs and what improvements they would like to see. If Yolanda didn't already have customers, I would have liked to survey the population that would be potential customers of Sit Conmigo.