Sugar Pine Quilts

We know we have done our job when our users feel empowered, confident, and above all, intelligent.

INTRODUCTION

I worked through the four-step user experience design process which includes user research, design, testing, and implementation. The following topics were covered: history of user experience, user behavior, cognitive processing, personas, web analytics, content strategy, information architecture, writing for the web, user-centered design, usability testing, and accessibility. Using current technologies and tools, I created a basic web/mobile application.

ROLE

UI/UX Designer and Web Developer

TIME

Aug 2022 - Dec 2022

TOOLS

AdobeXD
HTML
CSS

Process

PERSONA

Creating a persona helped me understand the users' needs, experiences, behaviors and goals. Creating the persona helped me step back and look from a different perspective and help me recognize that different people have different needs and expectations.

STYLE GUIDE

Creating a style guide is essential for defining or re-imagining a brand's image from both editorial and visual perspectives. For this project, I aimed to create a website with a creative and elegant feel.

The client expressed a love for the color purple, so incorporating her preference was important. Initially, the chosen purple was too vibrant and gave the site a circus-like atmosphere. I adjusted the colors to create a more subdued, elegant, and beautiful design.

LOW-FIDELITY WIREFRAMES

Designing a low-fidelity wireframe allowed me to make sure we had placement for all the content the client wanted on her website and help forsee any future problems.

Mobile Size

Mobile medium fidelity wireframe of home page

Mobile medium fidelity wireframe of product page

Mobile medium fidelity wireframe of about page

Mobile medium fidelity wireframe of contact page

Desktop Size

Desktop medium fidelity wireframe of home page

Desktop medium fidelity wireframe of product page

Desktop medium fidelity wireframe of about page

Desktop medium fidelity wireframe of contact page

WEBSITE BUILD

Building this website solely with HTML and CSS taught me a great deal about the dynamics of CSS, including its capabilities and limitations.

Medium fidelity wireframe of product page

Medium fidelity wireframe of contact page

REFLECTION

Reflecting on this project, there are numerous UX elements I would have loved to integrate if I had more time and could have used Bootstrap. I thoroughly enjoy collaborating with clients and incorporating their input on design elements desired for their site.

If I were to do anything differently, I would reduce the repetition of design elements, particularly in the footer, to minimize redundant code. Additionally, I would reformat the blog articles into cards, update the titles on various pages, consolidate the washing instructions to a single page during the checkout process, and break up the larger text areas for better readability.

PHOTO CREDIT: Photos on this page can be found at Unsplash. Other photos were taken by myself.

Previous Project

Next Project