One of the assets I created in Photoshop

Logo

C3 was ultimately the chosen logo. It brings forward the meaning of the store's name with a more prominent "M" and "S", follows the bold typography style of similar brands, and still manages to add a little twist making it more distinguishable.

Style Tile

As with the logo, bold bright colors are a distinguishing feature of leading sports brands and websites. Images of athletes typically feature them performing adrenaline-inducing tricks in brightly colored clothing and gear. It shows the confidence of the athlete, their trust in the gear to handle complicated maneuvers, and of course contributes to the "coolness factor." I wanted this website to convey these feelings through its pages, but to also invoke them in its users.

Bold typography, bright colors, texture, and intentional disorder are used to create an exciting experience. The overlaps, saturation, and unexpected structure are meant to keep the user engaged and in a state of alertness, mimicking the feelings felt during participation in water and snow sports.

The name of the store, EMES, is a play on the pronunciation of the initials "M.S." of the owner. He did not have an existing logo when I began my work and I wanted to create something for him that would be bold and would follow the blocky text pattern that can be seen with brands like Nike, Vans, Head, or Atomic. As this is a style used by many sports brands, creating a logo in this style was considered a way to generate trust in the store and credibility as a sporting goods seller.
‍
The ideas presented below reveal several logo versions. During the summer the store mostly handles windsurfing sales, and during the winter, ski sales. A1-3 and A4-C show this incorporated in the logo, but ultimately these were rejected as they were very tailored to one season over another.

Site Map

I created this sitemap to organize the structure and content of the website before I began building it. This helped bring to light the differences between the summer and winter offerings and is what led to creating the toggle switch that can be seen in the top right hand corner of the site. The website can be summed up to five main pages: Home, Store, Rentals, Lessons, Conditions, and About.

Wireframes

Here are a chosen four wireframe screens, with the digital wireframes corresponding to the sketches above them. I decided to prototype in Framer in order to gain familiarity with the software, as it was my first time using it. It is not a software intended for design, but using it in this manner allowed me to explore its features and capabilities which I then implemented in my final design.

I knew going in that I wanted to implement the parallax effect throughout the pages, which is why you notice overlapping boxes and varied placement and effects of the typography. The overlapping boxes demonstrate an intermediate state of the tiles while scrolling.

Assets

In order to create the kind of imagery I wanted for the parallax effect, I needed to learn how to use Photoshop. Throughout my website design you will encounter a number more of these assets, but I wanted to present these four as they show the main kinds of tools and effects used.

The first two images are hero images for the winter and summer site, respectively. My focus was on creating a blend between action and the business's logo. I wanted the user to begin their journey on the site with a sense of excitement, and by merging the action shots with the logo, I was able to create a strong association of the site with adventure and adrenaline.

The bottom two assets show another way that I merged site information into imagery. In my design, the different layers are animated on scroll.

Prototyping

Creating the prototype was an exhaustive process that required great attention to detail. The gif above consists of 22 separate layers to create the effect.

As you scroll, the "Rentals" text weaves itself between the skiis on the gondola, the skier is moving down, the mountain is growing, the text decreases in opacity, and eventually the skier image is replaced with its black and white counterpart as the tiles scroll into view. This is just a snippet of the many similar effects founds on the site.

Testing

Since this website is intended for e-commerce, it was important to test that functionality and flow. To make sure users were able to navigate the site, I asked my test subjects to complete three main tasks:

Think of a product that this website offers and show me how you would go about finding it.
Imagine you are in need of snowboard boots. Show me how you would find them on this site.
Imagine you need to rent ski boots. Show me how you would find those on this site.

I had asked my subjects to think out loud throughout their browsing process, and was impressed with their ability to articulate and point out pain points. In addition to their verbal feedback, I was able to observe them navigate the interactions on the site and compare it with the intended effect and my hypotheses on how users will behave. I have summed up the comments and observations from my tests in the affinity map below.

Affinity Map

I was delighted to find that all my test subjects were successfully able to perform all three tasks stated above, and I was surprised that all of them had done it in the same exact manner. To use the example of finding snowboard boots to rent, everyone used the nav bar to navigate to the store section, then used the large "gear" text heading to get to next section, then used a category filter to go to the snowboard section, and from there found the boots. I thought this was interesting as I had shown the boots in several other places on the site, but no one scrolled down in their quest to find them until the very final page. I show that flow below.

Thanks to this information and my subjects' input, I was able to make improvements to this (and other) flows to improve the user's experience.

The flow pictured above represents the design after changes have been implemented, and those changes are as follows:

Created a timed interaction for the black store background, so that once the page loads, the screen automatically goes up to reveal the gear, clothing, and accessories categories. This was previously an animation that was triggered when the users hovered their mouse over the background, but I found this to be confusing in testing
Changed the names of the category pills to make them more clear
In the gear section with the light blue background, I made the heading and blue background shorter to encourage the user to scroll down at that point
I changed the styling on the product tiles. They were previously multi-colored, the eye and text were larger, and they had a shadow. Users noted that these were distracting, but to maintain the interactivity of the site I replaced these with more subtle movements within the tile - growing image and moving text.
I had previously created a smooth scrolling effect for the product images, but once users got to that page, they were not clear that they had to scroll down. Some also noted that they wished they had thumbnails to quick through, as the scrolling was taking them too long and they just wanted to get to the point.

Other useful input I got from most my users concerned some of the scrolling interactions. They felt that the amount of horizontal scroll that was happening on the home page with the store tiles was too much and distracting, and they had a hard time with the rental tiles, as they scrolled at different speeds and would scroll past the viewport. I changed the horizontal scroll so that it was a lot subtler and gave the user a lot more control, and glued the rental tiles into place once they scrolled into view.

Overall, users were delighted with the interaction with the snowboarder on the home page (he moves when you move your mouse over him), enjoyed the bright imagery, and were able to navigate the site with ease.

EMES. A sporting goods store.