Posts Tagged "redesign"

I am an awful customer

Posted by on Nov 4, 2009 in opinion

I am an awful customer. I want and want and want and I have NO sympathy for your issues. You are getting paid to serve me.

I am very open about service (or lack thereof) that I receive. Rogers has done more than well by me, Netfirms has been surprisingly available (although, they never did fix the issue), and then there are the ones I talk about with less satisfaction.

This week, I signed a new one year contract with a company that has ridiculous red tape to service, high prices – and has in the past randomly withdrawn extra money from my account that I still have not received back.

Why? My health. Their product is the solution, and as much as it bugs me to give them business, I’m not going to ‘kill’ myself over it.

(Think about how often I am going to recount my woes to other potential customers – hopefully they will lose more than what I’m paying them, in the form of lost business).

None of this is really my point (thank you for reading though!). When I signed my deal with the devil, the front staff asked me about my history with products of this type, what I was looking for, etc. They asked why I wanted to try the service before signing on and why I was reluctant to do business with them despite the strength of their product.

And they sympathized! They are so friendly and nice, and getting paid next to nothing. We’ve all been there. Most of us have worked places that we would have changed if we could have at the time – from fast food to marketing. As much as I want to grouch through the sign on process, I can’t take it out on this innocent, sympathetic, my new best friend, front desk person. It simply would not be fair.

As the ‘face’ of a recent redesign – I need to become the front desk person. Separating myself from the changes coming down from on high is how a webmaster or mistress can best survive the roll out of a new look and feel. Not many redesigns are done solo, and the person with decision making power is rarely the messenger when it comes to unveiling and softly enforcing a new web onto a community.

How do you manage change across the organization? How did your web team go about introducing and implementing change?

Learn More

Don’t spend your web budget all in one place … err, at the same time?

Posted by on Nov 2, 2009 in marketing, opinion

The web as you know it will change between the start and finish of your project

Web marketing, just like its offline brothers and sisters, includes hours and days and weeks of talking, whiteboarding, scribbling and hair pulling – and this all has to happen before you can even start to picture your final project brief.

‘Web content’ and ‘cutting edge’ are defined differently by every single person, ever, on the planet.

Having just (sort of) pulled through a site redesign, I’m taking the time to look back on the process looking for TSN turning points.

Learn More

eduWEB 2009: “Web Content Provider 101 — When Knowing How to Type Just Isn’t Enough”

Posted by on Jul 28, 2009 in conference, higher ed

Presenter: Terri Vaughan, Web Customer Support Specialist, Clemson University

Abstract:

Are you one of the lucky individuals who provide support for your organization’s Web content providers who have little, if any, Web experience? Does your organization think typing and word processing skills are all that are needed to be a Web content expert? Is the “Webmaster” role part of a job description’s “other duties as necessary,” If you answer yes to these questions, this presentation is for you. You can transform your Web content providers into Web content experts by teaching a few simple skills. Reveal the “magic” of the internet and how it differs from “the Web.” Show how their Word skills can help them create interesting and informative Web content. Explain writing for print and writing for Web and why it’s important to know the difference. Inspire your content providers to learn these skills and more to transform them into Web content experts and you into a Web support genius!

Notes from presentation …

Many content providers given the job without volunteering and without specific skillset (they can type).

What they want:

  • Someone else to do it for them.
  • Want their web files and folders to be organized like on their desktop.
  • To never learn markup.
  • Drag and drop.
  • Word like interface

What they get:

  • Unfamiliar file structure.
  • Inadequate graphics tools – training.
  • Unclear or hard instructions.

What they do:

  • Put off content.
  • Insert improperly formatted graphics.
  • Create unfriendly urls.
  • Upload documents instead of web pages. (Don’t make users download.)

Clemson is on cascade, good because feels like word processing. Content providers are happy. Don’t have the other skills

What do they need:

  • Adequate technical experience.
  • Learn web best practices.
  • Easy to use img editting tools.
  • Ability to adapt print to web.

What we should do:

  • Select staff w the right skills.
  • Develop training program.
  • Require attending training.
  • Provide positive reinforcement.
  • Periodically check on their web and offer positive as well as support.

