Mobile-First Responsive E-Commerce Website Design
Tamarack Farm Sheep & Wool wants to identify a target audience, refresh their brand, and set up an ecommerce responsive website in which they can sell breeding stock.
Using tools such as pen and paper, Adobe Creative Suite, POP by Marvel, and Sketch my role was to conduct user research, user interviews, create personas, identify a successful information architecture, create user flows, and finally create a responsive high-fidelity UI design of the site to be used in prototyping and user testing.
̌
A Mobile-First RESPONSIVE E-COMMERCE WEBSITE DESIGN
TAMARACK FARM SHEEP & WOOL
Tamarack Farm Sheep & Wool wants to identify a target audience, refresh their brand, and set up an ecommerce responsive website in which they can sell breeding stock.
Using tools such as pen and paper, Adobe Creative Suite, POP by Marvel, and Sketch my role was to conduct user research, user interviews, create personas, identify a successful information architecture, create user flows, and finally create a responsive high-fidelity UI design of the site to be used in prototyping and user testing.
CONTEXT & CHALLENGE
Project Goals & Objectives
Redesign or design from scratch the responsive website of Tamarack Farm Sheep & Wool, a local sheep farm. Consider carefully what role the website plays in the purchase process.
Develop coherent branding that aligns with the farm’s current or desired clientele and customer experience.
Add more unique features, such as making deposits on sheep or sending payment online.
Background
Profit margins on sheep farms are low, with most income coming from selling breeding stock or wool-related products. Most modern websites market a “gallery” view of their breeding stock, asking interested parties to email to indicate their interest in any particular animal in a photo or specific requests for breed, pattern, etc. Once animal purchase is arranged, the seller usually sends a link to PayPal or like service for a deposit amount. Then the purchaser drives to seller’s farm to pick up the sheep or other arrangements can be made for transfer.
PROCESS AND INSIGHTS
Research
The research for this project began with stakeholder interviews, competitor research, and the creation of provisional personas. These helped me get a grasp on the current industry practices and set the tone for my guided interviews with people in the sheep industry in varied levels of experience with farming.
I conducted 3 phone interviews regarding the sheep purchasing process. All respondents were in different stages of owning a farm and all breed Icelandic breeding stock. One farm was less than 5 years old, one was 12-13 years old, and the last was a multi-generation farm that has existed since the 1940s. I used questions focused on identifying pain points in the purchasing process and building empathy with people who do so.
All respondents admitted that they looked online when they were first purchasing breeding stock, but once they established a relationship with a breeder they usually stay with that farm for all future purchases. They all mentioned choosing Icelandic breeding stock for a ‘quirky’ or niche reason. People who choose Icelandics don’t really do it for a profit, they do it for entertainment or hobby reasons.
“You find a place that works for you and they have breeding stock that works with you. A big part of it is finding that relationship that works for you.”
“You can’t replace the personal relationships you have with people. You need to make sure you are working with a reputable and responsible breeder, and we also don’t want to sell to an irresponsible person either.
”
“With commercial crossbreds, they’re looking for proven performers, but with Icelandics and more heritage or specialty breeds a lot of times you’re dealing with a much more educated clientele. We find that just about everyone that we’ve interacted with, usually they’re very highly educated and professional.”
The discussions all focused around some key needs, wants, and opportunities for improvement when building the website for Tamarack Farm Sheep & Wool.
Wants:
To see selectiveness
To see coat patterns and what they carry - genetics information
Easy pick-up/delivery process - usually looking for someone nearby
To feel secure in their purchase
Rams should be proven
To buy from good stewards rather than commercial big business - want personality and “the experience”
Needs:
CLRC Registration Information
Information/FAQ about raising Icelandic breeding stock
To establish a trust with the farmer, credibility, know they’re responsible breeder, supportiveness
More photos of the sheep - shorn, unshorn, to see lineage, videos to see temperament
To feel like they have a personal relationship with the breeder, be able to get in touch easily
From this research, I also identified three areas of opportunity for improvement:
Guarantee the quality of breeding stock. Will provide security to the purchaser as well as credibility to the farm - they’re holding themselves accountable.
Provide personal touch-points in the purchasing process. Establishes a rapport with the purchasing-party and allows farm to evaluate their responsibility-level.
Provide testimonials. Shows potential buyers that the farm is well-known and credible.
These interviews guided me in the creation of essential research artifacts such a user persona and an empathy map, to help me understand and relate to the needs of their key audience.
Information Architecture
After completing my research and building empathy with my users, I was able to identify some clear goals for the website and decide which pages and features could be included. I then organized a card-sorting exercise using about 30 cards to help me identify the ideal categorization of breeding stock on the site.
Using the information from this exercise, I created a high-level sitemap to show the relationship between content on my site, and built a user flow to identify the key pages that I’d be focusing on.
Interaction & UI Design
Using the tools from my research and information architecture phases, I made a rudimentary, sketched mobile prototype using POP by Marvel. It gave me a good head start on deciding which features would show above the fold on my mobile wireframes.
After that, I used Sketch to begin work on my low-fidelity mobile wireframes for Tamarack Farm’s website. I used these to create a navigation-based usability test to test the placement of my call-to-actions and see if people were able to successfully navigate through to adding a sheep to their cart and beginning the checkout process.
Mixed results - laid out in an affinity map - showed that I should reconsider placement and titling of some key elements, and I was able to successfully iterate on these initial wireframes.
From the sucessful mobile wireframes, I was able to build the responsive wireframes for tablet & desktop.
The last step in the process was creating the user interface design of the product. I first created a logo to start my branding process and put together a style tile for the brand.
I then was able to apply the styles from my branding documentation to create high-fidelity responsive designs of some key pages of Tamarack Farm’s website and from there, created a UI kit with common style elements.
SUMMARY
This was such an interesting project for an e-commerce site. I grew up on a sheep farm, and thought I knew about the industry, but nothing could replace the information I gleaned from my research! In the end, I was able to create a website that would be intuitive and useful for the clientele, and valuable to the stakeholders in making the sheep selling process more efficient and reliable.
