Ecommerce fishing site

user experience design | user interface design | e-commerce
Paris | France
Role
business analysis | information architecture | interaction design | user interface design | testing | design implementation
Collaboration
group project with Rose Diquero, July De Jesus, Morganne Lecouffe
Skills
market analysis | branding comparison | brand attributes | feature comparison | stakeholder interview | content audit | sitemap | user flow | sketch | lo-fi mid-fi hi-fi prototyping | usability test scenario & session | brand attributes | moodboard | hi-fi wireframes | colors | typography | alignment | spacing | grids | style tile | responsive design | desirability testing
Tools
figma | mural
Date
2020
Timeline
10 days design sprint
Scope
responsive website
Client
j-peche
Collaborating firms
Link to studio websiteLink to publication

Challenge

Our aim was to help a store owner compelled to close down his store maintain his activity. How might we help the business adapt to the shift in customer’s habits and boost its sales in response to the COVID-19 crisis? How might we improve the purchasing experience of a wide customer base with different ages and levels of fishing skills? How might we maintain a dense quickly evolving inventory? How might we accompany his ambition to share his passion?

Solution

The redesign of a responsive e-commerce site puts forward promotions and click & collect options. We revamped the site’s information architecture with a new organization, labeling and hierarchy of the content and the creation of a catalogue with a filter feature. The business expansion to new activities such as events, competitions and tutorials, as well as the creation of a new brand identity defined by the business owners’ values of sharing, quality and passion would allow him to stay competitive.

A team of designers including myself worked for over a week with a store owner on the revamp of his e-commerce site. Our aim was to boost his sales and help maintain his activity in times of crisis.

Business analysis

Market analysis

User research shattered some stereotypes on fishing. Contrary to popular belief, fishing is not solely for old men. The sport or hobby is very popular. In 2019, we count more than 1 million fishermen in France. One third are aged between 6 and 18 years old. Women display a growing interest of 4% in fishing.

Shops in COVID

Despite its popularity, given the recent sanitary crisis context, fishing has not been very accessible.

Since the start of the sanitary crisis in 2019, small businesses have been put under a lot of strain. Physical stores are facing since January 2020 a 20% decrease in sales and turnover. Shop Owners have turned to online solutions to try and save their businesses. E-commerce has risen by 42% in comparison to 2019. Traffic in the sporting goods industry in particular has experienced a 13% drop. (Source : Content Square, 2020)

Company positioning

From our research on the JPeche’s online store j-peche.com, we quickly understand that there is a family story and passion behind it.

The business offers in store or online shopping. The selection is wide, with various budgets, good value for money products, many suppliers and brands.

Brand research

The business owner seems close to his customers, attentive to client demand, and available for customer service by phone or in store.

The business’s customer base includes all levels, from beginners to experts. Apart from selling fishing equipment, the business owner organizes competitions and activities to share his passion.

Competitors

JPeche’s has 5 direct competitors’ that have an equivalent offer. They sell fishing equipment and goods online. Their websites: ultimate-fishing.net, pecheur.com, pecheaubar.com, materiel-peche.net, pacific-peche.com. Other competitors are the prominent fishing brands. These often have their own website and distributors: Fiiish, Storm, Tenryu, Mitchel, Rapala, Illex, Sakura, Shimano, Vmc. All these competitors vary in the content presented, tutorials, detailed products presentation, delivery, sales, and online presence and brand identities.

Stakeholder interview

Interview guide

Before conducting the stakeholder interview, we prepared a guide.

Firstly, we inquired about the stakeholder and his business.

Moreover, we asked about the company’s history, how the business started, the stakeholder’s vision, the image and brand identity envisioned and the ambition and growth objectives.

We then tackled the covid-19 sanitary crisis to understand how it has affected business and how the stakeholder has adapted, if it had an impact on sales, if he observed a shift in customer’s habits.

Furthermore, we asked about the customer base and target, their age and fishing skills and the best selling products.

We asked to find out more about business competitors, their shops and online presence.

Finally, we questioned him on his expectations for the redesign, ideas for improving his existing online store or adding new features. We wondered if he had future business ambitions to develop other fields than sales.

The interview

His father is a fisherman, “it’s his fault”, as he put it. He would accompany him when he was younger. He started off five years ago selling fishing equipment in a storage area in his parent’s backyard. One year ago, he ventured and rented out a commercial space and set up a storefront.

Like many other businesses, he was not spared from the Covid-19 sanitary crisis. He felt compelled to close down his store. Fishing is considered a sport in France, and requires a medical examination and a licence. Along with social distancing and restrictions, less people were inclined to go fishing.

Some sales are related to fishing season preparation, but no one is buying fishing bait and consumables.

He has different kinds of competitors. Our store has easy to store and not too pricey products in stock. He only orders larger, more expensive products from his suppliers after client orders, which can cause delay in delivery. Bigger specialized fishing stores with more capital and stock respond to client demand faster. Moreover, Decathlon, the sporting goods giant, who he deems more commercial and lesser quality equipment is less costly making it more appealing to beginners testing out the sport.

His clients range from 20 to 30 years old, then 45 to 74 years old, while skipping a generation from 30 to 40 years old. Like any sport, clients have different levels and their skills and technique evolve with time.

As the only specialized fishing store in the 95 department of Ile-De-France, inhabitants far away from the store order products online.

