Kino Menswear Brand and Web Design
Directory and Development Document
The intent of this project is to showcase both the brand development and web design process via a fictional menswear brand called Kino.
This page serves as an overview to the project as well as a directory for each individual component that contributes to the project as a whole.
Disclaimer: all product images contained within this project are used for educational purposes only. Kino is a not a real brand and I am not financially benefiting from their use.
Design Development Document
Introduction
Kino is a young apparel brand filling the large void between fashionable clothing that falls apart after just a few seasons of use and long-wearing outdoor garments that are best left within the confines of a jazzercize studio or military surplus store.
Kino is influenced by the high and low deserts of the North American West, and aim to make use of natural, timeless fabrics with a healthy reimagining for the 21st century. Our pieces are designed to be put through the wringer, and are optimized for an active lifestyle, whether on the bike, on the trail or around the city.
One of the ways that we seek to signal and demonstrate our commitment to an ever-evolving fashion landscape is via our quarterly lookbook series. Each series highlights new and seasonably appropriate pieces from the Kino collections, as well as styling them in provocative ways with other garments.
Brand Inspiration
They say design what you know. Most of my inspiration comes from my personal experience and shortcomings I see in the world, and all of the fictional products I use in my design projects are products I would truly use if they existed (or would bring into reality if I possessed the time, talent and money).
As a cyclist for fun and function, I have slowly migrated away from the purpose-built racing-derived clothing that one is “supposed to wear” while riding a bike somewhere if it’s going to be considered a “serious” ride.
Similarly, where I live in Seattle, people tend to gravitate twoards the kind of technical apparel one can buy at high end outdoors stores. The average attire at a nice restaurant here is referred to affectionately as a “REI Tuxedo”.
Having cared about fashion since I was old enough to choose my own clothes, I have resisted and pushed back against the natural flow of culture here in the PNW. I believe natural fibers and traditional garments can be “functional”. Wool can be weatherproof. A riding jacket can be both modular and fashionable. Layering is a vital tool for both temperature management and visual dynamism in one’s outfit.
My inspiration for the capsule of garments featured in this prototype came after I purchased my first Pendleton wool shirt around the same time I read a particular editorial about the benefits of wool flannel. Additionally, I had purchased a pair of pants from Taylor Stitch that are constructed from a blend of merino wool and DuPont Sorona fibers, in a dress trouser cut. While not totally water proof, they are remarkably weather-, wrinkle-resistant and warm.
The more one starts to ride one’s bike for more than just recreation, the less it makes sense to wear extremely bike-specific clothing. I am not the first to identify the need for this “hybrid clothing”. Many brands have sprung up to fill this niche, some better than others. However, many of them merely pay lip service and make a bare minimum effort to create clothing that actually excels aesthetically. The few that do do it well are not enough for a consumer in this niche to have a variety of choices, nor can one easily fill one’s wardrobe with these brands (Outlier, Pendleton, Kitsbow) on a reasonable budget.
I consider myself amongst this niche. And as this niche grows, and it becomes a more full market, perhaps the idea will seem less novel. Until that day, I believe every new entrance into this marketplace is welcome.
The initiating document inspired by this vision is the design brief.
Logo
The development of the brand name and logo both stem from my background in the Sonoran desert. The city of Tucson (as well as myriad other cities in this region) owes its existence to a man named Padre Eusebio Kino. An Italian Catholic missionary, he was tasked with establishing a presence for the Church throughout the New World, in what is now Sonora, Baja California and Arizona. His presence preceded the Spanish conquistadores; and accounts from that era tell of his efforts to deal honestly with the indigenous tribes that had been living there centuries before his arrival.
Unfortunately his efforts paled in comparison to the mistreatment driven by the presence of Spain in the region (the Church was complicit or partnered with Spain in many of these cases, so it’s likely his hands were politically tied). Nonetheless, his valiant efforts to spread education and advocate for the indigenous residents of this region endear him to those who make Southern Arizona their home today, many statues exist in his honor. This year even he was submitted for candidacy of Sainthood in the Catholic Church.
The Sonoran desert is the “wettest” desert in the world, by annual rainfall. The summer monsoons will rapidly change the landscape with brutal flash floods, but in their wake they leave a verdant beauty like no other. In winter time, it is not unheard of for the usually hostile-looking cactus forests to be dusted with a layer of snow, a result of the widely varied diurnal temperatures and higher-than-average precipitation systems that move through this region.
I pulled inspiration for the logo from one of the more ordinary, common flora in the Sonoran desert, the prickly pear cactus. Despite its association with the American desert, the prickly pear cactus can actually be found on nearly every continent! The symbol is a flat contour, with a nearly imperceptible gradient. It can be difficult to balance a flat illustration-based symbol with one that appears overly cartoonish. I had difficulty finding that line, but I believe the design I arrived upon is close.
Subconsciously, I pulled the logo design from some other unlikely sources:
1 — a flash tattoo I had done on a Friday the 13th several years ago, which consists of a very basic composite outline in the shape evoking a prickly pear cactus, instead of realistic spines, simple dots. When I tried to reproduce this effect, it did not come across well in logo form; the dots were too small or cartoonish. The larger spots were an attempt from left field. I can’t explain why, but they seem to fit the bill despite lacking much physical similarity to the real thing.
2 — The second inspiration only occurred to me when someone pointed it out: “did you have a pin made with your school project’s logo?” A pin I picked up from the Chicago upscale Mexican eatery, Mi Tocaya, and has lived on a backpack of mine ever since.
The use of the logo as well as the color palette and typography selections is detailed in the Style Guide document.
Webpage Design Inspiration and Process
I am attracted and compelled to the design on websites such as HAY and New Market Goods; simple, largely unadorned by unnecessary flash or fanfare, but with a tasteful dose of whimsy.
I recognized I was not going to replicate that combination of refined playfulness and class on the first try in the time allotted for this project, but I was thusly inspired in my selection and use of color palate in the webpage design. My hope is that the color choices are a departure from what the average user encounters online without being distracting. One of my favorite aspects of the wireframe-to-visual design process is the ability to compartmentalize the organization and aesthetic aspects of each web page.
As I mentioned in the first section, the type of product I am featuring in this project exists in a limited niche market. This, in addition to a distinct aesthetic inspiration introduced the challenge of finding photography that would be fitting of a high-fidelity prototype. Not only did I need to find product photos that resemble the products in my fictional capsule, the all real world photos had to reflect each product’s alleged use case and stay true to Kino’s desert heritage.
Rather than try to reinvent the wheel with the checkout process, I leaned heavily on a checkout format I see used frequently on other modern e-commerce sites. The more familiar a process is to a user, the better.
Take a closer look at the wireframes and comps here.
User Evaluation & Feedback-Driven Improvements
Rather than design my own opinion, it is crucial to get user feedback early and often in the web design process. Specifically for the scope of this project, I wanted to test two aspects of my design: the ease and usability of the shopping & checkout process, and the look & feel of the website.
To do so, I generated six questions asking the user how the website compared to websites of similar products or brands, as well as the how they felt navigating through the purchasing process.
I decided to limit my survey respondents to those explicitly within my target market, namely adult males between the age of 22 and 40. Unfortunately, this limited my pool of potential feedback, but I felt it would be most beneficial for gathering feedback relating to brand identity and look & feel.
Despite a small sample size and a relatively short survey, the mere act of exposing the design to multiple eyes within my target audience produced useful and actionable feedback. This mainly came in the form of feedback regarding discoverability within the checkout process and in general. My visual design direction was more less validated by the feedback, along with some helpful critiques regarding color usage.
The main changes made to the design are documented in the DECIDE document. Generally, I tweaked the color selection so that the magenta swatch is used more consistently to draw the user’s eye to changing information, calls to action and otherwise explicitly important details, rather than just adding a vague “pop of color” (which tended to be my reasoning in the initial mockup).
Where possible, I increased text size used for the title and price associated with the product thumbnails on the front and category pages. Where certain cues were more subtle before, I used color and strokes to enhance said cues’ presence within the layout (for example active size selection on the product page, new items added to the cart).
Lastly, one frequent complaint was that the proceed to checkout button was difficult to find in the first draft. I remedied this by bringing the button above the break in the page, and then changed it to the new call to action magenta accent color.
First in the series: Design Brief
