
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.


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.


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.

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.

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).

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.

UI Elements

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.

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:
​
-
Apply a hover state on interactive elements to inform users
-
Overlay the Search and Account (log-in) functions to avoid loading new pages
-
Eliminate scrolling at Checkout by minimizing form upon checking "Same as Shipping Address"
-
Include CTA (Back to all Products and Continue Shopping) after viewing individual products and order

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:
​
-
Added arrows to adjust quantity of product
-
CTA to Shop Now in the middle of the landing page as the menu is not fixed
_gif.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.)