Smiles To Your Door

B2C ECommerce Company that specializes in creating unique handmade, eco-friendly picture gift boxes and cards for any occasion!

Role:

UX/UI Designer on a team of 5

Duration:

6 weeks

Tools:

Figma
Zoom
Google Meet
Slack

Website:

https://smilestoyourdoor.com/

Process:

Discovery
Ideation
Design
Dev Handoff
Reflection

Overview

Smiles to Your Door is an e-commerce store that creates unique gifts by hand for all occasions. Smiles to Your Door called on our team to redesign the online storefront! The objective was to strengthen and complement their user interface for the entire shopping experience for the customers. Our team accomplished this by utilizing an audit report to help provide insight into our design.

The Problem

Our team found multiple usability issues on the client's website, particularly with the home page. The ineffective use of white space and confusing information architecture made navigation difficult, leading to user frustration and abandonment before purchasing.

The Solution

Our team was able to use a user-centered approach. We utilized the audit report, research, and client input to develop our solution. We solved the usability issues by providing a solid information hierarchy, cohesive colors, typography, and spacing, to have the users focus on their products and the site's usability.

Discovery

Website Evaluation and Research

Kickoff:

We started our process with a kickoff call with the client. They were looking for an easier-to-navigate home page, more competitive usability, and a more straightforward purchasing process while keeping the site welcoming and fun. Our team was given a site audit and a competitor website, MakeItMine, to get ideas.

When starting our site audit process, we wanted to have an open mind on how we could improve this app with the competitive analysis provided by the client and our research on MakeItMine. As a team, we reviewed each page and user flow better to understand the significant differences between Smiles and MakeItMine.

Site Audit Findings:

Hard to navigate the home page
Hierarchy had no importance
Stock Photos that made seemed out of place
Information cards seemed redundant but also unnecessary
Unnecessary items throughout the website

Each person on our team reviewed each site page and made notes to provide our clients with what we thought would allow us to make a better website. We developed a list of questions that clarified their wants for the site's colors, layout, and architecture, allowing us some creativity.

Client Questions/Answers

We developed questions for the client to ensure we were calibrated with their wants and needs for the website. Speaking with our client clarified our design intentions and goals for this revamp for me. As my team moved into our competitive analysis, we were able to understand our client's needs and look for inspiration.

Client questions:

How similar would you like your website to be to Make It Mine?
Are there photos of you and your team that we can use instead of these stock photos?
What type of issues are your users currently having with the website?

Our findings were:

Decreasing white space on all pages
Intentionality with the navigation to the shop pages
Utilizing space for relevant information

Competitive Analysis

Part of our research involved a competitive analysis of Make it Mine, a top competitor for Smiles to Your Door. We evaluated their website to gain insight into aesthetics and best practices for this market. We did this by walking through the website compared to Make It Mine.

We learned that Make It Mine was more:

Playful design and unified color palette
Consistent, clean, and modern look throughout all pages
Straightforward and easy navigation for the best user experience

Ideation

Medium Fidelity Wireframes

After completing our evaluation and call with the Smiles team, we could start designing! We distributed the pages across the 6 of us to ensure the project process was on time.

As a UX Designer, My team leader assigned me to work on problems on their Environment and About Us pages.

When starting the wireframes, I started with a desktop frame and a 12-column grid to ensure everything was evenly spaced and aligned to provide an easy handoff to the developer.

I added inspirational photos alongside my work to give me visual ideas as I discovered the existing pages' pain points. I settled on a clean and playful look as the design layout was user-friendly and familiar to other websites in the e-commerce spaces.

Design

Design Iterations

Home Page Iterations

Our client wanted us to have 4 different UI Iterations to help them decide a stylistic approach they would like to take for the rest of the site. Our team divided the work and allowed us to design our UI iterations for the home page.

I went for a more clean and more straightforward approach as I wanted the user to focus more on the product and find the page's usability simple. Please see below for my designs and inspirations.

As a team, we each did two designs, and my second is based on the fun flow of Make It Mine, shown below, next to the more simple design.

Final UI Iterations

Ultimately, one of our other teammates had the creative idea to have a scrapbook-like tape to provide a comforting feeling of scrolling through images and helping the user follow along on each page while providing a friendly look.

The feedback we got from the client is that they liked the soft colors, welcoming colors, the scrapbook-like design, and overall, it had less white space but kept you focused on the information on the page.

Style Guide

Our Team collaborated to modify the style guide throughout the project. Once we got feedback from the client, we aligned the style guide with their vision, focusing on color usage and typography. They intended to have more information on the pages with less white space while being a fun and visually appealing website. This involved creating a cohesive color palette, buttons, typography, and icons.

I assisted in creating the footer to allow the user to find more information and pages at the bottom of the screen and want to see more ways to connect with Smiles to Your Door.

We chose items in this style guide to:

Build an informational blueprint to enhance functionality and hierarchy
Gender-neutral color palette to promote diversity and inclusivity to increase user engagement
Cultivate a clean and modern style with unified typography and styles
Update icons and provide new images to provide more playfulness to the page
Develop components to ensure efficient and scalable design

High Fidelity Wireframes

I designed the Environment and About Us pages solo while our team gave feedback on all pages to ensure everyone had input. My focus was creating a welcoming and informative design by creating cohesive pages encouraging users to scroll. After completing the style guide and getting approval from the client on our UI iterations, we moved into high fidelity wireframes. With the organizational mindset listed above, we dove into each high fidelity page to ensure everything was kept in mind.

Prototype

Our team collaborated on clean, annotated notes to ensure the design was developed as intended, outlining proposed changes with the client's development team. We focused on enhancing the user experience, resulting in successful deliverables that met the client's needs. The developers were able to access our prototype for further insight into the design's functionality.

Developer Handoff

Reflection

I was impressed with the results of my team and my work. Originating creative ideas with our UI iterations was one of my favorite parts of being a part of our team. We created a playful and clean look while enticing the user to want to look more into the scrapbook-like face we made.

Since we used Figma, we could create a component library and local styles. This ensured our design was consistent and cohesive. We also developed color palettes and text hierarchy to reduce error and allow for design optimization throughout the multiple screens and designers.

Another significant benefit to our team was our communication and collaboration throughout the design process. Since we had a 6 week sprint, this helped ensure excellent time management. When working with a team, we allowed each other to voice our ideas and opinions while designing to ensure we could provide the client with the best design possible!