Torch and Anvil Design Framework

Design rationale version 2.3

Research and wireframes by SkyelineDesigns

Last modified November 15th, 2010

Design Framework for Torch & Anvil Goldsmiths

Torch & Anvil Goldsmiths

Torch and Anvil Design Framework

This page left intentionally blank.

Last modified: 11-15-10ConfidentialTorch and Anvil Goldsmiths

Torch and Anvil Design Framework Page 1


Executive Summary

Torch & Anvil Overview

Competitive Analysis

Industry Research

Personas

Empathy map: Susan

Empathy map: Doug

Customer Journey: Susan

Customer Journey: Doug

Industry AnalysisWireframes

Recommendations

References

Change History

Table of Contents

2

3

10

9

4

5

6

7

8

11-1718-26

27

29-30

28

1

Table of Contents



Executive Summary

RationaleSummaryTorch & Anvil Goldsmiths (”T&A”) is a newly incorporated company operating in Denver, Colorado that offers quality custom and repair work in silver, gold and platinum. T&A wishes to grow their business by expanding their brand presence onto the web - for this reason, SkyelineDesigns is creating a website designed to help generate business by giving customers information and then funneling them to an easy-to-use contact page.

Torch and Anvil Goldsmiths is a company in need of a way to better connect with potential clients and other jewelers from both Colorado and surrounding states. Though there are several jewelry stores in and around Denver, T&A does repair work that retail jewelers cannot; therefore both individuals and retail businesses in need of repairs use T&A Goldsmiths. Some clients send T&A jewelry for repair in the mail. Custom work also comes from both local and inter-state sources.

Because T&A serves both a local population and clients from around the country, we suggest an online website which can showcase samples of work and also serve as a point of contact. SkyelineDesigns will make a basic website with several sections; Main, Services (Custom and Repair), Portfolio, About and Contact. Because SkyelineDesigns is a local company, our designers can work closely and directly with T&A . Because T&A has no dedicated webmaster, SkyelineDesigns will design solutions which offer easy methods to upload images and change information (like a wordpress content management system (CMS) site) and, if needed, assist in uploading and changing the content on a timely basis.



T&A Business Overview

Overarching Business Goals

Project VisionIncrease visibilityOnline presenceBuild brand recognitionPre-educate local customers (custom jewelry)Online point-of-contact with out-of-state clients

Improve bottom line by $500/month in the next 5 monthsConnect with customers and clientsImprove T&A’s accessibility Increase customer referralsIncrease brand recognition

“I believe there will be a void in the jewelry industry when the boomers, the folks who now own and run most of the local jewelry shops, retire. Torch and Anvil Goldsmiths are ready to step into that gap.”




Empathy Maps and Customer Journeys of

“Susan” and “Doug”

Personas:









Customer PersonaSusan is a single business-woman in her early 30’s who lives and works in downtown Denver, Colorado. She inherited a broach from her grandmother and she’d like to repurpose this item into a necklace to give to her mother.

She turns to the internet to find a reputable jeweler who can make her a custom piece of unique jewelry. She’s surfing the Internet from home where it’s quiet.

Empathy Map: Susan



Client PersonaDoug is a married retail jewelry store owner from Salt Lake City, Utah in his 40’s. He has 3 employees who sell jewelry, but he doesn’t employ anyone on site who can do repair work.

Because Doug doesn’t have a local source for repair, he turns to the internet to find a reputable jeweler who can repair a piece of jewelry that a valued customer brought to him (”repair to the trade”). He’s looking for someone who is certified by the Jewelers of America (JA Bench Certifica-tion) and he’s willing to ship the piece a reasonable distance.

Doug is surfing the Internet from his busy shop, where he can hear customers and his employees talking.

Empathy Map: Doug



Susan wants to make a unique gift for her mother using old jewelry that’s been handed down through the family. She wants to repurpose this item into something new and modern.

She Googles “custom jewelry Denver CO” and chooses Torch & Anvil’s site.

She immediately sees the Home page and takes a moment to look at the pictures and the menus in order to understand the page structure.