The field is quickly evolving, and there are often new releases that need to be put forward. Fishermen can be very attached to a certain brand, and so the selection needs to be highlighted. While the product’s categories remain the same, the inventory is often changing in store and online. With a great number of products, it’s very difficult to hold an inventory or distinguish online and in-store sales.

The business owner aspires to create fishing events and competitions. He has a partnership with a brand and creates video tutorials for them. Ultimately, the shop owner would like to start a foundation to offer field trips and share his passion with others. He would use the website for informative and scheduling purposes.

Content audit

The business owner has an existing website: j-peche.com. Reviewing it was helpful to get a sense of the information architecture. Our aim was to organize, structure and label the content before tackling the site revamp.

The content audit was very challenging. I might have been fishing with my dad when I was younger, but I did not remember any fishing terms in french. The menu categories are quite visible from the UI organization and labeling, but It is difficult to understand the items and navigate on the site without referring to the product’s pictures.

The hierarchy of some elements is somewhat confusing as some content is displayed without clear titles, such as the image gallery of types of fishing.

Sitemaps

In the current sitemap, the information architecture lacks organization and hierarchy.

One of the main focuses of our redesign was to do a complete revamp of the website’s architecture. The project site map displays the new content organization and hierarchy.

User flows

The current user flow and the project user flow both focus on the purchasing experience.

On the existing website, the current user flow begins browsing on the homepage. The users navigate and the navigation bar to look for an item. The user then browses a product page. When the user selects an item, he places it in the basket.

For our redesign, the project user flow begins on the home page as well. We have created a catalogue, reorganized the products into categories and sub-categories. We have added a filter feature as well. All these improvements aim to offer a more straightforward and easier purchasing experience.

Mid-fidelity prototype

Once we had defined a new hierarchy and content organization, as well as a new user flow, we designed a mid fidelity prototype. We included the new catalogue and filters.

Link to mid fidelity app prototype

Link to mid fidelity desktop prototype

Usability testing

We performed usability tests on 5 participants. The tasks defined for our usability testing:

1- navigate to the menu

2- find the catalogue

3- choose the category “cannes et moulinets”

4- filter by second line of text

5- click on the first lorem ipsum

6- validate

7- select the second product on the right

8- add to basket

9- proceed to payment

From our user’s comprehension and performance of the given tasks, as well as their comments and insights, we identified some intervention points:

  • Readjust the filter button since it was not visible enough
  • Reorganizing some products
  • Improve wording
  • Clarify the type activities and workshops
  • Specify details related to delivery options

As a result we were able to iterate and improve our design.

Brand attributes

For our rebranding, we focused on all the valuable insights we got from the business owner. Our aim was to recreate a universe defined by these brand attributes:

Sharing: The sharing value is in line with the brand culture, a passion driven, family oriented business built on trust. It portrays a family activity and generational tradition with teachable moments.

Quality: Whether in the products or service, quality is a priority. The business owner favors specific brands, is always on the lookout for the latest equipment, and favors quality over quantity.

Passionate: Passion describes the attributes of the business owner and potential customers. They’re nature lovers very fond of sports, who appreciate patience and reward.

Moodboard

While starting to design the UI of the website, we created a moodboard. We collected a great number of images, chose our favorites and composed a consistent moodboard that would reflect the brand.

Style tile

For our redesign, we chose the dark blue color found in the business’ logo as a starting point. The accent and functional colors orange and light blue emerged from our moodboard. We decided to organize our content with informative pictures and clear titles. We also created logos and buttons to maintain harmony and consistency.

Responsive design

Using a mobile first approach, we started with the mobile app design. We would later adapt our app design to create desktop screens and ensure responsiveness.

Desirability testing

We showed our high fidelity prototype for 5 seconds and conducted a brand personality test on a series of participants. We were quite pleased with the result, as we felt it was in line with the universe we meant to create.

High-fidelity prototype

One of the major redesign points was the creation of a catalogue with categories and sub-categories.

Another major evolution was the creation of the filter feature.

Description of the user flow

Our user is looking to purchase fishing equipment. He dives into the fishing universe and lands on the homepage. The first element that catches his eye is the promotion and click & collect options.

As he scrolls down, he discovers a quote about the business owner’s passion, the stakeholder’s selection, workshops and field trips, advice, tutorials and fishing types.

He finds the footer at the end of the page, to reassure him about billing, delivery, contact and legal mentions.

He then navigates to the menu to find the catalogue. The subcategories allow him to quickly browse through the products.

Once on the categories page, he scrolls and selects “cannes et moulinets”. He browses the items then uses the filter to view a specific fishing rod “type de canne: anglaise” and products with promotions only.

As a result, he has fewer products to choose from. He picks the one on the left, ads it to the cart and is reassured by the cart +1 indicator. He clicks on the cart, selects a payment method, selects a delivery method and confirms payment.

Still captivated by the business’ universe and intrigued to find out more, he navigates from the menu to the discovery section “découverte”. He views the advice page “conseils” where he can browse video tutorials, the “atelier et excursion” page to explore workshops and book a field trip.

Link to high fidelity app prototype

Link to high fidelity desktop prototype

I hope you enjoyed the read! Feel free to comment on fishing, UX, UI or any other topic!

READ ARTICLE
HIDE ARTICLE
No items found.
"My father is a fisherman, it’s his fault."
No items found.
"The fresh air is very well transmitted. We can even smell the fresh fish!"
No items found.
"The site looks secure and we get the impression that we will get good advice."