Wednesday, October 28, 2015

Week 10A

MONDAY


* I was absent

Homework

Content Audit

For the time being I choose to work on The Arc of Lancaster website because my professor gave me the go on this website but it is not definite and I'm not 100% set on using this website for my project. The content audit is an organized list of the content that is found on your currently organizations website. The benefits of using this audit tactic is being able to reference the content when developing new content and gives a clear understanding of the website.





What Methods will you be using.

These are not final but possible methods I will be using.
  • Content Patterns
  • UX Questionnaire
  • Project plan - organizing the length of time.
  • Project Brief
  • Strategy Workshop - Trying and testing it out.

Readings

Method 12: Content Patterns - pages 144-147

In a content inventory, you interact with the service or product and attempt to create a representative sampling of all the information, assets, and functionality of the product. You will be able to get a greater understanding of the structure and layout of information. By creating content patterns you are less comprehensive than a traditional content inventory. You will show recurring patterns of content and functionality that exist and how they are structures. On average it takes 2-4 hours to review the patterns, 1-2 hours to create a content map and 1-2 hours to summarize key findings. This is mostly used when you want to get a deeper understanding of the structure, information and is often conducted at the beginning of the project. By finding the patterns you must list all the elements that come together to make up a unit of content. Once all the findings are complete you can use this to analysis the observations and improve the product.

Content Strategy Reading

Depending on how you capture your audit is based on the business objectives that reflect your product or service. There are different types of audits that can be captures to create your content. A quantitative audit is an index of the content on your site, it's the easiest think to do when you're trying to find and understand the content. This will benefit those who have a limited timeframe. For those who are working with larger websites make conduct a "rolling content inventory. This is an ongoing process and shouldn't be something you allocate in the first two weeks of the redesign. Partial content inventories tend to be more cost-effective than trying to achieve a perfect on right away. The audit will ask questions such as what content do you have, how is it organized, who creates its, and where does it live? The content is based off the major sections of your site. This can be broken up into sections based on the objectives on the website. You should record everything that is listed on the site such as PDFs, videos, forms, functional pages and so on. Numbering your sections will better organize the information in order to review and react on the findings. It's important to record who creates the audits as well as hosting the content for everyone to view. 


Sunday, October 25, 2015

Week 9 - Outside of Class

Outside of Class

User Experience Website 

Below are the three poorly organized website I could possibly use for my User Experience project. Trying to find website was very difficult, since a lot of non-profit organizations in Lancaster already have an organized website or don't have a website at all.

1. The Arc of Lancaster - Lancaster County

* First Choice - It's possible to figure out the purpose of the site but it becomes very difficult when prompted a question and then trying to find the information. For example "Where can I volunteer?" but as you go through the website there is no section for volunteering and if there is, I haven't found it yet.

  • What is the site for? 
    • The purpose of the site is unclear at first glance. The general information listed shows events, programs, services and how to support the arc. There is a lot of content included under each page but I believe the site host events going on to promote and protect the rights of people with mental and physical disabilities. 
  • What is the main purpose?
    • I believe the main purpose is to host events but there is so many options to choose from its unclear why they started this website. In general overview, I think families come together to support people with disabilities. I want to believe it's family oriented but the website doesn't seem very welcoming. 
  • Are there too many links/choices?
    • There are some pages that have way too many links and choices. The information isn't listed by hierarchy and seems kind of random. 
  • Do you find yourself struggling?
    • I find myself struggling, knowing what to look at and where to find the information. There are a lot of links to click on and the sidebar acts as a content page that lists different information a new page pops up. This becomes very confusing because most sidebars stay consistent and this one has way too much content and changes all the time. I also struggle on the contact page because there is nothing listed.








2. Pleasant View Retirement Community


* Second Choice - This is my second choice because the location of the retirement community is outside of Lancaster but I find myself struggling to answer the following questions.
  • What is the site for?
    • Based on the title of the website, I can tell its a retirement community for senior living. The site talks about the campus and living options you have in their community. As for how they laid out the information and exactly where to find it becomes difficult.
  • What is the main purpose?
    • I believe the main purpose of the website is to host information for senior living and provide all the options there is if you were to stay at Pleasant View. 
  • Are there too many links/choices?
    • There is a lot of valuable information on this website but the layout is confusing. There are three different navigational options. One nav bar at the top right, one center nav bar under the logo and a side bar. The way the website is organized is all over the place. 
  • Do you find yourself struggling?
    • I find my self struggling when I use the 3 different nav bars. The sidebar is most confusing because it changes every time I click on a new link. This causing a lot of hidden links that are not visible at first glance. This would work better if it was organized with several sub nav bars under the main one. 






