Art of the Web

1. Good job integrating classmates’ experiences into building out a useful application.

2. Still not necessarily fully feasible, may have technical challenges that need solving.

3. Languages currently include English and Chinese (Mandarin). May require more or making it more easy to toggle between them. 

4. Make sure the last part, “Settling,” does not drag into the Penn experience too much, if the objective is to stay focused.

Additional Thoughts on my end

1. How does this connect with the various online interactions Penn forces you to go through? Should integrate better with CampusExpress and PennInTouch.

2. Considering removing menu page, and automate pushing user through 3 steps.

WInitial Iteration (Paper Test)

1. Focus on connecting the three main parts better, i.e. what can be asked in the "Planning” which can then be connected to “Arriving” in a helpful manner? Consider integrating these with each other to make sure a. there is no conflicting information in the app experience, and b. it is better suited to user’s needs over the time period of use. 

2. Does this need to be useful post arrival and settling? What about helping people find places to eat etc.? Initial thoughts are to avoid that and focus on just this stage of the Penn experience - keep the app focused on specific use case. 

3. Don’t be limited by feasibility - test out idea of AR for in-airport navigation system to help users reach taxi pick up area. 

4. Checklist needs to be more interactive, and information present about each item needs to be better connected with other resources available. 

5. Very important to focus on making sure this app gets in the hands of the students who need to use it.

6. How does this help with people looking to find housing? Integrate options like Craigslist, apartments.com, airbnb, to help students learn how to navigate that aspect of moving to Philly. 

7. Change visual appeal to suite that of the audience and what they are used to seeing.

Main changes for second version

1. Items to be included in the checklist have been “tightened,” and are better linked to requirements/suggestions in the arriving and settling aspects, i.e. type of phone to buy based on GSM vs. CDMA, or specifying $250 to be carried in cash in case of emergency, paying for a cab, etc.

2. Style guide redone, switching from prioritizing Penn’s style to focusing more on heavily used chinese websites and apps, i.e., QQ and WeChat. Old style guide focused on black, blue, and red/yellow. New style guide has a preference for black/white, blues, and greens. 

3. Integrate AR, and add step of connecting to free WiFi in PHL to make it more feasible.

4. Add in dorms and apartments recommendations section, including instructions on how to choose one and which resources to use.

Designing a Responsive Grid in 2016

Takeaways:

1.       12 columns, looks good at most ratios

2.       Wireframing should be lo-fi, saves time and helps designers get to the next stage faster

3.       Focus on the smallest screen size the design will cater to, make sure it works on it

4.       Reduce resolution to make work more effective

5.       Nested grids can be leveraged to create extra spaces

6.       Test 3-5 key layouts at various screen sizes to find potential pitfalls early

 Grid-Based Web Design, Simplified

1.       Getting Started: stick to graphics programs at the start, since it is easier to manipulate visuals and move things around, then doing things on the web (html/css)

2.       Choosing a base unit: larger interval consisting of multiple pixels to make aligning easier

3.       Creating file and setting up the baseline grid

4.       Coding: focus on the structural makeup and find the simplest ways to implement the design from a more basic layout and build up to the details

 All About Grid Systems

Grid System: structure comprising a series of horizontal and vertical lines, used to arrange content

Advantages of using Grid Systems:

1.       Design in proportions, and balancing out different elements

2.       Sense of uniformity and familiarity

3.       Easier to implement and code

Disadvantages:

1.       May restrict creativity

2.       Not easy to work with, and require practice to use effectively

Using Grid Systems in Designs:

1.       Set an overall of the grid onto the design

2.       Create some guides

3.       Work with constraints and restrictions

4.       Pay attention to spacing

 Designing with a Grid Based Approach and Design By Grid

Provide a great overview of this design approach, providing several references and links to helpful explanations, guides and tutorials for specific sub-topics.

Responsive Web Design

“Responsive architecture”: how can physical spaces respond to the presence of people passing through them?

Responsive Web Design: Designers need to design for an ever-increasing number of web-enabled devices, and create an optimal viewing experience. By using standards-based technologies, designs can be more flexible, and made adaptive to the media that renders them.

CSS has multiple ways in which making websites more responsive, ranging from media queries to implanting a fluid design (float positioning), and selectively indicating what features show up based on which page.

The way forward – fluid grids, flexible images, media queries.

.

Understanding Responsive Web Design

