EMES is a small sporting goods store located in Białystok, Poland. It is frequented by long-time customers who are familiar with the owner and what the store has to offer, but has not been attracting a new crowd.
The owner approached me for help with redesigning his website to expand his online presence, highlight his services, and most importantly, set up an online store.
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.
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.
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.
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.
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.
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:
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.
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:
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.