A responsive web-design project featuring an eCommerce clothing company looking to updated their look.
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.
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.
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.
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.