top of page
Joyce Truong
Mockup2.png

Kallus

An online desktop and mobile shopping experience for kallus, a performance brand that reimagines the packaging of loose chalk.

Project Overview

Kallus was conceived when I noticed the potential in designing a more user-friendly container for loose chalk to refill chalk bags with. A simple e-commerce website (desktop and mobile) was needed for the distribution of these designs.

​

As a solo designer, I owned the entire design process - from the conception and branding of the physical packaging to the user interface and user experience of the website.

My Role

UI Design

UX Design

Graphic Design

Project Timeline

1 month

User Research
The Objective

Performance chalk (used by athletes, including climbers) is typically packaged in resealable pouches, occasionally breaking at the seams. They are often cumbersome to refill chalk bags with, so I was challenged to explore a solution for this problem.

noun-bag-169438_edited.png
noun-chalk-bag-61504.png
The Product

Chalk is a tool used by climbers to reduce the moisture in their hands and improve the friction between skin and rock. It is made from mostly magnesium carbonate, which is very effective at absorbing water without breaking down.

Demographic

Climbing, at its root, is an activity which demands a respect for the outdoors, and climbers, as a demographic, tend to be more thrifty and eco-conscious.

noun-demography-2696235_edited.png
noun-trend-4918897_edited.png
User Growth

Indoor climbing in North America has grown to a 700 million dollar industry in the last five years alone. In IBISWorld's 2018 Industry Report, the Climbing Wall Association projected revenue growth percentages well into the double digits for both 2019 an 2020, with the indoor climbing industry poised to break the billion-dollar mark in 2021.

Designing the Solution

As an inexpensive commodity, containers (much like milk cartons and juice boxes) made from inexpensive materials were considered. I ultimately chose a container made with recyclable materials with a narrow enough opening for refills. This particular product packaging targets climbers.

Free Juice Box Mockuptransparentnologo.png
Design Direction
The Brand

kallus is a reference to the universal struggle of all athletes who require the use of their hands - calluses! The wordmark for kallus was born from the continuous reference to hands, grip, and fiction of this product. The "allu" of "kallus" connect to form a simple outline of the knuckles of a hand, with one of the knuckles shorter than the others to illustrate the pinky. 

Frame 1.png
UI Style Guide
Colours

The world of climbing is very colourful, so I chose a pastel palette of various contrasting colours in appreciation. The contrast ratio of the kallus colours well exceeds the minimum contrast ratio of 4:5:1 as required by WCAG 2.0 (Web Content Accessibility Guidelines). 

Style Guide_edited.jpg
Typography

The typeface used to create the logo is also used throughout the website and UI elements. Using simple heading styles reduce clutter, making content more accessible.

Style Guide_edited.jpg
UI Elements
Style Guide_edited.jpg
Designing the Experience
User Flow & Site Map

With a small assortment in mind, I mapped out the user flow of a simple website where almost all pages can be led back to the home/landing page and several CTA to through various methods of navigation.

Blank diagram.png
Testing with Wireframes

Using Figma, I created wireframes and a clickable prototype of the shop component for a first round of usability testing. By testing early, I captured areas of improvement before developing the designs further:

​

  1. Apply a hover state on interactive elements to inform users

  2. Overlay the Search and Account (log-in) functions to avoid loading new pages

  3. Eliminate scrolling at Checkout by minimizing form upon checking "Same as Shipping Address"

  4. Include CTA (Back to all Products and Continue Shopping) after viewing individual products and order

wireframes.PNG
Final Prototype

Using Figma, I created a final prototype that included the suggestions from the first round of testing with the addition of a couple more elements:

​

  1. Added arrows to adjust quantity of product

  2. CTA to Shop Now in the middle of the landing page as the menu is not fixed

ezgif.com-gif-maker (4).gif
Conclusion
Result

The final result received some really positive feedback with particular note to the following:

​

  • The website does not rely on colour in its website elements and provides accessible design to users who cannot discern colour differences - the contrast ratio of the website well exceeds the minimum

  • The website makes use of simple heading styles, white space, and placement of elements to reduce clutter

  • The CTA to Shop Now in the middle of the landing page results in minimizing scrolling by the user

  • The hover state, using secondary colours, was effective in indicating interactive elements

Reflection

Many decisions I made were based on maintaining the simplicity of the product. After reviewing the final prototype with my peers, I decided on the following improvements should the assortment expand in the future:

​

  • Fix menu to the top of the page so that the user has access to it at all times

  • Include breadcrumb navigation to inform users of the relation between their location and higher level pages

  • Include "quick add" to All Product page to eliminate need for users to load a new page

  • Increase the size of the arrows to adjust quantities 

  • Expand on the elements under Account (history, etc.)

bottom of page