3. Fulton Theatre

* Third Choice 
  • What is the site for?
    • The purpose of this website is to host the different movie and productions that goes on at the Fulton Theatre in downtown Lancaster. I had prior knowledge of the theatre but I don't think the home page of the website does the Fulton Theatre justice because the mission of the theatre isn't giving right away. 
  • What is the main purpose?
    • List the available performances as well as purchase tickets for those events.
  • Are there too many links/choices?
    • I believe the nav bar has an excessive amount of options that leads to several other options. I feel as if the options could be paired down. I'm not exactly sure how I would change it but there just seems like too many options to click on. 
  • Do you find yourself struggling?
    • I find myself struggling if I was given a task to find a certain item in the website but the information on each page individually is laid out in an organized manner. 








Readings

Smashing Magazine Article: What is User Experience Design? 
Overview, Tools and Resources


The goal in the production process is being able to answer all the questions a user/visitor may ask when viewing a website. User experience explains how a person feels when interacting with a technology system. The system could be a website, application, desktop software, etc. The designer will try to study and evaluate how the users feel about a system based on the ease of use, perception of value, utility, efficiency in performing tasks and so forth. This field of study is fairly new and researchers are constantly finding new disciplines to understand user experience. Before designers would create user-centered design and if they liked it then they were done but this is not the case anymore. A designer must now take into consideration all the boundaries that could interfere with how the user works the system. It's important to understand the planning process of UX design because a company could spend more money fixing the problems down the road if they don't attract the right users rather than spending money to plan, research and analysis the final product. It's important to remember that UX design is not a one size fits all but rather understanding the system as a human being and that everyone is different. The situation may change for each company. A company can not determine the success of a product based on page views, and conversion rates because they would be assuming the product works. Some of the tasks and techniques of a UX designer make use the following deliverables.
  • A/B Testing - Comparing the effectiveness and quality of the experience of different users on different interfaces.
  • User Surveys
  • Wireframes and Prototypes - based on findings layout different examples
  • User Flows 
  • Storytelling
  • Design Patterns
  • User Profiles and Personas
  • Content Inventory
  • Content Style Guides
  • Tools of the Trade
  • A/B Testing software
  • Content Inventory Software
UX Project Plan - pages 90-95

The purpose of a UX project plan is to think about the broader project's timeline and how your going to conduct UX activities. This may take a few weeks to accomplish. UX plans are unfamiliar but can benefit the process and final deliverables. When it is appropriate to use UX plans is at the beginning of your project, once you have completed preliminary research, and when your confident in your project goals. The goals should speak to the business and the behavioral change you hope to see when your through your work. A project brief will satisfy this step. By laying out the activities, duration, inputs, outputs, and who needs to be involved in this process you will understand the plan. By creating a schedule you can master your plan and be able to stay on track. Create tables with estimates and assumptions of the project. Over estimate the time length of each task to stay on track. 

Chapter 5: Planning and Discovery Methods
 
Chapter 5 focuses on the planning and discovery methods and design needs to understand when setting up your website for a long term success. The chapter covers UX questionnaires, UX project plan, listening tours, opportunity workshops, project briefs, and strategy workshop. Below is an overview of each method. When organizing UX questionnaires its import to know the products clear purpose and track the challenges in the organizational structure. Based on the challenges the designer focuses the questions are trouble areas, the questions will be the foundation of the project brief. UX project plan is not the same as an overall project plan. This definition is also listed above in UX Project Plan - pages 90-96. Listening Tour allows your team to set up information and learn from your colleagues on what matters most. This can also be described as the stakeholder's goals. This can be used when your new to a company and your trying to understand the big picture. Based on your questions you will find out the budget, who will engineer the product, who will market the project, and see the different opportunities the project or product will provide. In an overview the last three methods prioritize the information from a UX point of view to focus and discuss all the strengths, weaknesses, themes, user needs, business needs, goals and expectations from the project. It's important to have a plan and organize your thoughts between interviewing people because you will have more success when prioritizing your goals.

Chapter 6: Research Methods (Similar explanation in Week 6A)

