Responsive Furniture
Web Design

Project Info
Responsive Webdesign Project
Role
UX/UI, Research
Duration
5 Weeks
Tools
Adobe XD, Photoshop
Overview

Sit Conmigo is a responsive web design concept that aims to showcase a designer's sustainable and ethically produced chairs.

Challenge

Increase customer conversions by creating responsive web designs for multiple platforms while establishing a lasting brand identity that emphasizes the designer's mission as a fair trade & fair labor based company.

Research

I started by asking Yolanda to fill out a project brief to get a better idea of her goals, motivations, and preferences.

I began the design thinking process by conducting a stakeholder interview to gain the necessary information needed to approach the project.

User Persona

This user persona emulates a sustainability minded user whom is more likely to engage with the product.

While conducting secondary research, I found that there are 4 types of sustainability minded personas which include inactive, passive, follower, and frontrunners. Below is the "follower" archetype that closely resembles the designer's target audience.

Competitive Analysis

This straightforward user flow illustrates on how users can accomplish their goals quickly.

This user flow is an example of how new and returning users can either rent a bike from the homepage or quickly navigate through the site, ultimately satisfying their needs.

Lo-Fi Wireframes

I utilized the mobile first approach and a grid system to help determine the order of the content and elements in each design.

I first iterated rough sketches of a mobile version which included MVPs that satisfied the project goals.

While doing so, I was mindful of thumb zones and placements to optimize natural hand movement when a user is interacting with a mobile version.

I used a 4,6,8 column system to help me organize/align the content of each respective device.

Style Guide

I created my design system to help me build my look and feel in a more efficient way.

The client wanted colors that exude excitement yet avoid distraction from the  products. I used olive (Hex#7E9E35) as the primary color and a burnt orange as the secondary color (Hex#F07E53) because it not only complimented the vibrant designs of the chairs, but it gave a professional yet humanistic/ environmental feel to the website.

Typography

The primary font I decided to use for the app is called Cyrene while the secondary font being Montserrat.

This casual yet clean sans serif typeface creates an inviting feel to the user and also increases the label’s/information’s legibility.

Hi-Fi Designs

I used my design systems and style guide to help me bring color, feel, and personality to these platforms.

Final Thoughts

Since this was my first responsive web design project I have ever done, I uncovered key findings and challenges along the way.

Challenges

- Alignment, sizing, masking tasks were difficult and tedious

- Understanding different functions/ features of Photoshop and Adobe XD took long periods of time

- Find a better grid system to help with alignment issues and increase design efficiency.



Key Findings

- Iterations are a normal part of the design thinking process (don't get married to an idea)

- Redirect the focus on user and business goals when overthinking occurs

- Visual and content hierarchy helps me make informed design decisions


Design insights and articles straight to your inbox

Thanks for signing up!
Something went wrong! Try again

No spam, unsubscribe at any time