Validation & Design Guide By Jada Scott DGM 2271

Size: px

Start display at page:

Download "Validation & Design Guide By Jada Scott DGM 2271"

Lizbeth Greene
7 years ago
Views:

1 Ecommerce Website Validation & Design Guide By Jada Scott DGM 2271

2 Glitter Clips is an ecommerce website that specializes in boutique style hair clips, flowers, and bows for girls. Through creativity and quality they seek to attract loyal customers. Their website must appeal to a primarily female audience and the content must be easily updated. Table of Contents Design Concept Sketch Design Concept Model Primary Persona Secondary Personas ,6 Post-It Notes Structure Site Map Sketch Concept ,10 Wireframes ,12 Surface Treatments

Table of Contents Design Concept Sketch..................... 2 Design Concept Model...................... 3 Primary Persona............................ 4 Secondary Personas.

3 Design Concept Sketch 2 Design Concept Sketch

4 Validation & Design Guide 3 Glitter Clips Website: Concept Model Owner Employees Stake holders Designers Glitter Clips Website Platform Javascript HTML/ CSS Create Design Mobile MySQL/ PHP Hair Accessories Purchase Women Parents Money Target Market Appeals to Want Girls Quality Products Lead to Drive Promotes Product Sales Increased Demand Increases Leads to Customer Awareness

Hair Accessories Purchase Women Parents Money Target Market Appeals to Want Girls Quality

5 Primary Persona 4 Stay-at-home Mom Brooke I love cute accessories! Important Age 44 Location: Highland, UT Employment: Homemaker Salary: - Hobbies: Scrapbooking, skiing, tennis Key Characteristics Devotes her life to her two daughters. Loves fashion and design. Frequent social media poster. Brooke is a homemaker who lives in Highland with her husband Dave, an investment banker, and their two daughters, 10-year-old Emily and 7-year-old Ashley. Brooke loves scrapbooking and crafting of almost any type. She is an accomplished pianist who is a long-time member of her church s choir. Brooke loves to dress her adorable daughters in the lastest fashions and spend time recreating the latest YouTube hairstyles on them. Goals Wants to create unique outfit and accessory combinations. Wants to keep up with current collections and styles. Want high quality products. Purchase products quickly and easily. Questions How do I know when new styles are being released? Where can I find styling tips? Do you create custom products? Not Important Influencers Variety of style. Uniqueness of style. Impression of value. Website Ease of Use Perception of Value Perceived Trustworthiness Latest Fashion Trends Quality of products Variety of Products Uniqueness of Product Customer Service Reputation

Frequent social media poster. Brooke is a homemaker who lives in Highland with her husband Dave, an investment banker, and their two daughters, 10-year-old Emily and 7-year-old Ashley.

6 Secondary Persona 5 Retired School Teacher Marian I want unique gifts that are affordable. Important Age: 64 Location: American Fork, UT Employment: Retired Teacher Salary: $39,000 (yearly retirement) Key Characteristics Devotes much of her time to doting on her three granddaughters. Creative and frequently cross stitches and quilts. Doesn t like complicated technology. Marian is a retired school teacher who loves to spend her time traveling, doting on her granddaughters, and quilting. Because her granddaughters live in a different state she frequently travels to visit them. Marian wants technology to be simple and trustworthy. She appreciates modern convenience but doesn t completely trust it. Goals Wants to create memorable experiences with her granddaughters. Wants to keep gifts affordable to comply with her fixed income. Wants to purchase gifts online in a simple and understandable manner. Questions How do I know my online purchase is safe and secure? Is this product a good value? Can I find this product in stores? Not Important Website Ease of Use Perception of Value Perceived Trustworthiness Latest Fashion Trends Quality of products Variety of Products Uniqueness of Product Customer Service Reputation Influencers Perception of value. Impulsive attraction (it s cute!) Ease of purchase

Creative and frequently cross stitches and quilts. Doesn t like complicated technology.

7 Secondary Persona 6 Highschool Cheerleader Crystal Age: 18 Location: Provo, UT Employment: Hostess Salary: $10 per hour Hobbies: Cheerleading, dance, music, movies Key Characteristics Loves modern pop culture. Enjoys attention and standing out. Loves fashion and accessories. I love to stand out when I perform. Crystal is a member of the Varisty Cheerleading Squad at Provo High School. She is a senior competing in her final year of cheerleading. Crystal hopes to attend Utah Valley University in the fall where she plans to study Graphic Design. Crystal currently lives with her parents but hopes to move out with friends after she graduates from high school. Goals Wants fashionable accesories and attire. Wants to keep accessories affordable to comply with her limited income. Wants to receive products quickly after ordering them. Question How should I style Glitter Clips? Can I find this product in stores? Important Not Important Website Ease of Use Perception of Value Perceived Trustworthiness Latest Fashion Trends Quality of products Variety of Products Uniqueness of Product Customer Service Reputation Influencers Uniqueness of product. Impression of value. Ease of purchase

She is a senior competing in her final year of cheerleading. Crystal hopes to attend Utah Valley University in the fall where she plans to study Graphic Design.

8 Post-It Notes Structure 7 Post-It Notes Structure The post-it notes assignment allowed us to freely explore site structure and navigation. It also helped with content organization and file configuration.

9 Sitemap 8 Visible on all pages through top icons Account Support Cart Home Order History Visible on all pages through primary navigation Our Story Styling Tips Products FAQ Press Mission Statement Video Tutorials Flowers Shipping Policy History Printable PDFs Bows Return Policy Clips Promotions Home Wholesale Primary Navigation Secondary Navigation

FAQ Press Mission Statement Video Tutorials Flowers Shipping Policy History Printable

10 Sketch Concept 9

11 Sketch Concept 10 The hand drawn sketches reflect web site design on a desktop, tablet and mobile device. Similar elements are represented on all three with minor modifications. The proposed web design will make use of RWD so that it will be accessible across a variety of platforms. The proposed design will emphasize balance and unity. Generous whitespace will keep the site from looking cluttered. The overall feel of the web site will be clean and simple. This will be reflected in the easy top navigation links which will be present on all pages. The top navigation is derived from the site map and will respresent it with drop down menus for subcategories. High-quality, impactful images will be a requirement because this design incorporates a large image slider and three large image links. The web site s design will use progressive enhancement to create the best possible experience for each user.

Generous whitespace will keep the site from looking cluttered. The overall feel of the web site will be clean and simple.

12 Wireframes 11 Dropdown menu Tablet LOGO Contact Account Cart Dropdown Menu Detail for tablet & mobile Home Shop Styling Tips Our Story FAQ Press Mobile Contact Account Dropdown menu Logo Cart Fold line Image Slider Specials Shop Styling Tips The wireframe designs represent how the navigation and content would be presented on desktop, tablet, and mobile devices. This design is responsive and makes use of progressive enhancement to ensure a positive experience for all users. Progressive disclosure is also used to encourage deeper user engagement. This design is based on a 12 column grid which will also be used on all subsequent pages to ensure symmetry and consistency. Fold line Image Slider Specials

mobile devices. This design is responsive and makes use of progressive enhancement to ensure a positive experience for all users.

13 Desktop Contact Account Logo Cart Home Shop Styling Tips Our Story FAQ Press Large image slider with high quality images. Fold line--768px Specials Shop Styling Tips Footer Links and Social Media

14 Surface Comps 13 The detailed creation of surface comps finally begins to bring the site to life. All of the planning and preparation finally seem tangible and within reach. The inspiration for the Glitter Clips website design was the Glitter Clips logo. The surface treatments were created in Photoshop and layers were used to display features of the site. The Glitter Clips typography will consist of Century Gothic (and its various versions). The site s overall lines will be structured and balanced which will contrast with the flowing nature of the Glitter Clips product. RGB HEX 0, 254, 254 # 00FEFE 241, 103, 203 # F167CB 71, 70, 76 # 47464C 211, 216, 222 # D3D8DE 255, 255, 255 # FFFFFF

The surface treatments were created in Photoshop and layers were used to display features of the site.

16 Surface Comps 15 The Glitter Clips website is designed to be responsive and display well across a variety of devices. The simple layout is intuitive and user-friendly.

17 Surface Comps 16 Photoshop layers were used to replicate dropdown menu items as well as slider image options. The layers were named with logical and easily identifiable names to make the surface treatments simple to understand.

The layers were named with logical and easily

18 Surface Comps 17 Mobile View Tablet View Dropdown Menu Detail (for both tablet and mobile) Layers were used to demonstrate gestures and dropdown options.

Carbine Design. Carbine Design. Validation and Design Guide

Carbine Design. Carbine Design. Validation and Design Guide Carbine Design Validation and Design Guide Persona JDAssistant Manager, Web Design Company JD is a 9-year-old assistant manager for a web design company, who has been assigned with hiring their new developers.