Chapter 6 focuses on the different types of research methods that can be completed for user testing. 
  • Learning plan is centered around the user mindset and it is a way to get the user by face-to-face communication, server log datas and web intercept surveys. 
  • Guerilla User Research understands how the user behaves by performing goals by asking open ended questions to see the thought process of the target uses. 
  • Proto-Personas are larger in concept than a persona that thinks empathetically about consumers goals, needs and challenges. It is an unclear picture of the target audience that focuses on the needs, behaviors, motivations, quotes and over of the user. 
  • Heuristic Markup is the beginning to the end of the experience. This is an overview evaluation of the recording process by recording the emotions of the user. 
  • Comparative assessment is the envision and expectations for new user experience clear areas, content, design, features, functionality, flow, strengths, weaknesses, and opportunities. In the final outcome it will summarize the findings or guidelines.


Friday, October 23, 2015

Week 9B

WEDNESDAY


Final Project : User Testing Artifact


At the beginning of class, each student presented their artifacts that they designed. For my final critique I had small groups give me feedback on corrections and adjustments I could make on my book. From their comments I was told to change. 
  • On pg.3 & Table of Contents - Spelling error "Intension should be "Intention"
  • On pg. 3 - try to bring last work from last sentence back over to 1st paragraph gets confusing stating out in the 2nd paragraph. 
  • On pg. 6 - Under time length, it should be "depends on how long" (get rid of "of")
  • On pages 11-12 - very text heavy
  • On pg. 14 - Quoting yourself isn't right for book format, try using on attributed quote from a professional or reading.
  • On pg. 16 - Text is filling unnecessary space
  • On pg. 27 - Shouldn't quote yourself. Same comment as pg. 14
  • Point of gaze is a great way to show a complex idea but your blues could be more opaque, it's too dark. 
  • Page numbers at bottom of page are very large. Consider shrinking them down.
  • Consider keep the "key" on each image that has gaze tracking. 
  • Blues on black background kind of blend together. 
  • On pages 5-6 - lines of text are not exactly aligned between the left and right columns
  • Sometimes page number slightly go over yellow bar which is awkward, possibly get rid of yellow bar all together. 
  • Include page number on every page. 



Video

Nicolas Carr's "The Shallows" What the Internet is doing to our brains?"

Below are a few of the comments I took away from the video we watched in class. I really enjoyed watching this video because over the past year I have noticed that my concentration level as well as focusing on one task has become very difficult and at first I did not think it was caused from the Internet. After watching this video I downloaded the app called Lumosity which practices small tests like memory skills by using matching games to test and train your brain. 
  • By constantly using Google we lose the ability to concentrate and technology is changing the way we think.
  • Google has trained our brains to multi-task but we haven't been training our brains to contemplate or think more deeply into a conversation or subject matter.
  • We've been losing the attention span to engage in deeper conversations or critical thinking. 
  • Our brains will only evolve, depending on how technology evolves. 
  • Our patiences while performing tasks has decreased
  • We need to practice and train our brains by reading books that aren't on a nook. 

Project 3 - User Experience Design Process

For the third and final project over the next few weeks we will be finding poorly organized websites and constructing a new organizational structure for the website. A poorly organized website is not the same as a ugly website. The project will consist of taking photos, interviewing people, a writing segment and a final artifact. The purpose of this project is to understand the amount of research it takes to organize a website. Unfortunately, we will not be redesigning the website but we have the chance to create a designed artifact to showcase the final research. For example, someone could create a 11 x 17 poster, create an online article or hand coded webpage to showcase the research. 

The website we choose needs to be able to "tell a story". Some of the criteria we need to follow is the website we choose must be poorly organized, be able to talk to the website creators, and the website must be a non-profit organization in Lancaster, PA. 

When choosing a website, we must take into consideration the following:
  • Make sure the website is not too small
  • Preferably a local non-profit organization.
  • And had a difficultly answering the following questions.
    • What is the site for?
    • What is the main purpose?
    • Are there too many links/choices?
    • Do you find yourself struggling?

Tuesday, October 20, 2015

Week 9A

Fall Break No Class


See Week 8- Outside of Class for progress on project. 

Sunday, October 18, 2015

Week 8 - Outside of Class

Outside of Class


Over Fall Break, I spent a couple days finishing up my booklet. I focused on the questions instead of the users for my project. In order to sum up all the users eye tracking movement, I sketched out circles and lines to represent their gaze points. In my final ideation, I represented the points of gaze with blue circles. The larger the circle the larger the user read over that area. I also used the circles to represent a popular area where several users viewed. In my personal opinion I drew out what I thought was the easiest navigational path for each question. I drew the targeted area with a pink outline. Overall I thought my composition was working nicely and the shapes created in the design keeps eye movement throughout the spread. My intension was to keep the text to a minimum but it was difficult to finalize because I didn't want too long of book. I tried to incorporate as many photos as possible to keep the reader visually interested. It was very difficult to come up with suggestions because the website benefits the several different ways a user could take to get to a final result and because not one user thinks alike, a designer needs to consider all the possibilities. I personally had a lot of fun constructing my booklet although while I was taping the page together I ran into some problems. Once I moved a page slightly the pages shifted. I plan to use the book cutter at school to refine my edges.




