She clicks the menu for “Services” and sees the page is divided into two further options: “Custom” and “Repair”. She admires the picture of the silver ring and clicks it, leading to “Custom”.

Once on the Custom page she reads the short description of what T&A does with regards to making custom pieces of jewelry. She admires the series of pictures underneath this descriptive paragraph - the pictures are labeled with captions that briefly explain the process of making a custom ring. She sees a link to T&A’s portfolio page but Susan’s mind is made up: she wants to

Customer Journey: SusanSusan32Account AdministratorLives in Denver, Colorado

talk to someone at T&A directly. Susan looks around on the page and sees a prominent button which says, “Contact us to get started making your new custom jewelry”. She clicks this button and is lead to a Contact Page.

On the Contact Page, she first notices a prominent phone number and the invitation to call T&A immediately. Under the number is a call to action: “Jewelry is a tangible, unique, and special object who’s creation is best discussed in person. Please call me to set up an appointment to meet with us. During our meeting I will listen to your idea and translate your vision into jewelry. Also during this meeting I can answer your questions and further explain the process of developing your vision into special one of a kind object of beauty.”

Susan notices that T&A is located in Downtown Denver and is pleased because her office is located there also and she can likely meet with T&A over her lunch break.

She picks up her cell phone to call Torch & Anvil Goldsmiths about making a custom piece of jewelry for her mom... and maybe something for herself, too!



Doug runs a retail jewelry store which sells finished jewelry. He needs to find someone to repair his customer’s jewelry (“repair for the trade “) and he’s willing to ship it a reasonable distance. He’s looking for someone who is certified by the Jewelers of America (JA Bench Certification).

He Googles “repair for the trade” or “tradework repair JA Bench Jeweler” and chooses Torch & Anvil’s site.

Doug immediately sees the Home page and takes a moment to look at the pictures and the menus in order to understand the page structure. He also notes that the JA Certification badge is prominently displayed.

Doug clicks the menu for “Services” and sees the page is divided into two further options: “Custom” and “Repair”. He clicks through to the Repair Page.

Once on the Repair Page he reads the short description of what metals T&A works in and a

Client Journey: DougDoug45-60Owns a jewelry storeLives in Salt Lake City, Utah

list of services that T&A offers. He sees a link to T&As portfolio page. He sees the call to action to click through to the contact page on a button labeled: “Email us for pricing and shipping instructions”. Doug clicks through to the Contact Page.

On the Contact Page, Doug first notices a prominent phone number and the invitation to call T&A immedi-ately. Below this he sees an email form as well as a shipping address with a location in Denver, CO.

Doug notices that the email form is tagged with the subtitle “Email us for more information or prices, timeline and shipping location.” He fills out the email form and sends clicks the Submit button to send it to T&A.

Doug is glad to have found someone to repair his customer’s jewelry and thinks of all the other things that T&A can do for him in the future like set stones and carve waxes. Doug realizes that T&A can help him grow his own business by giving Doug a way to expand his own services.




Industry Research:


Industry Analysis






Retail Jewelry Websites

Hyde Park and John Atencio, both larger companies operating local stores, as well as the online retailer Blue Nile have very professional retail online presences. Gusterman’s, a local company, has an adequate website that leans more toward showcasing the jewelry than selling retail over the web. Classic Hand Engraving and Victoriana, both small local storefronts, have unprofessional websites which may lean more toward retail in person but lack the infrastruc-ture to do so online. Metalcyberspace is an artistic forum with some retail opportunities but it is obviously not professionally done. Pandora, a local store, showcases a lovely flash site but has almost no content in the site itself.


RetailArt

Professional

Novice


Adaptd website

Light vs Dark82% of portfolio websites have a light design with neu-tral calm colors. The backgrounds of these websites may be a light shade of gray or yellow, rather than pure white.29% of portfolio websites have very vibrant, striking colors on a dark background. Dark websites are much more likely to have big typography and strong visuals.

Number of columnsMost portfolio websites consist of multiple, detailed pages, with relatively deep sub-sections. Minimalist one-page portfolios are rarely encoun-tered. Client and about pages usually have two columns, while front pages often have three to four columns and present the most important sections of the website in a compact overview.

