Project
Sit Conmigo is a new company in need of a mobile website design to showcase their ethically and sustainably-made household chairs
Roles
- UI Design
- UX Design
- Branding & Identity
Deliverables
- Competitive Analysis
- User Persona
- User Flow
- Color and Type Scale
- Wireframes
- Responsive Design
- Prototype of Checkout Process
Goals
- Emphasize Mission
- Intuitive Checkout
- Encourage Pre-Orders
Problem
The founder Yolanda Lopez has four beautiful chairs that will be ready to ship in just a few weeks. She needs a website that will encourage people to pre-order chairs. She also wants the site to exemplify her sustainable and ethical mission.
Solution
I analyzed competitor and mission-driven websites to inform my creation of a user persona, a user flow, branding colors, and a type scale. These deliverables would ensure my designs aligned with user’s needs and objectives. To help users emphasize with the mission and make the check-out process easy and intuitive. It was clear the Sit Conmigo site would need:
- Bold Colors
- A Robust “About Us” Section
- Mission Iconography
- Minimal Checkout Clicks
- Product Descriptions
- A Quantity Counter
Approach
Competitive Analysis
Yolanda provided me with inspirational sites and competitor sites. These sites were helpful in understanding what are popular trends in mission-driven companies and how other furniture products are sold online.
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 Type Scale
I decided on a color scheme and type scale that was both bold and sophisticated.
- Midnight Green - Complimentary to the chair fabrics and had a trustworthy blue hue
- Golden Rod - Bold CTA color that was often used on other mission driven sites
- Light Beige - First tried rose gold, but decided on a neutral color less intense than white
- Playfair Display - Display serif font for headings that matched beautiful, high-end chairs
- Alegreya Sans - Readable and earthy sans serif that matched organic nature of the chairs
Wireframes
Based on the information I collected from competitor sites and mission-driven companies, I was able to create a wireframe for mobile, tablet, and desktop, which will inform future responsive design that included:
- Images of the chairs so customers are encouraged to pre-order
- An eye-catching statement on sustainability
- An “About Us” section with an overview of Sit Conmigo’s mission
Mobile High-Fidelity Prototype
With the designs approved, Yolanda wanted to concentrate on the mobile website, so I created a high-fidelity prototype for mobile devices of the pre-order check out process. Based on insights from the competitive analysis, this prototype incorporates:
- A Four Step Check Out process
- Quantity Counter
- Bold Colors
- Mission Iconography in the Product Description
The mobile design also included the Pre-Order CTA in the thumb zone so mobile users can easily flow through the check out process. Once the prototype was complete, it was ready for the first round of user testing.
Results
User Interviews
Users were asked to order an urbe-green 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:
- Felt the site did not put enough emphasis on the mission
- Wanted more information about how to use the chairs
- Enjoyed the layout of chair photos and prices
- Wanted more flexibility in checkout process
- Would like the payment details expanded
- Were looking for a clearer confirmation page
- Wanted to be able to keep shopping after purchase
Solutions
Homepage
Eco-friendly certifications and mission driven statement is prominently displayed on the homepage, addressing the user’s desire to see more emphasis placed on the mission, making them trust this company and be inclined to pre-order.
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
Information on the product page reinforces the mission while also continuing to give more information about the product and delivery details. Adding a “Back to Shop” button gives users flexibility in the checkout process.
Your Cart Page
A “Cancel” button was added to continue checkout flexibility. Also, the payment information was expanded to three numbered cards so users knew where they were in the checkout process.
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.
Takeaways
- For e-commerce websites, I found it is imperative to create a sense of trust within the checkout process as well as the product itself.
- Mobile first design allows for a rewarding foundation when creating a responsive website.
- Changing aspects of the look and feel, such as brand colors, can be daunting but may be necessary for to make a more polished look.
Next Steps
Using the mobile design, I would complete the tablet and desktop prototypes. Once executed by developers, I would conduct analytics to keep track of purchases for each of Yolanda’s chairs. This will allow Yolanda to choose what chairs to manufacture more of to reach her business goals.