Training Regimen:

  • Basic computer skills
  • How the web works
  • Web best practices
  • Multimedia formatting and best practices
  • Simple tips for writing for web
  • Site specific hands on training w tools
  • Basic html

How to teach Content Providers:

  • Show them confidence
  • Avoid tech speak
  • Explain why skills are necessary
  • Analogies that they can relate to
  • Entertain and engage during and after
  • Follow up w reminders, cool tricks and compliments
  • If you can compare it to ms word, they will get it.
  • Stress the increase in their marketability.

Content Providers Love:

  • Copy paste from word
  • Activate previous version of updated page
  • Restore accidental deletions
  • Wysiwyg
  • Seeing their content live right away

Summary:

  • Clemson has 460 content providers. Manual monitoring process. Run report to see what’s been touched. Go out and look at their sites – this is what my job should be.
  • Clemson redesign had 4 templates – full, left, left + spotlight, right, in multiple looks.
  • Decision makers don’t understand web any better than admin
  • Training infinitely better when one on one
  • With workflows, someone needs to be in charge.
Learn More

eduWEB 2009: William & Mary Redesign Presentation

Posted by on Jul 21, 2009 in conference

Notes from presentation …

I’m very excited about this presentation – even their ppt is pretty!

Intro:

  • W&M was working from a design that was 9 years old
  • Spent about 4 months pre-planning, then RFP and selected mStoner
  • Partnership with mStoner was citical to project’s success

The mStoner Essence: (Redesign Strategy)

  • Discovery
  • Strategy Development
  • Content Creation
  • Design + Testing
  • Technology pecifications
  • Implementation + Launch
  • Constant Communication

Plus signs + are the cool new ampersand &.

The W&M Essence: (Redesign Strategy)

  • Transparent communication
  • Campus participation
  • Project management from it
  • 20% technology, 80% not
  • Trust in the mStoner redesign process

Phase I – Discovery:

mStoner

  • mStoner gets to know the institution (deep dive on site, read current publications)
  • Competitor review (“W&M doesn’t have peers!”)
  • Idetify goals: who is the site for? etc
  • Talk to everyone possible to see what they want, need, think re: the site

W&M

  • Prepping campus participants
  • The green room: cookies and drinks to engage while also shooing out the previous group

W&M chose not to sit in on stakeholder interviews with mStoner – they feel they got much more honest input because of this.

… in a lot of ways, the redesign I am working on has been at a disadvantage because pre-planning was done by a team that no longer exists.  All these great steps, if they were done, no one knows about them or has the outcomes … these prep activities are critical for the agency to learn the culture of the school and its quirks/priorities.  Especially in higher ed redesigns, which are incredibly complex and political, getting to know the ropes is one of the most important steps for an agency.

Phase II – Strategy Development

mStoner

  • prioritize audiences
  • formulate information architecture
  • outline creative recommendations, messaging ideas
  • Sort through policies and procedures
  • plan to make it scale

College of W&M

  • Internal vs External
  • Are you in?

By this point, W&M project manager had made 63 personal visits across campus – not phone calls, not emails.  Started with stakeholders that promised to be the hardest to satisfy.

Provost was the “champion” of the project.  Champion does not need to be incredibly involved, but is critical to keep the project moving when authority or heat needs to be turned up – or decisions need to be made despite division in the community.

Phase III – Content Creation:

mStoner

  • What exists? What needs to be recreated?
  • Who produces it? Who reviews it?
  • Settle on key messages, feature banks
  • Strike the right tone

College of William & Mary

  • IA and copy (who? and how?)
  • Editorial review

Previous redesign had been done in a vacuum – everything about it from IA up was “off.” Did lots of internal communication: IA is not your org chart.  25 meetings about the academics section of the website! My experience: IA meetings are long, and painful, and circular but always worth it.  Stakeholders know the content and audience best, always include them even though its painful.

Reviewers: Sent entire sections of site content to volunteer reviewers (tens of faculty members). Many didn’t have time, many provided incredible feedback.  Content was reviewed by people from other sections as well as the section.

mStoner: IA should look about 75% exactly like every other college.  There are sections and labels that users are looking for.  i.e. about, admissions, news.  W&M chose to elevate research.

Phase IV – Design + Testing