Three main techniques:

1.       Fluid Images: Using %’s to define the dimensions of an image relative to its container

2.       Fluid Grids: Using a grid layout to determine the various content containers in a way that is adaptive to the users device

3.       Media Queries: Applying different CSS rules to order different layouts based on the width of the display window given for the content

Another key point: cross-browser compatibility – can be addressed through JavaScript solutions (Respond.js, Modernizr, and adaptive.960.js)

What The Heck is Responsive Web Design?

Scrolldeck.js presentation

Webflow: platform for building responsive websites

Things to bear in mind when designing: time & money, older browsers and backwards compatibility, performance, content, websites vs. apps, and the actual designing process.

 How Fluid Grids Work in Responsive Web Design

Responsive design: the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size

Fluid Grid Layout:

Fluid grid: designs that adapt to the user environment, based on the device or the screen size (designed agnostically)

Rows of 12 “columns” creating a grid based layout. Need to be wary about the widths of these columns, especially when adjust to less wide screens.

Understanding Visual Hierarchy in Web Design

1. Design = Communication

People tend to be visual thinkers, not data processors

We try to find differences between things as we perceive them, and try to classify them, processing information in the form of visual relationships

These classifications range from color, shape, size, and can also be much more complex

It is critical for web designers to understand that people “perceive” information in this manner, and need to learn how to break down information in visually relevant and appealing way.

2. The Hierarchist’s Toolbox

Size: should be correlated with importance

Color: used as a personality tool

Contrast: relative importance

Alignment: order between elements

Repetition: relative meaning to elements, helping link elements and draw attention

Proximity: creating sub-hierarchies

Density and Whitespace: this is more about spacing on the page, and helping people classify information

Style and Texture: very open-ended, more about the “feel” of the page

Principle of Hierarchy

Order of importance –

1.       Where does the eye look First

2.       .. Second

3.       .. Third

Elements and principles that create visual hierarchy:

-          Contrast, scale, proportion, textures, etc

-          Elements within a composition can be ordered according to their importance

-          Hierarchy may be determined by the scale, color, or placements of elements

Hierarchy by Placement – objects placed in the center will be perceived as the focal point

Hierarchy by Isolation – an object that stands out on its own when others are grouped together

Hierarchy by Contrast – emphasis created by contrast

Guide to Visual Hierarchy

1.       Use size to enhance or reduce visibility: changing visibility impacts the perception of importance

2.       Color and Contrast: use temperature, value (lightness), saturation, to direct someone’s attention

3.       Typographic Hierarchy: create 3 levels to organize a design (most important, sections, and main text)

4.       Fonts: pay attention to the personality of the font, and making sure different types don’t clash

5.       Spacing: balance, flow, and focus

6.       Composition: rule of thirds, odds, implied movement

How to build a Brand Identity

Elements of a brand persona:

Brand Pillars – key words that embody what the brand is about.

Brand promise – Promise statement to customers that outlines the distinctive benefits that customers can expect in interactions with the brand.

Brand essence – core characteristics that define a brand, typically stated in two or three words.

Mission statement – statement of the purpose of your brand, should include key market, contribution, and distinction.

 Once the persona has been identified, marketing materials and graphic assets can be developed (a lot more easily), and include everything from the logo, to the color palette, and the naming strategy.

Main points: 

Easy to use - clear

Simple, not unnecessary

Focused

Accessible

Attempt 1:

Purpose:

Help you gather ideas and inspirations before getting started on the design.

Can help clients get on the same page with the trajectory you are going on, and give them a feel for what the final product may look like.

Steps to make a moodboard:

-          DIY: focus on inspirational material that you’ve seen and has actually impacted you

-          Match brand qualities to content

-          Make multiple

-          Go to the source, i.e., temporally and in the right “era” for material that inspires

-          Don’t be limited to stuff directly related to the project

-          Get organized

-          Cover your bases for everything: fonts, menus, icons, colors, style

-          Apply your ideas

-          Experiment, be flexible

-          Add explanations when necessary

Research focused on how you find stuff online. Interviewer and a video camera, not obtrusive, recording for other researchers / designers observing.

Looking at body language, emotion, facial expressions

Also looking at more objective things / like work flow issues

 Interview:

“How would you describe the type of shopper you are?”

“What brands do you associate yourself with” – Etsy vs. Amazon. Etsy feels good.