The visual design, structure, layout and navigation of portfolio websites. The design details of sections including the about, clients, services, portfolio, work-flow and contact pages.

Industry AnalysisDesign Patterns and Current PracticesVitaly Friedman (editor in chief of Smashing Magazine) Sept 17th 2009

General Website Recommendations



(continued)

79% of portfolio websites have some kind of an introductory block in their upper region. We noticed, though, that some portfolios forgo an introductory block in favor of showcasing their recent projects. For such designs, a small “About us” block is placed somewhere else on the page, often below the fold.

Search boxIn general, if a website contains a lot of informa-tion, search functionality would very likely ben-efit some visitors to the website. As it turns out, very few companies (11%) integrate search func-tionality into their website (89% do not). Mostly a search field is needed if you have a blog.

AlignmentWebsite layouts were traditionally left-aligned, with either vertical navigation in the left sidebar or horizon-tal navigation near the head. With growing adoption of wide-screen displays, this has changed. More and more designers are horizontally centering their layouts so that the passive white space around the page balances the layout.

FlashOnly 3.7% of portfolio websites used Flash heavily. (Flash would be expected in a higher proportions in the websites of interactive motion design agencies, Flash design studios or video production studios.

Navigation80% of portfolios have large horizontal navigation.

Intro Block


An Intro Block is a short friendly statement about what the agency offers and what advantages a customer will gain by using its services. The block will usually blend vivid imagery with big typogra-phy. It conveys both the company’s overall image and the personal tone of the agency’s staff, making it equally professional and friendly. Such blocks usually appear immediately below the logo on the front page.

Industry AnalysisTorch and Anvil Design Framework Page 12


(continued)

Other general website information:None of the portfolio websites have an FAQ page.76.3% of websites have at least one blog and many portfolios have two or more blogs.14.55% have a newsletter or mailing list.9% provide a detailed site map.

Contact infoThe websites we analyzed put contactinformation in almost every area of the page: top, right, left, bottom, even the middle of the page. But we also noticed some interesting patterns.




(continued)

About usThe about page is used on portfolio websites to present the members of the team, explain the philosophy of the agency and prove the company’s expertise and professionalism. The page gives the design studio a personal touch and — if designed properly — elicits the trust of potential customers. An about page is clearly a must for portfolios: 89% of those we analyzed included a link to the page in their main navigation. 59.1% of about pages we surveyed have no sub-pages and offer visitors a brief, compact overview. Photos of team members, their personal informa-tion and information about the design process are very common on such pages. The tone of the main copy is usually informal, friendly and some-times even funny. The most popular wordings for the link to the about page is “About” (43.6%

Contact pageMake sure the customers provides all necessary informa-tion by presenting a simple, clean Web form that can accommodate the essential information about their project. You could also provide your phone number, postal address and email address: the more, the better. 9% of websites don’t have a contact page (instead, contact information is included in the footer of each page).Driving directions (often with an interactive Google map) are given on 45.4% of portfolio websites.83.6% provide a phone number and email address on the contact page.76.7% provide a postal address on the contact page.69% of websites have a contact Web form.Links to social networking websites such as Facebook, Twitter and LinkedIn are often used (14.5%).

Website Page Recommendations



(continued)

Client pageMany customers seek out a client list, case stud-ies, and testimonials when searching for a com-pany. Only 47.2% have a client page (either as a stand-alone page or part of a portfolio page). In most cases, clients are represented by their logos, which are often linked to detailed case studies that discuss the work done by the agency and client testimonials. The most popular wording for the link to this page is “Our clients” (46.1%), “Clients” (39.6%) or “Client list” (15.4%).

WorkflowActually, the workflow page works rather well as a sub-section of the about page, rather than as a standalone page. While 74.5% of websites do not have a workflow page at all, the rest go to rather great lengths to explain to potential customers how their process works and what expectations both parties should have. Giving potential cus-tomers a better understanding of how they will be involved throughout the design process is certainly a good idea.



Squared Eye Client Page


(continued)

ServicesGiven that visitors usually come to such websites because they are looking for services, validating their search with clear introductory text on the front page or with a standalone services page is reasonable. Potential clients usually have a pretty good understanding of what they are looking for so putting your major offerings on the services page is a good idea.67.2% of the portfolios we looked at have a standalone services page of some kind. The rest put their information on the about page or the front page. The services pages sometimes have sub-pages (35.1%), but in most cases the single page is quite long and detailed. Linking your portfolio page to your services page is definitely a good idea because it bridges theory and practice and shows exactly what your agency is capable of. The most popular wording for links to such pages is “Services” or “Our Services” (75.7%), followed by “What we do” (10.8%).

PortfolioPotential customers obviously want to see what a com-pany is capable of. Does its style match theirs? What aesthetic does it communicate for visual design, typog-raphy and usability? Do its designs feel intuitive and look pleasant? In general, be selective with the work you showcase, and let the visitor order and filter the projects by style, industry and year. Also provide some information about the project, or even conduct a detailed case study, with testimonials and insight into your workflow7.2% of websites don’t have a portfolio at all12.7% have only logos or screenshots, without any description or case study16.4% briefly describe each project next to a logo and/or screenshot63.6% have a very detailed page for every project, including case studies, testimonials, slideshows of screenshots, drafts and sketches




(continued)

Summary:82% of the portfolio websites we analyzed have a light design, with neutral, calm colors,

79% have traditional “block” layouts, with two to three columns clearly separated and a simple, con-veniently located navigation menu,

79% of websites have some kind of introductory block in their upper area,

89% have horizontally centered layouts,

80% have large horizontal navigation,

51% have horizontal navigation with right-aligned elements,

89% do not have search functionality,

Only 3.7% use Flash heavily throughout the web-site,

A contact link appears in the upper-right corner 71% of the time, and/or in the footer 45.4% of the time,


Industry Analysis

89% have the link to the “about us”-page in the main navigation,

Only 47.2% have a client page,

67.2% of portfolios have some form of standalone services page,

63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches,

74.5% of websites have no workflow page,

The contact page should contain driving directions, a phone number, email address, postal address, vCard, social network sites and online form.

“Both individual people and jewelry stores need the kinds of skills that Torch & Anvil has.”





Wireframe Documents





Home Page

Intro block

Links to interior pages

Link to Service page

Rotating picture

Logotype

Menu along top right

Wireframes

Torch and Anvil Home Services Contact About Portfolio

Services

Link -> Link -> Link -> Link ->



Services Page

Link to Repair Page

Sidebar content/links

Link to Custom Page

Pictures


Wireframes

Services Home Services Contact About Portfolio

Sidebar content 1

Sidebar content 2

Sidebar content 3

Custom Repair



Custom Work Page

Call to action: Link to Contact Page


Explanation of process

Process pictures


Wireframes

Custom Home Services Contact About Portfolio

Sidebar content 1

Sidebar content 2

Sidebar content 3

text here

Contact Us



Repair Page

Call to action: Link to Contact Page


Explanation of process


Wireframes

Repair Home Services Contact About Portfolio

Sidebar content 1

Sidebar content 2

Sidebar content 3

text here

Contact Us



Contact Page

Call to action: Submit button

T&A contact info

Email form

Phone contact instructions


Wireframes

Contact

Name

Subject

Your Message:

Email

Instructions

Services Contact About Portfolio

Submit

Home

Contact info



About Page


About T&A


Wireframes

About Home Services Contact About Portfolio

Sidebar content 1

Sidebar content 2

Sidebar content 3

text here



Portfolio Page

Picture: POP-UP ON CLICK (see next page)

Title

Caption


Wireframes

Portfolio Home

Title


details

Title

details

Title

details

Title Title

details

Title

details

Title

details

Title

details

details



Portfolio Pop-up

Portfolio Page: (not active)

Picture (large)

Click to close pop-up


Wireframes

Portfolio Home

Title


details

Title

details

Title

details

Title Title

details

Title

details

Title

details

Title

details

details

Close



Corporate BrandingBranding is distinct from corporate identity in that branding is about the entire customer experience. Branding creates a distinct image of a product, company, or individual. Branding should identify and distinguish a company, express the core values, hold a promise about performance, bring customer loyalty, and communicate the idea of longevity and dependability. Again, visual consistency is key. Some aspects of branding include a logo, package design, signage (exterior and interior), Point of Purchase (POP) display, merchandise labels, and marketing collateral. SkyelineDesigns recommends that T&A invest in making a strongly positive customer impression through branding.

SkyelineDesigns recommends:

Corporate IdentityCorporate identity is a visual system used to identify a company’s goals, values and personality. It should be distinct, unique, solid and memorable while giving a clear message. Above all, the corporate identity should be used consistently and throughout all of T&A’s interactions. SkyelineDesigns recommends that T&A Goldsmiths invest in research, development and implementation of a consistent corporate brand.

Website DevelopmentThis basic website is just the beginning. There are many ways to generate customer traffic to T&A through the wise use of a portfolio or even a retail website. There are many components of website design outside the scope of this document which could help T&A generate revenue - widgets, add-ons, Google analytics, search engine optimi-zation, blog pages and providing targeted infor-mation are just some of the things available. SkyelineDesigns recommends that Torch & Anvil revisit the design of this website in six months in order to evaluate what is working, improve the content of the site, and change the graphics to keep the site fresh and attractive to your customers.

RecommendationsTorch and Anvil Design Framework Page 27



Change HistoryStart project: Oct 28th, 2010

Last modified: Nov 15th, 2010

Date of change: Nov 4th 2010Change requested by: SkyelineDesigns

Date of change: Nov 2nd 2010Change requested by: Michael Salamon

Focus change

Focus change: Torch and Anvil Goldsmiths point of contact site vs. portfolio site

Date of change: Nov 8th 2010Change requested by: Torch & Anvil

Persona name change, pictures changed.

Date of change: Nov 9th 2010Change requested by: SkyelineDesigns

Pictures taken; site interaction changed

Date of change: Nov 10th 2010Change requested by: Jason Bowers

Add features. Add recommendations: tools, blog, Google analytics etc to keep traffic coming back to the website

Date of change: Nov 13th 2010Change requested by: Torch & Anvil

Removal of blog page and tools.

Date of change: Nov 14th 2010Change requested by: Wafa Dahabreh

Corrections: grammar, word choice and visual inconsistancies.



References

Michael SalamonProject ManagerMichael.Salamon@effectiveUI

Portfolio Design Study: Design Patterns and Current PracticesSept 17th 2009 Vitaly Friedman editor in chief of Smashing Magazine

Five steps to a better design portfolio9 nov 2006Jeffrey Veenfounder, Small Batch inc / founder, adaptive path

10 Useful Usability Findings and Guidelines 9 nov 2006Jeffrey Veenfounder, Small Batch inc / founder, adaptive path

Webdesigner depothttp://www.webdesignerdepot.com/2008/12/10-characteristics-of-excellent-portfolio-sites/

think vitamin: the web practicioner’s blog http://thinkvitamin.com/design/how-to-design-a-portfolio-site/

Jason BowersConsultantMichael.Salamon@effectiveUI

[email protected]

Wafa [email protected]

Torch & Anvil [email protected]

Contact List References



(continued)References

Talent is not Enough: Business Secrets for DesignersShel Perkins2010 New Riders Publishing Berkley, California

Interactive Wireframeswww.skyesant.com/wireframe

Torch & Anvil: Theme frames and website implementationBegun Nov 15th 2010http://www.torch-n-anvil.com/

About Face 3: The Essentials of Interaction DesignAlan Cooper, Robert Reimann, and Dave Cronin2007 Wiley PublishingBerkley, California

The Complete Graphic Designer: A Guide to Understanding Graphics and Visual CommunicationRyan Hembree2008 Rockport PublishersBeverley, Massachusetts

Books Other

“With the increase of outsourcing, two things are happening. One, many customers are demanding greater personal attention from their local jewelers. And two, our customers are feeling an increasing desire for their jewelry to stand out and be unique. “


