Aspen Desktop Site

A responsive web-design project featuring an eCommerce clothing company looking to updated their look.

The Client

Aspen started in 1994 as a clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. They believe clothing doesn’t have to be expensive to last and that we should be able to change styles as we need and please. They also have different styles--casual, business, sporty, party, and formal.

The Goal

Aspen’s current website is an outdated informational website that only lists locations, promotions, and a bit of background about the company. Aspen wanted to start with a new logo and an eCommerce responsive website where they can sell their products online. The goal of this project was to create a clean and concise web flow that would allow for a user to find and purchase an item while working on finding pain points within the purchasing process.

My Role

My role in this project was to conduct research, build the design, and do usability testing.

The Constraints

The Aspen site timeline in total was about 10 weeks to complete a simple user flow for selecting and purchasing a clothing item.


User Interviews:

I started with finding participants for user interviews and preparing questions. This aspect of the research was to find what kind of experiences users were used to having when shopping for clothing online. I wanted to find what kind of features were preferred and what kind of things users disliked. I also wanted to know what drove many users to show online vs in person for clothing. From the interviews I conducted this data was collected:

- 100% of participants stated that the biggest convenience to online shopping was being able to search through a large number of items quickly and efficiently without having to spend large amounts of time doing so.

-100% of participants stated that they proffer online shopping when shopping for clothing, saying that it was easier to find the styles and sizes of clothing they were looking for.

-Primarily chose to shop online due to the convenience and due to the Covid pandemic.

-They like the check-out process to say how many steps are left and to be broken up into sections so it doesn’t become overwhelming.

-Some participants do not feel comfortable putting in their credit card information and would like alternative ways to pay at check out; Apple pay, Paypal, etc.

-100% of participants wanted to know the shipping cost before going through the entire checkout process, they would like it listed in the shopping cart with the items.

-33% of participants would like there to be an in-store pickup option to help negate shipping costs.

Competitive Analysis:

After collecting data from user interviews I moved on to conducting comparative and competitive research to gauge what other services were providing. I looked at Nordstrom, H&M, Urban Outfitters, and Old Navy. Each site gave quite a bit of insight into what a functional eCommerce website should have.

Competitive Research
User Persona:

The persona I created was for a young professional looking to update her wardrobe for her new career. With my user research findings, I created a user persona in order to keep the target user’s needs and goals in mind as I moved on to the next phases of the design process.

Building a Prototype

Developing a feature roadmap and a sitemap was essential in starting the designing process for the site because it provides a clear direction, ensures user-centered design, and facilitates efficient development.

Using the sitemap as a foundational element allowed the creation of a user flows and task flows, which, in turn, help in determining which pages should be designed and optimized. This process ensures that the design is closely aligned with the users' objectives and facilitates a smoother, more user-centric website experience.

Once I had determined the pages and features I would need for the site I moved on to creating sketches. I wanted to have a set of sketches for the Home page to get an idea for what I would like to do for the other pages when I moved on to wireframes. I created these sketches because they help build out the skeleton of my prototype and help me layout the pages effectively.

When I had done sketches that had strong design ideas, I then turned my attention to creating mid-fidelity prototype in Figma. I started with the Home page and from there was able to design a Search Results page, a Product page, and multiple pages for the Checkout process.

After the wireframes were created I was able to start working on cultivating the company logo and brand identity. I started by creating sketches for my logo design. I wanted something that felt polished and sleek to attract users like the persona I created of a young professional. For the UI kit I created, I wanted warm colors and neutrals to give almost an academic feel, while using photos that looked aged to create a kind of nostalgia. For the type, I wanted to keep it simple with just two different typefaces, Playfair Display was used primarily for headers and Roboto for body type.

Once the UI Kit was made I was able to move into creating the high fidelity designs for the website. In total there ended up being 7 unique pages with drop downs for selecting through the menu and multiple pop-ups to move the user from page to page. With the high-fidelity designs completed I was able to create a prototype using Figma.

Usability Testing and Interactions

Following the development of the prototype, I proceeded to carry out usability tests. I recruited four participants for testing, with three being tested in person and one remotely. Each participant was instructed to navigate through the website and complete a purchase for a specific women's jacket while I observed their actions and addressed any inquiries. Utilizing the insights gathered from these tests, I constructed an affinity map to analyze the effectiveness of different design elements and identify areas that required improvement in order to enhance the site's functionality.

Affinity Map

Using the feedback from the participants I was then able to go in and edit the high fidelity designs to improve the user flow of the site. I moved the Favorite Button to make it more visible, I created a pop-up for adding to the shopping bag, I made the sign in its own page, and I went through and right-aligned my checkout prices on the pages it was present to be more consistent.

Final Files
Learning & Takeaways

With this project, I learned how to create and test a proper user flow as a starting point for future installments for the Aspen website. By interviewing users, I was able to translate my findings and provide features that improved the overall experience for customers navigating the Aspen website. This project was quite the learning experience for me as I had to design a website from scratch, create a UI style guide, and build an interactive prototype for usability testing.

Next Project : In Queso Emergency