mStoner

  • create a spectrum of design concepts
  • survey designs with target audience
  • build an entire template suite
  • test chosen concept with real users

W&M

  • beware of monsters (combining elements from multiple designs)
  • feedback not voting
  • big splash is 3 not 1 (unveiling possibilities was bigger deal than the final decision)

mStoner: important to create a spectrum of design concepts.  Something that is too boring, something that is too edgy, something that is too touchy feely, something that is too cold.  This helps gravitate the community around whichever one feels right.  Online design surveys of thousands of potential students asking them how the designs they feel,what they say.  Then on campus focus groups & interviews – students, faculty, staff, anyone that wants to talk.

Stakeholders are always waiting for pictures.

W&M pulled together a group of people on campus that had professional experience with design.  W&M was very careful to make sure that people knew they were providing feedback, not voting.  Before beginning discussion, gave each participant a piece of paper with questions and had them write down feedback – once the conversation begins, they will be biased/silenced/volumized.

Design possibilities were unveiled on project blog, as well as to Facebook supporters.

Wanted to get feedback on what felt right, what felt wrong?

Audience navigation very subtle – sent out internal communication that there were special areas for each audience – to soften blow of a sudden, drastic change to current navigation.

Phase V – Tech Specifications

mStoner

  • Create a short-list of CMS options
  • Identify/select CMS
  • Develop functional specifications based on designs
  • Code HTML templates, CSS files

W&M

  • Show & Tell
  • Demo the two best

W&M shared CMS feature lists and design specifications with anyone that asked – found this effective.  Most people took a step back and accepted that team knew what they were doing.

Had mStoner demo two different systems to about 100 people! Wrote a script of what they wanted mStoner to show.  Important to not have the vendor run the demo.

Global Image – mStoner’s technical partner – helped with the implementation of Cascade.

Phase VI – Implementation + Launch

mStoner

  • implement templates and features in CMS
  • Tie-in additional systems
  • Test functionality in an array of browsers
  • Configure users, roles, workflows
  • Conduct necessary training

W&M

  • Stop communicating
  • Command central

“You can’t have big red text.  And you can’t make things flash.  The price you pay for a beautiful award winning site, and functionality being added & improved every day, is that you have to give up some control.” rough quote – very well said.

W&M’s website now sits with IT and its suggested that this should have been the case long before now.  I wonder why? Where does the web sit at your institution? Media/Public Relations? IT? Web Comms as its own world? Perfect world: I would have the last option, but at best that is a future goal (for me).

Learn More

eduWEB 2009: “Higher Style for Higher-Ed Web” by Stewart Foss, edustyle.net

Posted by on Jul 20, 2009 in conference, higher ed

Notes from presentation …

What is the purpose of your homepage?

Help users find information that they are seeking.

Most of the room is the “jack of all trades web person at our university”

And does it look good while its doing that?

We all have websites and they all have problems. Demolition is the go to solution – rebuild.  In many cases, the best thing to do is tear it down but in the majority the best thing is to fix what’s wrong: incremental redesign. Research, tweak, repeat.

It’s easier to ask forgiveness than to get permission. (But you shouldn’t need forgiveness)

Step One: Research

Something to go back to to explain decisions

  • articles, books & conferences
  • web statistic data
  • surveys
  • user testing

Introduce your institution and its strengths

University of Mary Hardin-Baylor

  • girls
  • football
  • purple

What is this university really about?

Biola – tagline that identifies a unique aspect of the school.

Also, a nice simple succinct paragraph that introduces your school – UTennessee Noxville. http://www.utk.edu/

The Banner

Flash or Ajax, typically. This is prime real estate.

Notre Dame – carousel.  Using the space for useful things – interesting stuff that is taking place at Notre Dame.  Changes on a regular basis.  Could you use your banner better? Could we send some messaging out?

Washtenaw Community College – promoting valuable things at the school

uTexas Office of Communications page.

Banners: you need to fill them with stuff.

Ideally you have a photographer on staff, but not many people in the room do.  Cheaper than hiring: you can get a good camera for about $400.   (USD) The beauty of digital photography is that it doesn’t cost you anything to try it again and again and again.

