A Platform for Showcasing Artists and Creatives

What is Helix Skate?

Helix Skate is a company that envisions partnering with artists and skateboarders to create expressive products, as well as support a culture that values the creatives who make the board. Consumers can explore the collection of designs while also learning about the people behind them.

My Role

Physical skate stores typically operate under small margins, with high costs towards the location and maintenance of the location. In addition, competition with big chain retail stores and brands can make it difficult to differentiate in the market.

‍My role was to establish an understanding of skaters personal lives and values, and explore any opportunities to reach skaters in new and exciting ways.

Synthesis

After our extensive collection of data, we created User Personas to help organize and focus on the key opportunities and issues found with the target audience. Primarily, what was overly emphasized was a desire for an easier way to build a digital community around the sport, and connect with others. Discovering other important skateboarders and artists, with a sensitivity around social authenticity, would provide an important emotional need.

These personas were organized into cards of important information that captured the essentials of these archetypes. Rather than spend large amounts of effort fleshing out expansive data sheets, it was important to move efficiently so that we had a solid foundation for empathizing with our target users while we move into idea generation.

Ideation

With the importance placed on both the social and creative aspects of skateboarding, as well as appealing designs being the main draw in a skateboard purchase, we re-examined the business model and came up with a new solution to double the digital store as a platform for the creative designers behind the products. Each skateboard can be a collaboration between Helix and artists or other skaters within the community. While lots of skateboards rely on identifiable icons and intellectual properties, Helix can connect through creative artists and skateboarders.

Prioritization

It was important to journey map early on, to better evaluate what points in the process would pose the greatest risk for the experience. This way, we could brainstorm and evaluate possible features or improvements to the overall process that would positively effect the user. From there, I created an outline evaluating all of our brainstormed features, based on the expected value they would provide to both the business and the user. It was important to ensure each solution would smoothly fit together into a wholistic designed 
experience, so approval for certain features were dependent on if their addition would provide tangible business or user value, and if they would clash with other possible features or tenets to Helix Skate values.

Structure

Through efficient card sorting with target users, I created the sitemap for the Helix Skate online retail store, while also defining the user flow for how the user would theoretically travel through the site to conversion.

The main interest for discovery was figuring out how users search for particular products when it comes to skateboarding items, as they can be sorted by related collection items, product type, gender, etc. What was settled on was highlighting skateboards first and foremost, with other apparel products being considered secondary and sorted by gender. If Helix would expand into offering non-gendered products or paraphernalia, a fourth category may then be considered.

The greatest challenge faced was how to balance showcasing artists and allowing for momentary redirection towards an artist's personal digital presence, while still ensuring that customers would be interested enough to revisit the site. As such, it was important for Helix to not only be a retail platform, but also function as a semi-editorial platform for their partnerships as well.

Quick Prototyping

I originally tried approaching the home page with a slide reel that cycles through lifestyle image highlights, and each image could be clicked on to link to a different page on the website. The issue was there was a lack of clarity on where the C.T.A. was and how it functioned. It seemed to represent an image carousel, which users did not enjoy.

For the products page, the carousel used for each product also proved to be a problem. While scrolling could be used to cycle through each one, there was a lack of responsive feeling, and frustration with how cumbersome the system was.

Key Takeaway

Overall, the lesson is to reduce or eliminate the feeling of carousels and lack of control, especially when simple tasks require extra input than would be necessary. Each interaction should be made as cognitive load efficient as possible, while still being fun to use.

In addition, creating a website that does not utilize a traditional vertical scroll is difficult to leave the user feeling engaged and in control of an experience. Prominent notes were the "lack of feeling interactive" and "like the website isn't informative enough during the crucial key moments where scrolling would be preferable to clicking". As such, additional consideration was made as to how to best utilize a vertical scroll while maintaining a presenter-like quality.

Wireframing

After making sketches based on the user flows and site maps, I designed a set of wireframes for desktop and phone views. Our priorities were to implement the following solutions:

1. Minimize the amount of clicks necessary to view as many offerings as possible.
2. Highlight the creative talent behind each product and how they are relevant.
3. Stand apart from other e-commerce options with interactive elements.
   
   
   

The new product page consists of “style cards ” that the user can gradually explore and uncover more information, while still avoiding scrolling on desktop as much as possible. Every other page features vertical scrolling moments to maintain enough consistency across the website, with the product page functioning more as a simplified showcase with hover interactions.

Give It Some Style

It was important to give the web experience a distinctive style that invokes some of the feelings of the movement of skating. While navigation is still key, the charm of the interactiveness invites the people to stay on the page. The main concern, was how do we balance practicality with aesthetic? It was important to convey attitude, but it also can’t be at the cost of usability.

I started with the Logo, general color choices, and worked my way up from there. The idea is to still invoke some of the aesthetic of modern skateboarding brands, while still retaining some unique flair and simplicity. A primarily black and white style was chosen so that color emphasis can stay on the artists, their imagery, and their skateboard designs, to make them pop off the page.

‍

New Prototype

The new prototype is still focused on strong animation and movement, however, these are much more tied to simpler interaction design mechanics, such as hovering over cards to expand, as well as improved scrolling mechanics. This leaves the user feeling more empowered and satisfied through their tiny interaction decisions. Other key principles implemented were:

1. Use animations to convey a sense of horizontal movement and momentum, to invoke a skateboarding feel.
2. Find moments for overlapping decorative or stylistic elements, without sacrificing readability or simplicity.
3. Use varying states of black and white versus color to mimic "bringing street photography to life".