Saturday, October 17, 2015

Week 8B

WEDNESDAY

This class was spent to go over and critique the artifacts the students who choose to create a design element instead of a written document. I choose to create a book to present my case study. By creating a book it's something the Admissions Department could reference and hold, while they were on the computer going through my suggestions. I only had a few of my pages laid out. Below is a list of the comments I received during the critique. I tried to take in considerations all the comments into my design.
  • Take higher quality pictures. 
  • Consider making the text one block instead of two columns under "Project Guidelines"
  • Under "Set up" change privacy to private. 
  • Good use of images and iconography, continue this concept throughout the book.
  • Under "Target Users" correct willingly to participate.
  • Consider making the blue type a bit darker. 
  • Repeat shapes
  • Good composition, especially on the "Table of Contents" spread.
  • On "Moderated Usability testing, this is a lot of tension under the body copy. Maybe increase the size here. 
  • Keep text in past tense instead of present. 
  • Make sure definitions are correct under usability testing. 
  • Line up text. 
  • Make the clock hands curved instead of square.






Tuesday, October 13, 2015

Week 8A

MONDAY

In class we discussed the experience of Bar Camp. You can receive my comments on Week 7 - Bar Camp Presentation. As a class we discussed the "Making Usability Findings Actionable: 5 tips for writing better reports" at www.nngroup.com. 

This article talked about finding the clear issues in the product and how to use them will creating design solutions. By being specific the team should explain in detail the problems or successes each user had while testing the product. Other tips were to not blame the user, it's never the users fault. The issues can only be blamed on the design and organization of the product. Overall by identifying the problems your team can organize and create solutions for better rankings for the future. 




The rest of class we devoted time to help our peers with edits and grammar corrections for the students who chose to write out their Admissions webpage report. By inserting comments into their google docs page they could track our changes and decide whether they would take our suggestions. 

Since I was still missing 3 interviews I couldn't continue working on my project. I left class early with a few other students to drive over to Lyle Hall and complete our interviews for the prospective students arriving for the afternoon tours. We all were very successful because several families showed up and were willing to participate in our questionnaire.

Person 4

For the fourth student, she went through the steps fairly quickly and only took her time on the first question because she was trying to read the entire webpage first. Once she went through all the content she was able to find the correct buttons. By going through this skimming process, she could easily locate all the destinations,



Person 5

The fifth person had used the Millersville website prior to the questionnaire because she was applying to attend the campus. At the end of each question she needed to say "I think, I'm there" or if she was staying on one page for a long time I replied, "Do you think you're there?". The fifth student also had a lot of success because he quickly went through the questions. The amount of time spent on this student was a lot shorter than other students. I also used sound on this student but I don't think it really benefitted me.


Person 6

For the last person, they spend a little bit more time on the questions but at this point I had realized the type of results I would be getting would start to overlap. Most of the results in this video started to overlap with the navigational direction that other students had taken.



 After my third visit, I received more inspiration. I started to take pictures that could be used in my case study. 





Monday, October 12, 2015

Week 7 - BAR CAMP PRESENTATION / OFF CAMPUS EVENT

PRESENTATION - OFF CAMPUS EVENT

BarCamp Harrisburg - UpNext Fest 2015

Saturday, October 10, 2015 from 8:00 am to 3:30 pm
Harrisburg Area Community College, Midtown Harrisburg Campus

Overview

The purpose of BarCamp is an untraditional conference. Instead of getting lectures by a pre-organized schedule, anyone can sign up and present their discussion topic, show a presentation, give a lecture or host a workshop. It is completely spontaneous. By definition BarCamp is an international network of user-generated conferences primarily focused around technology and the web. The content of the conference is consisted of what the participants bring to the table. At first, I had no idea what to expect. We were required to speak for at least 15-20 minutes on our selected topic, which required me to create and practice an extensive powerpoint. 

Presentations

To make this count toward a off campus event we needed to listen in on another talk. In the first hour before my group was scheduled to present we listened to Tim Mckenna the president of Central, PA. AIGA. 

