Menu
Surf & Lifestyle
California Original
Katin is a surf apparel brand based in California. I conducted a UX evaluation and re-design of the website. The project’s scope included research, UX and UI design, and branding.
Katin
For the explorers
A website re-design focused on product browsing, viewing, and purchasing was the goal of this project. Additionally, a usability evaluation yielded several problem-areas that could not be ignored, such as navigation, landing page, and global footer. The website’s style was also refreshed to better match Katin’s brand.
Key Questions
From the outset
- What expectations do users have from past interfaces?
- What are other e-commerce apparel websites doing?
- What are the design best practices in the industry?
Takeaways
Purchasing, Findability
Of the many takeaways, one salient finding was that users prefer a page made specially for purchasing, namely, the shopping cart. Having a solid and secure location for any transaction is crucial to user assurance. The site’s previous pop-up window cart contrasted with this practice and was revised.
Many other best practices converged with improvements made from heuristics, such as the relocation of the search function to the top right of navigation to enhance findability, or the addition of a filter to improve browsing efficiency.
Many other best practices converged with improvements made from heuristics, such as the relocation of the search function to the top right of navigation to enhance findability, or the addition of a filter to improve browsing efficiency.
Browsing made easy
Filters, Price, Color
Two important improvements made to this page were the addition of a filter and visibility of product price and color. The filter creates a more efficient browsing experience, allowing customers to shop by category, such as size or color.
Price is of chief rank for most users, so enabling constant visibility on product price and adding indication for items on sale was vital. As a result of these changes, the experience was made more effortless and functional for the user.
Price is of chief rank for most users, so enabling constant visibility on product price and adding indication for items on sale was vital. As a result of these changes, the experience was made more effortless and functional for the user.
Let the product shine
Hierarchy, Ease of Use
Though usable, the original page had plenty of room for upgrades. These were: visual hierarchy, ease of use, and user feedback. Product title, price, details, and other information was ranked and spaced appropriately, which had significant effect on findability. Menus changed to buttons with respect to color and size, and users now receive feedback indicating image selection.
Smoothing out the edges
Cart & Footer
In place of a pop-up window cart, a dedicated shopping cart page was created providing a solid location for purchasing and product review, in addition to following e-commerce best practices.
The footer was also entirely re-designed, with changes to hierarchy, content, and layout. Information about shopping, assistance, and Katin is more available to users, along with a compelling sign up function for special offers and deals.
The footer was also entirely re-designed, with changes to hierarchy, content, and layout. Information about shopping, assistance, and Katin is more available to users, along with a compelling sign up function for special offers and deals.
The user's compass
Navigation
The first of several changes to the navigation was improving findability. This primarily concerned icon position and addition. For instance, the search icon moved from above the navigation bar to inside, aligned right — grouping it with the other icons. The remaining changes involved following design best practices and enhancing information scent.
Mixing things up
Style Refresh
As part of the website refresh, a style guide and style banners were designed to define the look of digital content. It provided a standard for typographic style and pairings, along with image layout. It was important that users experienced aesthetic consistency across the site.
Time for reflection
Lessons Learned
User-experience heuristics can be used outside of building applications and websites. In fact, they are incredibly useful when mapped onto existing products. The bleeding of heuristics into each other was also informative of their universality. Hierarchy may influence findability which, in turn, will influence usability. The importance of detail in designing a user’s experience cannot be understated as well. Every element and absence of an element in the interface plays a role.