Tues, 2/4

Blog Posts for Research, Competitor Analyses, Personas Due!!! Bring A Stack of Index Cards for your Group!

• Within groups, Post an Identity Strategy for your business.
  Outline your proposed identity strategy. Be sure to include your strategy (what and why) around:
  • Business Name
  • Web site tagline
  • Logo - sketch some ideas and bring them to life by looking at like examples, playing with graphics and type in Illustrator
  • URL/domain name - What domain names are available for your business? What's the easiest way for a user to find your site
  • Email - info@businessname.com, contact@businessname.com
  • Facebook name
  • YouTube, LinkedIn, any other - KEEP NAMING SCHEMES CONSISTENT
  • This information will help you brand your business, create a header and think about what type of information is VITAL to your contact pages, etc. Logo and branding strategy can also get you started to think about the colors and visual elements you might later want to include on the user interface.
• Working on more advanced card sorting activity within groups - look at your Affinity Diagrams and think more in-depth about site structure specifically
  • Write titles of Pages on Index Cards - maybe include bullet points as to what the pages might contain.
  • Have your group sort your cards and decide on the best arrangement
  • Jumble up the cards, then re-arrange the cards. Does the second one work better?
  • Think about the site structure - is it a hierarchy? Is it a hub-and-spoke structure?
    Hub and spoke structure example (for simpler sites):
    
    
  • Turn these into a Site Map Diagram you create using software as a tool (Illustrator, Word, Powerpoint, etc.) and post them to your blogs - This will be due 2/18 along with your first Wireframes.
  • Think about language and visual vocabulary you want to use for your Site Map Diagram, make sure the taxonomies of titles/headers and categories are similar length and belong in the same group:
    
    
  • Some Examples. You may use arrows to indicate the direction of navigation. You may use shape, color, and proximity to indicate objects of the same group. Line connectors must indicate how pages are linked:
    
    
    
    

Thurs, 1/30

Discussion of Information Architecture, User Interface, and Personas

• Discussing the YWSG Chapters 3 & 4 (Information Architecture, User Interface)
• Discussion of Personas
• Work time for deliverables due on Tuesday

Tues, 1/28

Polar Vortex Day!!!

• Class is canceled due to winter weather conditions: significant COLD (not snow, sry) and wind chill
• On Thursday, we will be going over readings from Chapter 3, 4, and 5 of the YWSG (the last one!). In the meantime, read these chapters and make sure you remember to do your research and personas
• Continue your User Research, Competitor Analysis (which should be mostly done), and Personas for the due date on Tuesday, February 4 - you have a week
• Here are some example Personas. I can go over this a little more on Thursday. For the deliverables, you will create 2 Personas, which are user profiles for your target users. Your group is required to make 2 (TWO) Personas; a primary and a secondary persona. You may refer to this page for a description and example of what a persona might look like and consist of.
  • The primary persona must be tailored as the perfect or exact example of your target user group, and you can create a small profile to describe this fictional person that fits the exact profile of your target audience. Pretend you are an FBI agent from the television show "Criminal Minds" and this person is the UnSub - Unknown Subject. You are creating an exact profile of what type of person will use your site. While we are not criminal profilers from the FBI, we have done some research into our user groups and found some insight as to what type of user specifications a person using your site might have. This profile should include a name, a photo, quote, bullets of attributes that are important such as demographic information that pertains to your particular business, and small narrative. You can be creative and write a short paragraph that might summarize their needs as a user and what their interests are.
  • The secondary persona must be different from the primary, and must be a secondary example of your target user group. This profile should also include a name, a photo, quote, bullets of attributes, and small narrative.
  • You may use graphs if you would like to, in order to display key information, but it is not required. You can create your persona using whatever type of software you feel comfortable with - Word, InDesign, Illustrator, etc.