Tim Mckenna

Tim's presentation was on designing typefaces. I was a little disappointed to see this topic because Tim had used this presentation at a prior talk that I attended. Tim started off by explaining the differences between a font and a typeface. A font consists of the entire family and a typeface is a single style within a family such as Arial bold. When starting to design a typeface it is broken into two parts. The first step is considering the type of typeface/font that will reflect the design of your product. The second step is the process and workflow of how to create the font. One of the first things to consider is whether your designing for the web or print. If your designing for print it's a better option to use serifs because the extra anatomy features allows the reader to flow across the letters to read the page easily. Tim talked about how he creates each letter separately in Adobe Illustrator and then brings it into Font forge. Font forge is an open source FTW that takes illustrations and creates them into OTF and TFF files. Once all the letters are created you can export them as an SVG file and test the type to check for mistakes. Some mistakes that could happen are shapes overlapping if not outlined properly, variation in sizes, as well as adjusting kerning. Other considerations to take when creating a typeface is kerning, spacing, and leading. It's important to start by sketching and creating several variations in your ideation. I believed that Tim explained this presentation better during his first talk because he didn't go into detail how to use font forge or other software programs like he did before. Instead he showed a random youtube video on how to create a typeface in font forge. At the end he finished by talking about the different websites that have free fonts available. Some of the free fonts are located at Hoeffler, Hamilton Type, Lost Type, Dafont, Creative Market and much more. 

His presentation can be found at http://slides.com/azraelgroup/designingtypefaces#/

My Presentation

For my presentation I decided to go through the process of how I created my Slamin Salmon Derby Website. The project guidelines was take a poorly designed webpage and re-design the entire site from the ground up. We were required to talk for 15-20 minutes which meant having enough slides to make up for that time. This process took longer than I thought. I was able to collect all my thoughts because everything was already written out on a prior blog. The challenging part of putting together this presentation was trying to summarize the descriptions and what exactly I would place on each slide. Trying to figure out what code and techniques I used during the front-end development was also challenging because I was not trying to teach a workshop about code but my process of how I created my webpage. I personally was too afraid to talk about my code because of some of the professionals that could be there and that I would potentially say the wrong thing.

When we arrived at BarCamp we were scheduled to go during the 10 am time slot and I was the last presenter to go. By going 3rd it guided me to see what I should do while I'm presenting and avoid the mistakes other students had made. Going into the presentation, I was very nervous but as I got into the rhythm I slowed down. Looking back on it, I rushed through the beginning and should explained more about the project guidelines. I had set up a second presentation in powerpoint that had everything written out for what to say and other points I could of talked on. I started off using the powerpoint but it became difficult when I had to click on one slide and then use the other computer to pull up the presentation. I ended up scratching the entire powerpoint which hurt me in the long run. I felt as if I didn't remember all my terminology terms because I didn't use the powerpoint when presentation and it was harder to explain the techniques I use through my process. I would of benefitted if my presentation was also in PowerPoint because I would be able to set up the presentation on presentation mode that has the time and notes previewed on the screen for me to read off of. I will keep that in mind for the next time I present a topic.

Overall, I thought my presentation had a successful turn out and it seemed that the audience was very engaged in my Slamin Salmon Derby presentation. As for the questions at the end, made me think that my decision choices along the way were wrong or should of been handled in a different way. I realized that the people responded with personal opinions and were not necessarily the right choice. I tried to explain that this project had been done months prior to BarCamp and once the class is finished most students don't touch on their projects until their senior portfolio class. The code was based on trial and error and wasn't perfect because it was a class project and we only have 6-8 weeks to complete the project. If I were to redo this presentation, I would make it a bigger point in the beginning that this was a project and their was certain guidelines to followed based off the time period that was provided. Overall,  I thought this was a great opportunity because it made me practice public speaking in front of peers, employers, professionals and teachers.

To sum up my points, the list below explains what I would do differently if even the opportunity to do again.

  • Remember everyone is a critic, and if your work is questioned then you need to back up your decision making tactics. 
  • Practice speaking in front of small groups instead of one or two people prior to the presentation.
  • Create my slideshow in powerpoint by dragging the slides I create from illustrator, in order to have access to the presentation mode. 
  • Explain the project guidelines in full, prior to presenting. 
  • Take my time while presenting and give enough time for the slowest reader to read through the descriptions. 
  • Harder than it looks, give two weeks in advance to prep a presentation. 
Slamin Salmon Presentation





Talking Presentation