Yeti Skins currently has no way to sell their product online and has yet to start establishing themselves as a brand. The challenge was creating an accessible website that would fit the needs of the consumer.

For this project, I decided to utilize the design sprint method. Which has you pick a focus target, or problem, on the first day and then spend the next 5 days creating a solution for that problem and testing it with a target audience to see if what you spent the past week working on actually works as a viable solution. The design sprint is used by google and is a great way to rapidly iterate on designs.

Before I began designing a website for the company I had to pick a target to focus on. This would help keep the scope of the project reasonable and prevent me from going down the rabbit hole of wanting to add every bell and whistle imaginable as the project went on. For this I used Figma to act as a digital whiteboard of sorts and created a list of as many problems as I could.

Throughout the process, we wanted to make sure we kept the users’ needs in check. To help us do this we mapped out an empathy map as well as made a few user journey maps to build a sense of empathy with the people who would be using the website.

To fulfill customers needs, we decided the key MVP (Minimal Viable Product) for this website would be to have;

With the MVP’s established I got to work sketching out different possibilities for design solutions for the website. One of the bigger decisions we made here was whether to have the homepage be mainly filled up by the product images or to have it broken up into easier bite-sized chunks. You can see this from the left and right images above.

Since we wanted to keep accessibility in mind throughout the design we opted to go with the "Info maniac" design as the "loud and proud" version would make it difficult to have alt text that would allow for those with vision disabilities to be able to browse the website.

The sketches were brought into the design program Figma and turned into wireframes, also known as the skeleton for a website. A few corrections were made during this phase mainly revolving around re-sizing elements. The top page header, for example, and the shopping cart icon was way too big! The product view page was also adjusted to feel less big on the screen. Thus the saying bigger is better was debunked and we all went home, feeling successful.

I asked the client if he would be willing to put together a mood board of different designs that he liked and based on those I would begin to work on a style for the website.

After presenting the client with different iterations as seen above, he settled on a mix between the 2nd and 3rd. The typeface that was used on the second he liked, but decided he loved the all black and white aesthetic of the 3rd iteration. With the clients approval I got to work on finalizing the style guide for the website.

After 3 days of sketching, planning, and talking to the client, the final prototype had been created and was ready for usability testing. However before pushing it out to users we took one good long hard step back and looked at it with eagle eyes to spot any errors that we might have missed. While looking at it there was a few accessibility issues that were found and addressed below.

The biggest key changes that were adjusted for accessibility was making sure there was proper alt text. as well as creating a greater contrast for those who might have problems with their vision. Labeling the colors also helps those who might be color blind to be able to know what color it actually is that they are picking.

It was the dawn of the final day! The product was looking nice, and we had come along way since day one. However this meant it was time for the scariest part of any UX project, the usability test.

The first discovery that was made revolved around the size and color chart. The clickable area that the user would have to use to get the drop-down menu to appear is represented by the red box. After performing testing we noticed users would always click on the box, and not necessarily the arrow in the box. With this info we changed the clickable area to be the whole box making it much easier to click as shown by the second image.

The next change that was made was done on the same screen. This change revolved around where the user needed to place their cursor to be able to scroll through different images. Originally you had to be hovered over the image to get it to scroll, however after the tests we noticed most would attempt to scroll just about everywhere on the screen so we adjusted the scroll box to fit the screen as seen on the right.

The final, and probably the biggest change that was made had to do with the user flow going from the product screen, to the checkout screen. During the test one user noted that the process felt a little abrupt going from page to page to page. To help ease the user into the checkout screen we decided to opt for an overlay that would appear after the user clicks add to cart, giving them the feedback that they need to know it worked, but also not making them commit to the next page in case they would like to quickly go back and browse. Before marking this as the best solution we would like to do more AB testing to find out what others would think.