Project
Overview
Sit Conmigo is a new company who specializes in ethically and sustainably-made household chairs. Their founder Yolanda Lopez hired me to create a mock-up of a mobile, tablet, and website designs. As well as a prototype of the mobile checkout process. She wanted the design to focus on the company’s ethically-minded mission, spotlight her chairs, and visually illustrate her mission and company personality. All with the purpose of urging people to pre-order her stylish chairs.
I researched competitor sites and their checkout processes to find a desirable user flow. I worked closely with Yolanda to find the right colors and typography that made the company’s identity shine. Then I conducted user testing to arrive at my final design.
Roles
- UI Design
- UX Design
- Branding & Identity
Deliverables
- Color and Type Scale
- User Persona
- Site Map
- Design Comps of Each Device
- Prototype of Checkout Process
- Exported Assets
Goals
- Emphasize Mission
- Robust About Us Section
- Intuitive Checkout
- Responsive Design
Problem
Yolanda has four beautiful chairs that will be ready to ship in just a few weeks. Because so many people browse online these days, she thinks that focusing on the mobile checkout process is most crucial. This begged the question:
How can we get eco-conscious buyers to pre-order chairs on the mobile website?
Approach
Competitive Analysis
Yolanda provided me with four inspirational websites that are mission driven. She also provided me with two competitor websites, one with similar products, and one with a similar mission-driven focus. I investigated two more sites whose products were also sustainably-made furniture. These were the similarities I found:
User Persona
While looking at Sit Conmigo’s competitor sites, I found customer reviews on facebook. This felt like a good opportunity to create a user persona on real people. The profiles I viewed depicted professionals who want to buy products with the same socially moral ethics that drive their own lives. Based on 5 facebook profiles, I made this user persona:
User Flow
I created a User Flow to imagine what the checkout process may look like. Sit Conmigo only has a few chairs to sell, so the site does not need to be overly complicated. A customer should be able to buy a chair in the least amount of steps. Because Yolanda’s inspiration sites contained robust “About Us” sections, I decided to put the “About Us” section containing the company’s mission on the homepage.
Color and Typescale
Now the fun begins! I began taking colors from Yolanda’s chair fabrics to experiment with color palettes. The midnight green complements the hero image I wanted to use that depicts a green chair and red chair. I also wanted to use bluish hue of midnight green to create a sense of trustworthiness in Sit Conmigo’s sustainable practices. I first chose a muted rose color, but as the project continued, it became evident that there needed to be a more neutral color in the mix. I was immediately drawn to the golden yellow as an accent color to show the relatability of the Sit Conmigo staff and mission.
I chose a serif font for the page titles to accompany the trustworthy blue. Something that was both beautiful and high-end, much like Yolanda’s chairs. As for the secondary font, I felt a readable sans-serif would work best.
Wireframes and Design Comp
I then created a low-fi and hi-fi wireframe of the Homepage. I included images of the chairs so customers are immediately drawn to Pre-Order, followed by the “About Us” section to give customers an overview of Sit Conmigo’s mission, and lastly, a simple contact footer.
Next, I transformed the wireframe into a fully-furnished mock-up. I changed some layout features to showcase the images better than the wireframe. Yolanda had me go ahead and create a mock-up of the checkout process for mobile. Once I got a prototype up and running for the mobile site, it was ready to user test!
Prototyping
With the designs approved, I created a mobile check-out process that was elegant and efficient. It consists of:
- Robust “About” section that included eco-conscious certification icons and a statement from Yolanda on the Homepage
- Chair description cards on the shopping page for easy comparison.
- Multiple options for users to go back to previous pages throughout the checkout process.
Results
User Testing
Users were asked to order a chair from the mobile website. They were also asked to describe how the site demonstrated the company’s mission. After 2 rounds of user testing, it was evident that users enjoyed the layout of chair photos and prices, but felt a bit confused and confined in the checkout process. They also stated that the site did not put enough emphasis on the mission of Sit Conmigo.
Users wanted more company information before they could feel confident in their purchase. Also, more ability to move backwards in the checkout process.
Solutions
Homepage
First, I addressed the lack of enthusiasm to begin the pre-order process and the desire for more information on the company. I did this through emphasizing the company’s sustainability practices by displaying their many eco-friendly certifications. This along with a mission statement gives a more comprehensive vision of the company’s ethos.
Shopping Page
To continue to make the customer feel at-ease during the pre-ordering process, there is a small description of where the chair would fit best in the user’s home. This simple comparison method allows the user to feel even more sure they want to continue to Pre-Order.
Product Page
While working on this page, it became clear that lightening the background hue to a light beige allows the brand color to pop. I added a “Back to Shop” button so users felt they could look back at other chairs if they felt unsure about the one they had selected.
Your Cart Page
To be more explicit about what steps are involved with pre-ordering a chair, the payment information was expanded to three cards and numbered each step so users knew where they were in the checkout process. A “Cancel Order” button was added to allow more freedom to shop if needed.
Confirmation Page
Users felt like the confirmation page needed to be more clear. So I made more apparent buttons for viewing their order confirmation and back to shopping for chairs. While also making the “Contact Us” section still visible on the mobile phone in case customers have questions about their purchase.
Challenges
I found that the more feedback the better. I received multiple rounds of feedback beyond just user testing. There were times when many iterations were needed, and other times when finding a solution and moving on was necessary.
Doing a mobile-first design for Yolanda helped me keep the MVP in mind. I learned the importance of combining style with minimalism. Keeping features within the confines of a small screen and giving the site the flare it deserved was crucial to the success of the site.