“What’s the most important function?” Search box.

 Observations and feedback on visual demo:

New Etsy page, fewer pictures, not as much distraction.

Cleaner and simpler / less overwhelming, lower heart rate

Goals

1. Help students get to campus easily

2. Help students get around Philadelphia easily

3. Ease their transition into Philadelphia / showing them the resources that are available to help them get situated

4. Provide access to online and offline tools they can use to navigate – list of travel options and static maps of PHL

5. Easily updateable repository of useful links and information

6. Go-to place to solve issues in the first few weeks of arrival

7. But only link to things that are necessary, to minimize options and less useful information

8. Integrate into the various Penn experiences pre-arrival / beginning of the start of the academic year

9. Open to suggestions and changes based on what is most useful for students

10. Good IA

 Some points

-          All information held within the platform (excluding the link repo aspect) needs to accessible offline

-          Might be best to implement as a mobile app

-          Links to online resources need to be minimal but encompassing of common issues, and actually be useful / actionable for students. If not, FAQ would be better

-          Language comfort and barriers need to be addressed, app may have to have multiple options for Mandarin displays (need to confirm that one script should be fine for everyone, since writing is consistent even though speaking may differ across China)

-          How are people going to know about this? Why should they bother installing it?

 Key concepts

-          Mobile app with combination of offline resources and online links

-          Offline resources must include navigation to campus and around Philly, to help when students first arrive

-          Online resources must cover primary questions students have (setting up phone accounts, bank accounts, SSN, on campus communities and organizations, etc.)

-          Must be easily updateable and flexible, developers and guides should be open to suggestions

 Strategy

- Understand what information is classified as crucial

- What of that is online or offline?

- Develop an IA that is suitable for the needs of the app

Problem statements can be divided into 2 parts, the first of which identifies the problem and states the solution, and the second of which focuses on the metrics to evaluate the success of the solution.

Here are a few versions of the first have that I am considering: 

For Penn students arriving in the US for the first time, it isn’t easy to navigate to campus and get around Philly. Penn’s new inPhilly tool will help them with the right resources to find their way around Philadelphia.

International students arriving in Philadelphia need a better resource to understand how to get themselves to campus and around the city, which will be solved through Penn’s inPhilly tool.

International students arriving in Philadelphia and the US for the first time struggle to get to campus from the Airport. Penn’s inPhilly tool will help them prepare for their arrival and help them better adjust to getting around the city of Philadelphia.

Chinese students in the US for the first time don’t have access to enough offline resources to navigate around the city upon around. Penn’s new inPhilly tool will provide both online and offline resources to make this transition easier.

Chinese students arriving in Philadelphia for the first time have an issue with reaching campus and getting around the city, which will be solved by Penn’s new inPhilly tool.

For the second part, I have chosen to go with the following: 

Its success will be measured on the % of international students using the tool and periodic interviews with new students to understand their arrival experiences.

Currently, the problem statement for inPhilly is the following:

Chapter 10

-          Everyone starts a website with a “reservoir of goodwill” which depletes with each negative experience they have, and depleting it can have consequences in terms of revisiting the site, leaving without getting what they need, or overall brand value reduction. This reservoir depends a lot on the person, and is very specific to that person. It is situational. It can be depleted or refilled, and sometimes either can take place radically based on just one action.

-          Avoid: hiding needed info, punishing users for not doing things in a certain way, asking for unnecessary information, lying, or having an unprofessional UI

-          Do: inform correctly on needed information, make the website obvious and easy to navigate, save steps when possible, good FAQs, printer-friendly pages and other comforts, easy recovery from errors, and apologies when things go wrong

 Chapter 11: Accessibility

-          Developers and designers tend to underestimate the importance of accessibility

-          Tends to lead to more work, creates a need to compromise on some aspects of design

-          Accessibility is typically a lot easier to find things that would make a site less accessible, rather than the other way around. Testing for accessibility also tends to result in a long list of potential actions and recommendations, rather than a few definitive fixes.

Here are 5 things that one should do right now

-          Fix any usability problems that confuse everyone

-          Read “Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers”

-          Read a book about web accessibility; there’s a few good ones that are worth reading

-          Use CSS, and be smart about what is being done with it since it will lend a lot of flexibility

-          Go for the low hanging fruit at any stage, to generate quick and easy improvements that provide longer mileage

 Chapter 12: Bad Design