• Here are 2 templates and 2 examples (the first is a woman who is going to a shoe-shopping site. The second is a woman who might be going to seek out information about how to pursue criminal action in a case where someone stole money from her online; so maybe she is searching for a legal information site or an attorney's web site who specializes in this type of fraud):
  
  
• Due dates are now posted as a list for all Group Project and Individual Project Deliverables and presentations on the top RIGHT side of the blog to keep you organized. ->

Thurs, 1/23

MAIN HTML/CSS Concepts, Illustrator Tutorial, Introducing 1st Individual Assignment

• HTML and CSS lecture (Powerpoints are on Carmen):
  How HTML works
  How the Internet Works
• Short Illustrator Tutorial Specifically for Creating Wireframes and Graphics
  • Opening Illustrator and setting width/height, # of artboards, set units to pixels
  • Edit -> Preferences -> Guides & Grid to create a Grid, View -> Show Grid to show the grid
  • Create Rectangles with Rectangle tool, Stroke & Fill, Transform Controls for Exact Height and Width
  • File -> Document Setup to change the document background color and grid color
  • Using Pen tool, Text Tool, Scale Tool, Rotate & Reflect Tools to create graphics
  • Swatches
  • Saving in Illustrator vs. Export
• First Individual Assignment:
  It's restaurant week! Restaurants around Columbus create a prix-fixe menu with 3 courses.
  Your task will be to redesign La Fogata's web site!
  La Fogata is a Mexican Restaurant in the Short North on High Street. The word "fogata" means "bonfire" en español - a gathering place where people talk and roast food, and also a place with FLAMES (Notice the unsightly flames that seem to be engulfing the web site!).
  • Your site must include:
  • 5 Pages - A Home Page, A Menu Page, A Gallery Page, A Locations Page, and A Contact Page
  • You will construct the pages using HTML and a VERY SIMPLE .CSS Stylesheet that controls the page style of all 5 pages.
  • Site must include Rebranded Header Graphic and home page concept still retaining the same name "La Fogata" Mexican Grill. I am not grading you on your graphic design skills, but I have included some pics below of logos that brand this concept better. For those of you who may not have had a lot of graphic design experience, notice the Kindle Fire logotype. It can be simple! Do not use these exact logos on your site, use them only for inspiration:
    
    
  • Must have a Global Navigation Bar - All Pages must have a navigation bar or list of links so you can navigate to any page at any time
  • Home Page - Must include new brand concept and introduce site, maybe it has specials or the restaurant's catchphrase?! Maybe it has a phone number?!
  • Menu Page - Must include the information from High Street Menu using text.
  • Gallery Page - Minimum 3 Pictures. You may use some of their pictures, or maybe you can find some cleaner-looking stock photos of Mexican food that might work better and is more in-line with your new rebranded concept. This does not have to be fancy and have CSS rollover effects, unless you want it to!
  • Locations Page - Must include address of High Street Location and an embedded map using Google Maps. DO NOT use the same graphic as they have used.
    
    
  • Contact Page - Must have this basic information:
    • Phone Number - 614.294.7656
    • Email - lafogatashorthnorth@gmail.com
    • Street Address - 790 N. High Street, Columbus, Ohio 43215
  • The site must also list this information where you see fit:
    • Hours - Mon - Thu: 11:00 am - 12:00 am, Fri - Sat: 11:00 am - 1:00 am, Sun: 11:00 am - 10:00 pm
    • La Fogata takes Reservations, Walk-Ins are Welcome, Good For Groups, offers Take Out, offers Outdoor Seating
    • La Fogata offers Street Parking, a Parking Lot, and Valet Service
    • Payment Options include Visa, American Express, Mastercard, Discover
    • Include a link to their facebook page
  • You will follow page/site design fundamentals as described in chapter 6,7 & 8 of the web style guide.
    • Hierarchy
    • Typography
    • Legibility
    • Page widths
    • Consistency
    • Contrast
    • Templates
    • Page Structure
    • Global Navigation
  • Menu text and other body text cannot be comprised of graphics - but include graphics if you know how to make them and where you see fit, if it works with your brand.
  • Begin by looking at the current web site (As Is!). Look at how it currently works, its colors, its branding and how it might not be functional. Think about how you can improve usability and get the information across in a better way. Create a sketch of a wireframe for each page, and begin creating new branding - Generate Logo for the site header. Next, craft a single page using Dreamweaver and generate a stylesheet. Once this page is barebones and has the header, body, footer, and navigation, duplicate the file 4 more times and enter in the required info for each, naming each as such: index.html, menu.html, gallery.html, locations.html, and contact.html. Make sure to name your home page as "index.html."
  • This will be due February 13 and you must upload your site file structure containing all graphics, all 5 html pages, and the CSS stylesheet as a zip file in the DropBox. By graphics I mean ONLY the graphics you have inserted into the html - .jpgs or .pngs that appear in your site, NOT Photoshop or Illustrator files.
  • I can post them online and link them to the blog for the critique on Feb 13.
  • ***As a sidenote, for affordable, non-restaurant week Mexican cuisine, I recommend Los Guachos on Godown Rd. You can't be disappointed!!!! :)

Tues, 1/21

Page Structure, Page Design, and Typography Discussion, Example Site

• Going over main points of discussion for readings
• Presenting a prototype web site I made - AWESOMEsite and dissecting its HTML/CSS, QUICK discussion of wireframes
• How to make a web site using HTML. Tables and HTML-only sites are the web of the past: Check this amazingly bad HTML-Only Site and these outdated examples so you can think about what might make a site unappealing when you go to create your wireframes. Also check out The awwwards: Sites of the Day to see how these sites utilize CSS, dynamic content, well-thought-out user interface design, and good design practices.
• If we have time, Affinity Diagram Activity
• Larger ideas for site go on top, smaller ideas go below:
• Can group similar ideas/category items by color
• Use sticky notes or small sheets of paper, ex.:




• Take a cell phone pic and post it to your blogs of your agreed-upon diagram.
• Trade with another group, re-arrange in a way that makes sense. Take a cell phone pic of your new arrangement and post to blog. Make sure you include which group rearranged yours.
• Think about how these idea clouds could form a site map that might later be components on your user interface.
• READ & REACT: YWSG - Chapters 3, 4, 5
• On Thursday, I'm going to introduce your first individual assignment. Although it might be challenging, I think you will find it fun!

Thurs 1/16

Present Research Plan / Charter Informally to Class and Short Discussion on Mobile Web

• Re-evaluate Charter - In groups, ask yourselves these questions and post a blog entry to answer them:
1. What are the business goals? (What can this company do to facilitate business?)
2. Web site Goals
   • I.E. Grab attention, deliver information, consider other other services/not consider other services, easy to navigate, has easy to use tech, etc.
3. Users Tasks - What are things they want to accomplish?
   • Basic Information - Contact Info
   • Services
   • What is the cost? Why would people pay this much? What's the value? How available?
4. Differentiators
   • I.E. Cost comparisons between similar businesses, Different tech, Different business structure
5. Audience/Behavior
   • Age range, demographic of audience, socioeconomic bracket, specific occupation such as student, etc.
   • What type of behaviors are they going to exhibit? How and why would they approach your site/business?
• As Is Analysis
• How do we evaluate other sites and determine if a site is good?!
• Using the 10 Heuristics for User Interface Design, have each person in your group evaluate a competitor's web site for EACH HEURISTIC. Make a bulletted list (ten bullets for each Heuristic) with your findings. Pretend you are using their service and USE the web site, and write a short paragraph describing your observations/findings as a short Usability Analysis. Post this in your blogs as a separate entry for each person. There will be FOUR NEW BLOG ENTRIES FOR TUESDAY 1/21 (The re-evaluation of your Charter, 3 As Is Analyses complete with 10 Heuristics and a Usability Analysis Paragraph created by each group member for 3 related sites).
• READ & REACT: Mobile First. Also read How to create a mobile version of your web site just for your reference. For the scope of this course, we will NOT be focusing on creating mobile sites, unless you decide it is imperative to your business idea, you may make a mobile prototype in ADDITION to your web site for the group project.
• READ & REACT: YWSG Chapters 6, 7, 8 - PLEASE READ!!! VERY IMPORTANT IN UNDERSTANDING HOW TO BUILD WEB PAGES!

Tues, 1/14

Forming Groups / Blogs

• ASSIGN: User Research, Competitor Analysis, Personas
• User Research
  Each group, conduct 4-5 interviews, contextual interviews or survey. Can use Surveymonkey, send emails, etc. Contact group that may fit this persona. Purpose: How do people that may fit this persona use the web, make decisions - what would change their behavior?; what sites do they like?; what are their pet peeves? We will do some form of Participatory Research in class.
• Competitor Analysis
  Each group will find a unique site to analyze. Purpose: How are competitors addressing this? What are differentiators? What are they doing well, what are they not? See 10 Heuristics as a benchmark (will discuss in class). For this portion, COPY all [3] of your blog posts for your As-Is Analyses and create a written paragraph as a consensus as well - Overall findings and group summary for competitor analysis that compare the three and might differentiate how yours will be different.
• Personas
  Each group will develop a primary and a secondary persona Personas need to be believable, based on their observations/data, and different from each other. They should have a photo, quote, bullets of attributes, and small narrative. Personas: The foundation of a great user experience
• You will post summary of all on your own team blog. You will present these to "the client" on Tuesday, February 4.
• For Thursday 1/16 post a detailed Research Plan on your team blog. FIRST you must include the top 3 goals of your business/idea. Include how you are going to conduct the research, as well as a preliminary outline about what your business problem is and what your site does and how you arrived at the agreed-upon business idea, as well as a preliminary idea about other potential competitors, and who your site's target audience may be.
  
  Goals and strategies for developing a Project Charter (from the reading):
  
  What is the mission of your organization?
  How will creating this web site support your mission?
  What are the two or three most important goals for the site?
  Who is the primary audience for the web site?
  What do you want the audience to think or do after having visited your site?
  What web-related strategies will you use to achieve those goals?
  How will you adequately maintain the finished site?

Assigned Groups are:

1. Mohammed, Morgan, Mallorie
2. Anthony Z, Christine
3. Caitlin, Erica, Ryka
4. Anthony M, Katie, Nicole
5. Rhayssa, Anna, Gina
6. Lee, Leandra, Dave (as extra)
7. Payton, Michelle, Yunqi

Don't freak out, but the content deliverables for the scope of this group project will be:

• Charter
• Research & Competitive Analysis
• Personas
• Wireframes
• Clickable Prototypes of the wireframe
• Usability Testing Plan & Scripts
• Analysis
• "Functional" Clickable Prototype
• All of this will be documented on your blog; with Mid-Year and Final Presentations

Thurs, 1/9

INTRO TO COURSE

• Introduction to course, format, expectations, syllabus
• Vocabulary, User Centered Design
• READ & REACT: 5 Design Styles, YWSG – Chapter 1 & 2
• Remember to think of several (perhaps 3) common problems that you could pitch to your group as an idea for a web site or service. It can be a problem that people encounter in everyday life, a Columbus-specific problem, a problem or challenge you may face being a student, etc. We will form the groups Tuesday.
  
  Example Problems:
  
  • Bed Bugs in Columbus
  • Parking in the city
  • Making tying shoes easier for kids

Just a nice infographic of the disciplines of User Experience - This course will touch on a lot of these topics, but will be focused on the User-Centered Design Process as it pertains to the practice of building web sites, specifically as a group. Lectures, examples, and individual projects will get you acquainted with the technical practice and mechanics of web design: