Semester Project (Overview)

Points

40

Assigned

March 04, 2020

Due

May 06, 2020

THE SETUP

• You’re an employee at a small web design shop and have just gotten one of your first clients - a small website project for their business.
• Your boss has assigned you (and maybe a coworker) to the project. You are both equally responsible for development, design and content strategy.
• The client is launching their business in a few months, so they need most of the design/development done and approved before then.
• They plan to put the site into a content management system - but they need a working style guide and prototype in order to effectively implement it.
• They have an onsite employee who will be maintaining and improving the website after the project is finished.

Note: In this scenario, I will play the client and the business, while based on some actual businesses, will be fictional

PROJECT GOALS

Why this type of project? This allows you, the student, to apply what you’re learning in class to a real-world scenario. By thinking critically and using these principles, you’re developing long-lasting development and design skills that can be used to land you a job or complement your existing areas of expertise.

PROJECT GROUPS

You can work in pairs or alone on this project. Each group or student will work on a slightly different (but largely equivalent) web project. We have a number of "stock" companies that you can select from that have existing assets you can use (some branding, content, background info, etc.) You may also choose another small or local business of your own, but you will be responsible for assembling content and assets to use for the project. Both approaches are valid.

The "stock" clients are as follows:

• AROMA Coffee & Tea : AROMA Coffee & Tea, a family-owned coffee company that specializes in locally-sourced coffee. They have two locations in Columbus, OH.
• Hops House Microbrewery : It’s all about the hops man! At Hops House, we craft the tastiest of brews every week that will keep you coming back for more. Our brews can only be found at Hops House, and our modern, chill environment is perfect for after-work drinks or a night out on the town.
• Off the Vine : Off the Vine: A local winery in Geneva, Ohio that operates a small walk-in wine-bar.
• Pets First! Veterinary Clinic : At Pets First! Veterinary Clinic, Akron, Ohio’s premier veterinary care provider, we know your pet is a valuable member of your family. That’s why we treat your pets as one of our own, with affordance vaccinations and wellness care that will keep your furry companion happy and healthy.
• Wrench Automotive : Wrench Automotive, an automotive repair shop known for their personalized and high-quality service.
• The Ohio Chop Shop Hair Salon : The Chop Shop is a high-end, unique hair salon in Akron, Ohio. Our stylists bring their clients the freshest styles, and our location is a high-end, but friendly and fun atmosphere that keeps clients coming back again and again. Visit The Ohio Chop Shop today for all of your hair, skin and nail needs!
• Buckeye Bed and Breakfast : Buckeye Bed & Breakfast: A bed & breakfast in Ohio whose clientele includes newlyweds and couples looking to get away from the hustle and bustle of daily life.
• Summit Street Family Restaurant : Summit Street Family Restaurant, an american-style restaurant in Kent, OH known for their family-friendly atmosphere and reasonable prices.
• William Thomas & Associates : William Thomas & Associates: A small, but growing, accounting firm that has prided itself in serving its local clientele across many generations.
• Barb’s Bridal Boutique : Barb’s Bridal Boutique, a small boutique in Ohio that specializes in bridal wear.
• Creative Kidz Kinder Care : We’re a child care center in Kent, Ohio specializing in creative learning experiences for your child, fostering educational exploration and relationship building opportunities that will last a lifetime
• Franklin County Family & Community Services : Franklin County Family & Community Services is a not-for-profit agency staffed by professional staff members and volunteers who empower individuals and families in the areas of support, advocacy, training and counseling.

(Companies are claimed by a first come, first served basis. Each group will need to select a different company to work with.)

PROJECT SCHEDULE

You and your boss have worked together to develop a brief project schedule.

1: Research

• Meet with the client and determine project goals, design aesthetic, etc.
• Communicate why investing in a responsive website makes sense for their business.
• Understand the types of content needed
• Communicate the project schedule
• Get a list of competitors in preparation for doing a brief competitive analysis.
• Put together a project index that will house all future project deliverables so that they’re easy to access by the client.

2: Content, Architecture and Sketching

• Collect any existing content that the client has provided
• Reformat and rewrite that content using a mobile-first methodology
• Put together a sitemap
• Based on your content, you’ll develop a few, mobile-first sketches to show the client
• The sketches will show some of the main templates that you’ll be developing. You may choose to show them at different breakpoints.
• Using the sketches, you’ll identify the repeatable patterns present in your design

3: Style Tiles, Prototype and Concepts

• Using the goals you discovered in your client meeting, you’ll develop 2 sets of style tiles that show the colors, design aesthetic and personality of the website.
• You’ll show these to the “client” in class, and the class will ask questions.
• From the style tile feedback, you’ll develop a few visual mockups representing different screen sizes.

4: Basic Wireframes and HTML/CSS Final Patterns/Prototype/Templates

This piece includes Basic Wireframes, Patterns 1 and 2 and Final Templates/Pattern Library. You’ll submit project updates each week, but won’t actually submit this part until the end.

• You’ll begin putting together the content you gathered into an HTML template structure
• You’ll prioritize the most important content up top
• The content wireframes will demonstrate to the client how the site will respond at different breakpoints.
• Using your content templates, you’ll begin to add CSS styling to your code, creating working prototypes of representative templates in your website.
• You’ll determine how each repeatable element looks and functions together
• Based on your final prototypes, you’ll develop a pattern library that demonstrates the typography, colors and primary atomic elements used in the design

5: Project Hub, Review Session & Critiques

• You’ll present a hands-on walkthrough of the final prototype and style guide
• You’ll show a retrospective of what you did to get to this point via the Project Hub
• The class will participate, asking questions and making suggestions