Try crowdsourcing to students who are passionate about taking photography. UWO uses a flickr box on the homepage to bring in crowdsourced content.

Tip: Taking your own pictures? Avoid situations that will need a falsh.

Navigation

Lenoir Community College.  Every day we fight battles about what goes on the homepage.  Our job is to be the gatekeeper – and turn 90% of people away.

Over 50 links on Lenoir’s page.  5 navigation systems, in groupings that don’t exactly make sense.  “I don’t see why these links are different from those links.” Remember, goal of the homepage is to get people to the information they want to get to.

Logical groupings, with headings.

University of Oxford – you will probably lose a lot of the homepage battles.  uOxford makes the page simpler by grouping the homepage links.

Boston University – another example of a page with many links, but grouped in logical groupings.

Ideally you don’t have more than 10 links on your homepage, but in higher ed, this isn’t the reality.

Search Placement – navigation is not going to work for everybody.

Search box is expected in the top-right corner.

a:link

Web is made up primarily with links – their design is a critical part of web design.

They don’t always need to be blue with underline, but be cautious each time you break this guideline.  Persistent navigation is an area where it is often ok to break the mould.  Also, feature areas.  In-text links should at least be underlined.

Critical to use the a:hover state. Reaction when touched.

Colour: use with caution

Very dangerous unless you have a background in colour theory or design.  And most of us don’t have that.  When it’s great on a jersey, or on a fan’s chest – it won’t necessarily look great on the web.  Your school colours were chosen before the web came along.

Indian Hills Community College – eek.

USC Rossier – stronger use of the same colours. It’s not always the colours, it’s how you use them.

Sometimes, adjust colours slowly – go into photoshop and move them down and to the right – just don’t tell the brand owner.

Rossier used a gradient (red to red) to create warmth and depth in the top of the homepage.  Monochromatic gradients help you have a nice site in spite of your school’s colours. Use them as an accent, not a background.

Step back and look at your colours – what emotion to they evoke without text or design or layout.  Pick colours that go with the message you are trying to put out there.  See if you can use complimentary colours to balance difficult official colours – i.e. a brown to a yellow.

Use Color to Separate Content

Champlain College- nav, banner, content

Oklahoma Wesleyan – top, bottom

Spacing & Fonts

Higher ed websites tend to be text heavy, and your spacing/fonts play an impact on readability of your site.

Line height: Increase line height slightly – makes it easier to see individual lines of text.  Too tight blurs the lines together.

Headings, Lists, Bold, Italics, etc: Web content 101 … Use colour in headings, create your own default bullet with some colour.

Wesleyan (About Us page): Has some of the spacing issues.  Tight spacing creates a feel of business.  Add height to top nav and increase font size.

These are little things you can do without the hassel of a redesign.

Recommendation: Consider every element.  Don’t do anything because everyone else is doing it.  Look to people for inspiration but don’t follow them off the cliff.

Consider whether you have the content/staff time to maintain a new element.  i.e. newsfeeds aren’t so great when you have no news.

Don’t look to just one source for inspiration.

Recomended sources: Edystyle.net, BlogHighEd.org

Dezinspiration, Most Inspired, Smashing Magazine

How to spot a good web designer:

Look beyond “looks” – usability considerations are good cues that the designer was thinking about every element of the site, and how they are used.  Look at their sites, ask them questions about usability.

Height of a homepage banner: screens are getting bigger, mobile browsing is very small (and getting more popular).  If the space is used effectively (communicates, drives into content) then it isn’t too big.  “Above the fold urgency is fading, people are more willing to scroll.  Most important stuff should be above the fold – so if banner takes it all up, it better be important.

Fixed layout vs elastic layout: Steward leans more towards a fixed layout, primarily because of line length. Maximizing can create a verrry long line length, which kills the purpose of the page which is to be read/consumed.  Also much easier to design for fixed (no background images that tile, or boxes out of place).

Designing for mobile environments: Research is important here – use your stats. Check your analytics.

Adding social media right up front on the homepage: Oklahoma Wesleyan – live twitter stream on their homepage.  Skittles disaster … Bare minimum is to have the social links.  Penetration is mostly facebook.  Twitter is getting more mainstream, still a niche thing.  Flickr is very niche.

Learn More