Spinners Supply Co.
Branding, website and eCommerce UI design for a fictitious company that provides vinyl enthusiasts curated products to maintain and preserve their collection.
Company Profile
Spinner’s Supply Co. is a start-up looking to provide vinyl enthusiasts with a curated collection of supplies for; cleaning, playing, and storing their vinyl record collection. We’re a company that's passionate about music and providing a tailored experience to like-minded collectors and vinyl junkies.
Goals
Our goal is to begin building our brand and client base. Our company would like to position itself as a provider of accessories akin to those found at independent brick-and-mortar record shops, but providing the convenience and tailored curation an online experience can bring. We need to build awareness in a space currently occupied by established brands, and both brick-and-mortar and online shops. Our focus will be solely on accessories, phono cartridges, stylus, cleaning supplies, small storage solutions, and organizers. Current competitors include; Turntable Lab, Bags Unlimited, and Sleeve City.
Target Audience
The site will target vinyl collectors, specifically 25-35 years of age, the same demographic largely responsible for the current resurgence and continued growth of vinyl record sales. They have disposable income and are willing to spend to build their collections. We are looking to appeal to collectors who are passionate about collecting and looking for unique products alongside required supplies to help protect and maintain their collections.
They value authentic companies and provide a sense of passion for music and collecting. Our target audience is interested in physical media and the tangible experience of owning their music rather than streaming it. We would like to avoid the pitfalls of catering to a specific collector type or narrow to any one specific genre of music. To support this, we are opting to not carry any music, only supplies, and accessories.
Branding & Identity
Color
The color palette is reminiscent of the bold labels adhered to records; creating a sense of lineage to the past while adhering to modern aesthetics and web display best practices. The primary and secondary color palettes will play well with the visitors of the site, evoking a familiarity with the soul and jazz labels of the 1960s and ’70s. While the site will utilize a warm, bold primary palette for headers, navigational highlights to draw user’s attention, the use of a secondary palette of cool grays and white space will provide a counterbalance.
These colors are listed in the following color models; RGB and HEX values for web and screen.
Primary Palette
RGB: 255, 172, 13
HEX: #FFAC0D
RGB: 232, 132, 12
HEX: #E8840C
RGB: 255, 102, 0
HEX: #FF6600
RGB: 232, 68, 12
HEX: #E8440C
Secondary Palette
RGB: 157, 157, 157
HEX: #9D9D9D
RGB: 68, 68, 68
HEX: #444444
RGB: 81, 81, 81
HEX: #515151
RGB: 51, 51, 51
HEX: #333333
Logo Design
With a focus on selling vinyl record supplies, the logo needs to represent the company, and appeal to our target audience. The final variant of a 45 RPM record label keeps with the retro vibe of the primary color palette. The final logo design incorporates many of the characteristics of 45 RPM record labels; bold color, and typographic presentation.
Logo variants explored before finalizing design (right).
Wireframing Spinners Supply Co.
Determine site layout, main site navigation, and content organization. Specific focus on eCommerce UI and workflow.
Home page layout.
Main category page with featured product.
Product detail page.
Shopping cart -view items.
Checkout workflow -Input customer information.
Checkout workflow -Select shipping method and address.
Checkout workflow -Payment information and order confirmation.
To view a PDF containing all wireframes, click the ‘Download’ button below.
Initial Mock-ups
Incorporating wireframe feedback, final design elements and product details.
Home page with featured products and promotions.
Category, Cleaning Supplies main page.
Selected product detail page with suggested companion products.
Shopping cart view with added product.
Shopping cart summary, customer information input.
Shopping cart -select delivery method.
Shopping cart -select payment method.
Order confirmation screen.
To view a PDF containing all mock-ups, click the ‘Download’ button below.
Prototype v.1
The following prototype incorporates initial mock-up feedback in preparation for usability testing . It enables a specific workflow of selecting a product and completing a purchase.
User Testing
The user tests conducted will play a crucial role in assessing the effectiveness of the current site's design and usability from the perspective of potential users. Through these tests, we aim to gauge the performance of the existing interface and measure users' proficiency in accomplishing day-to-day tasks on the platform.
Methodology
Sessions
User tests were conducted using a prototype of the Spinners Supply Co. website. The test participants answer a series of questions to assess the usability of the interface, workflow of routine tasks, and overall perception of the site design.
All participant answers and comments were recorded via audio and notes taken by the test administrator. Only the test administrator and the participant are present during the test session. A total of four participants will complete the user test, with sessions lasting approximately 30 minutes. Upon completion, participants will complete a five-question online survey.
Note, all user test sessions were completed in the private home, or office of participants from December 3rd through December 9th, 2018.
Participants
Participants were recruited through direct questioning to gauge interest and willingness to complete the task scenario test and post-test survey. The four participants are representative of the demographic of working adults, that have an established enthusiasm for music and/or vinyl collecting. After receiving a verbal agreement, appointments were scheduled along with providing consent forms for their review and signature.
Participant One -25 year old male
Participant Two -38 year old male
Participant Four -34 year old female
Participant Three -46 year old female
Preliminary Questions & Evaluation Tasks
Task scenarios were based on two goals; evaluating the primary eCommerce function of the site; by purchasing a specific item and the ability of users to sign-up for the Spinners Supply Co. newsletter.
All participants were provided the following two tasks to complete:
Locate and purchase a Mobile Fidelity record cleaning brush with Priority Shipping with a Visa credit card.
Sign-up for the SSC newsletter
Questions
Prior to completing two routine tasks, participants were asked the following questions to gauge their initial perception of the site’s design and to solicit non-contextual feedback:
Have you ever seen this website before?
Please give me your initial impressions about the layout of this page and what you think of the colors, graphics, photos, etc.
Without clicking on anything, please describe the options you see on the home page and what you think they do. Feel free to move around the page, but again I’ll ask you not to click on anything right now.
Without clicking on anything, if you were exploring, what would you click on first?
What do you think is the purpose of this site?
Testing Responses
The general perception of the design was positive, with many of the participants noting a “retro” or “throw-back” influence on the design aligning with the intention of the company’s branding. It was clear that all participants felt the site was well designed, with a clean presentation and easy to navigate and functional cues. The following recommendations will be implemented based on the direct feedback of user testing. The aim is to assist in the improvement of the user experience and specifically address problem areas within the site.
Featured Products -Two participants noted that they were not initially aware that the images on the home page were specific to featured products. Additional context of product information for each image will be added to make their presence more clear.
Custom Shipping Address -Currently there is no feature to enter an alternative shipping address from the payee’s information entered during the checkout process. The ability to add a custom address will be included.
Shipment Times -The selections available for shipping do not have estimated times for delivery. This will assist with setting expectations with customer and aid them in making informed shipping decisions.
Tagline for Company -Although the site’s intent was clear to all users, one participant recommended a tagline relating to the company’s focus would eliminate any confusing to what products are available or the focus of the company.
Task Completion Success Rate
During the completion of the two provided tasks, the administrator observed the participants while completing the required steps, noting issues, comments, and concerns. Also, task completion was timed to determine the user's time-on-tasks. The chart below lists the two required tasks and time-on-task (TOT) in seconds for each participant.
Task One -Product Purchase
Task Two -Newsletter Sign-Up
All participants completed Task One; locate and purchase a Mobile Fidelity record cleaning brush with priority shipping with a Visa credit card. Three of the four participants (75%) completed Task Two, sign-up for the newsletter.
Post-Test Survey
After each test session, participants were provided access to an online, five (5) question survey soliciting additional feedback. Each participant answered the following question; the first four based on a 5-point Likert scale (5-Strongly Agree, 4-Agree , 3- Moderately Agree, 2-Disagree , 1-Strongly Disagree )
Is the website's purpose clear?
Overall, the website is easy to navigate.
The information related to product listings is clear.
The website's capabilities is what I expected.
If you could change one thing about the website what would it be and why?
Survey Responses
The survey yielded positive results with 100% of participants noting they Agree or Strongly Agree (a weighted average of 4.5) with the statements in questions one (1) through four (4). The final question is opened ended, soliciting recommendations for changes to the site.
The three participants that provide a response to questions five (5) included the following recommendations for changes to the site design:
Correct few spelling errors.
Creating a tag or sentence at the top of the site to see clearly what the site is selling.
Include customer reviews for product listings.
Responsive Web Design
Taking the fictitious company’s website a step further, the following is a rendering of responsive website design. While the site is non-functional beyond layout presentation, the design is further refined, building on concepts explored in the prototypes created for user testing.