Instagram
[fts_instagram instagram_id=256737344 super_gallery=yes image_size=100px icon_size=50px space_between_photos=1px hide_date_likes_comments=yes center_container=yes image_stack_animation=yes type=user]
Twitter
[fts_twitter twitter_name=elliance]
User experience design handles the strategic, narrative and structural design of digital experiences in service of persuasion, conversion and delight. There is a science and art of user experience design for marketing websites. Here is the list of best practices we have developed over the last 25 years: 1. Recognize that customers, not you, are the real hero of the story. Great brands help their best prospects realize their personal hero’s journey. Resist the temptation to talk too much about yourself. Stay focused on your prospects. 2. Put the needs of the right-fit prospects first. Begin your project by writing various use cases that capture the functional wants and psychological needs of your best prospects. To arrive at these, conduct primary research and review all secondary research you can find. Understand elements of brand value. Identify distinctive hooks that appeal to your prospects. 3. Sharpen your business strategy and your authentic brand position. Ask your senior team simple questions: “What … Continue reading
Posted in: experience design for marketing websites, inflection points in business
Leave a comment
As a front-end web developer I deal with Design, User Experience, and User Interface challenges on a daily basis. I also have my fair share of opinions on what works and what doesn’t work in UI/UX design. Sometimes I am wrong, and recognizing that you are wrong is the first step towards progress. The following is a sample of my ‘list of observations’ (mostly things I was wrong about) from this past holiday season while visiting friends and family. Young children actually use voice search: I’ve spent two days watching kids use (successfully I might add) voice search on a cable box. It was actually quicker and more successful than using the clumsy remote text input. This is a surprising contrast over my failed attempts with Siri or Google Now. Non-developers are more tolerant of broken software: I watched several people acknowledge broken software (video games, web pages, etc…) and merely shrugged their shoulders and move on with the task … Continue reading
Posted in: front end web development
I don’t like the term “UX Design” and this is why. Back in the day, when the Internet was still emerging and I was studying Design at Carnegie Mellon University, we didn’t call people “users”. We called them “people”. As designers we were taught to set our egos aside, and deeply consider the lives of those who would experience what we were designing. This is where I see an important distinction between what’s called “User Experience Design” and what I call “Human Experience Design”. In too many circumstances, UX focuses too narrowly on simply making the tool easier, instead of making lives easier. Here’s a real-world example of what I’m talking about: A person takes an online, professional certification course. At the end of the course they’re alerted that they’ve passed via email. The email takes them through a multi-step process to obtain their certification card. User Experience Designers work to make these steps easy to understand, and user friendly. … Continue reading
Posted in: human experience design, user experience
There is an old saying here in Pittsburgh: you can’t get there from here, which refers to the difficulty in getting around due to all of the rivers and streams in the area. I don’t think it’s said to be discouraging, as much as it is said out of laziness — directions tend to be a bit convoluted*. However, if there’s a will, there’s a way. In my prior work with a university, I was confronted with a technical challenge. How could they follow a prospective student’s path from their website, through an embedded third-party inquiry form, and back to the academic program landing page they started on, without losing session state? Oh, and they wanted to capture this in their usual Google Analytics dashboard. No pressure there. Conventional wisdom dictated that this was not possible; the student would be considered a third-party referral upon return from the form submission. I wasn’t convinced. After a bit of research, I found the solution … Continue reading
Most people draw a clear line between conventional marketing of products and services, and social marketing, which broadly defined applies marketing principles to change human behavior in order to improve health or benefit society. But what happens when you bring a social issue forward that almost nobody knows even exists — one that goes to the very heart of an American ideal as old as the Declaration of Independence. We hold these truths to be self-evident, that all men are created equal. True in countless respects, but not when it comes to gauging a child’s future academic success. Some children simply are born “gifted” or “talented” — and that wealth of talent spreads equally across all segments of the American population, regardless of race, religion, geography or family income. Researchers count about 3.4 million academically gifted American school children in grades K-12 who happen also to be poor. Here is where the story gets interesting. Year after year, grade after … Continue reading
Recently, we launched a landing page for Bryant University. This site asked the question “Why Bryant University?” and was completed in a tight two week turn around. Seemed like a walk in the park. It was anything but that. Thanks to our amazing design team and our thoughtful and motivated clients, Why Bryant sparks your imagination with its amazing colors, brilliant visual effects and playful interactivity. What started out as a simple website was transformed into a story that can only be experienced firsthand. What we’ve learned As a front end developer at Elliance, it’s my job it take the ideas and visions of the design team and the client, and give life to a static mock-up. This project presented several new challenges for me, some solved more easily than others. 1. What to do with all these scripts When building this site, we wanted to create an interactive experience that keeps the user engaged from start to finish. The problem … Continue reading
This is part 1 of my 3 part blog post about the best solution to your .edu website. Please stay tuned for the following posts. Now that nearly a quarter of web traffic is coming from mobile devices*, we’ve come to a crossroads over the best solution to a large webpage such as an .edu site. Should we build a mobile app with a sister desktop website? Or does a responsive/adaptive website make more sense? All modern solutions, at the end of the day, will get the job done for you. The question is, what is, hands-down, the best solution for your school? The first thing you need to do is forget the buzzwords and focus on your users. Do they do a lot of browsing on their devices? What is their age group? What are they looking to accomplish on your site? Your analytics should give you a lot of this information. (And if you don’t have analytics, that’s … Continue reading
Posted in: mobile app, responsive web design
If you’re a web professional, Pittsburgh is a great place to call “home.” For one, the city is stuffed with outstanding practitioners from a broad array of webby disciplines. With tech stalwart Carnegie Melon churning out batch after batch of HCI brainiacs and scrappy Pittsburgh Technical Institute (yes, I’m totally serious) minting successive generations of well-educated, cross-disciplinary digital talent, Pittsburgh’s web community is as peer-rich as it is talented and capable. As fortune has shown its light on our town, Pittsburgh professionals have likewise made hay. Jason Head spun up and nurtured one of the country’s most vivacious Refresh communities (full disclosure: I was for several years a “co-organizer” of Refresh Pittsburgh with Jason, although I did more promoting than organizing). Averaging ~70 attendees per bimonthly meeting and boasting over 400 Facebook likes, Refresh has drawn Pittsburgh web professionals together and has become a fantastic forum for regular professional sharing and fellowship. A multitude of other groups thrive as well: … Continue reading
First of all, skeuomorphism (ala iOS 6) and “flat UI” (ala Android) are tied to the same fate. It’s not one over the other. Neither can survive. In fact, they’re both as good as dead already. Pour one out and get over it. Let’s stipulate that “Flat UI” – the hysterical term du jour for those who wish to discuss the recent trend away from skeuomorphism in interface design – is both fleeting and misleading insofar as it describes iOS 7’s new look and feel. Apple has always championed UI cues that borrow from the tactile world in order to evoke familiarity, and thereby put users at ease and convey meaning, and iOS 7 does not break from that decades-long tradition. To the contrary, iOS 7’s parallax layering and attachment of interface responses to the phone’s accelerometer and gyroscope deepen and extend this commitment in a big way. No longer is motion-control in iOS the sole domain of ingenious third-party app-designers … Continue reading
Posted in: flat design, flat ui, iOS 7
In 2013, we started making our wireframes responsive, instead of drawing them in Omni Graffle as we had for the previous ten years. And it’s great, but one of the challenges we immediately ran into was figuring out how to convey page notes in the responsive context. To solve this problem, we created a tool we’re calling “Metaframe,” and today we’re releasing it under the Creative Commons Attributions Sharealike 3.0 Unported license for use, modification, and redistribution. Metaframe creates a responsive presentation layer for responsive wireframes (or mockups or design comps – any HTML page). It’s a very lightweight package, and it’s dead-simple to use. How simple? To install, you simply reference two files alongside your other Javascript and CSS. To add a note, you add the class “notation” to the HTML element you want to annotate, then write your note as the value of the custom attribute, “note”. (The Elliance GitHub page has precise directions and example code.) Metaframe … Continue reading
Posted in: responsive wireframes