Category Archives: Design

Discussions regarding UX, informational and industrial Design

Yahoo Storytelling with Kathy Savitt, CMO @Growthbeat

I attended a talk at the GrowthBeat conference on Tuesday on my way in to work. There were actually two talks on Storytelling that i wanted to see, but after attending the first with Kathy Savitt (Chief Marketing Officer and Head of Media at Yahoo), i opted out of the second.

Kathy Savitt, CMO Yahoo, Inc

Kathy Savitt, CMO Yahoo, Inc. at the GrowthBeat conference

Storytelling in UX is a critical part of the designers job, and i was hoping, since these talks were titled “Storytelling”, there would be some good takeaways. Unfortunately, not so much.

What i was able to take away was this: Yahoo is doing a large marketing push in 8 Geo’s (i’m not sure if cities or states). I can see one in SF if you look almost anywhere you are walking. It’s these deep Purple posters on the kiosks and some billboards, with the new Yahoo! logo on them. Some are targeted to create brand awareness that Yahoo! is taking on a mobile first approach and still relevant. Kathy Savitt said that Yahoo’s goal over all is to show the world they are more mobile, and to “guide users to link information to other users”. With their 1B monthly users, they are trying to get them to interact, as opposed to just use Yahoo in silos.

IMG_4471

She moved on to discuss a TV show Yahoo! invested in called Community. They showed a reel which showed the shows characters talking about Honda brand items (such as cars, motorcycles and lawn mowers). There was a ton of talk about Honda products, and a character that was so sold on Honda, he couldn’t stop thinking about it, and buying it. Probably the most gross display of crapvertising i’ve ever seen. Maybe they are trying to get into the Netflix/HB/Showtime original game, but… it’ll never sell.

Lastly, she asked the audience if they were using Yahoo’s new offering, live chat. No one raised their hand (about 300 people). She said she uses it with her kids all day, and they are able to send IM’s and silent videos with it. I guess everyone is trying to get in the SMS game, but with Yahoo IM being around 15-20 years, and functional with millions of active users, i could not figure out why they were coming up with yet another offering.

My takeaway, unfortunately was not about ways that Yahoo’s head of  marketing tells stories. There was an example in the Community show to some degree, but… all in all, this was just a reminder of how many of these once relevant “dot com” giants are lagging or why they failed. Sadly, Yahoo! has no visible spark left on the creative side, at least from a C-Level perspective, that i could see. 

UX Terms

A mentee sent me an email asking me to define some UX terms, and re-bucket the terms in various sections (they were all out of order initially). It took about 20 minutes and I thought i’d share it here.

UX Analysis:

  • Competitive Analysis – Study of and collection of examples other companies offerings including screen flows of web pages, app pages, etc.
  • Stakeholder Interviews – The interviewing and collection of information from the subject matter experts. People who know the product well enough to give the designer (or person extracting the requirements) what they need to start on, and or fully produce a design deliverable.
  • Heuristic Evaluation – rule of thumb testing. doesn’t use real users, almost anyone will do to prove a point. Hard to do if you don’t know what you’re doing.
  • UX Metrics – When you test, you get metrics on how the UX is working. Well, poor, fair? Is the design doing what it purports to do?
  • User research – Basically, overall research and understanding of who your users are. includes personas, testing, metrics, etc.
  • Task Flow Analysis – These are user roles, and sometimes interchangeable with personas. however, these are high level flows of what the user is trying to accomplish at its core with your product.
  • Persona Development – Personas were created initially by Alan Cooper (cooper.com) while at Microsoft, and they are usually used to show a development team who they are coding for. There is usually a picture of the user, a brief bio, name, age, and what their primary purpose or what they are trying to accomplish using your app or site.
  • Usability Testing – Bring people in and test a design on them. This is a practice all in its own, and too much for a couple sentences. Basically, you have a usability person take your design into a lab, record users using your design, and reporting back on what works and what doesn’t.
  • Focus Groups – Talking to groups of users who currently use your product, and getting feedback on what they like and don’t. Also can be done via online surveys, but, this is usually done in person.
  • UI Specification Review – Once the entire design is done, and you have everything spec’d out (specifications written), you go into the room with the team and do a UI or UX spec review. Remember, UI and UX are different. UI is visual and sometimes the visual designers spec, but its usually the UX leading the spec review.
  • Post Development UI Review – This is a review done after engineering is done coding so we ensure the UX and visual comps the engineering team was given were coded in correctly. Usually takes several 1 hour sessions depending on the size of the project.

User Testing:

  • A/B Testing is showing potential test subjects 2 examples of an interface and asking which one they prefer. It can also be done only showing one at a time not letting the user know they are being tested (Facebook does this all the time). They show one screen to one group, and another to another group. Classic A/B testing.
  • Functional Prototypes are the tappable or clickable prototypes that will be tested.

UX Design:

  • Information Architecture (IA) – mapping the page flows
  • Wireframing – low fidelity mock up of each box from the IA flows.  Usually down in Omnigraffle or other similar program.
  • Interaction Design – This is what the user taps or clicks on in the wireframes.
  • Visual Design/ Iconography – Higher fidelity than they wireframes, and usually done in Photoshop of Illustrator.

Inspiration for X31 portfolio site

Inspiration for X31 portfolio site

This image became the color inspiration for X31, my portfolio site. I took the image into Adobe Kuler, made some additions to the color wheel, and this is where you can see the medium and dark grays. I added the Orange and browns through Kuler for use primarily in text and links.

X31 Initial: https://kuler.adobe.com/Dodge-Charger-color-theme-1159032/

X31 Final: https://kuler.adobe.com/x31-current-color-theme-912176/

x31.net

Installing Omnigraffle Table of Content Script

I’ve had to re-load Omnigraffle a couple times in the past year, and its really a pain to get the TOC creation tools in place, since they aren’t yet supported by OmniGroup. I’ve written out a word doc for my workplace, and going to re-create it here for those who need it. WordPress wont allow for zip, scripts or graffle files to be uploaded to the server (good for them). If you need a template for omni that has a TOC page and prints properly in all sizes, feel free to email me through this blogs About page.

AppleScript / Omnigraffle Table of Contents Installation Instructions:

Link to TOC Scripts:

http://unitid.nl/wp-content/uploads/Create%20Table%20Of%20Content.scpt.zip

  • Open Apple Script Editor.

    openapplescriptseditor

  • In AppleScript Editor / Preferences / Check off Show Script menu in menu bar and Show Computer scripts / Bottom or Top (the defaults will show in the opposite).

    scripteditor
  • This will show the script menu in the menu bar:

    menubar

  • Click on the AppleScript menu above and Open Scripts Folder and select Open User Scripts Folder.

    openfolder

  • Once in that folder, paste the file or folder into the Scripts folder. After pasting, you should see the TOC creation options from the menu drop down.

    pastetofolder

  • Make sure your Omni has a TOC page created (page 2, after the Cover page).

    TOC

  • Select the TOC script you’d like to run.

    createTOC

  • The script will create the TOC on page 2 directly from the page titles in your Omni doc.

    pagenaming

  • The TOC will show all pages after the Cover and Table of Contents. You can edit and resize or color the text by selecting the TOC text and changing the font size or color in the properties manger. This script is set for Helvetica med grey font size 12. Now you can export your PDF and the added TOC should allow users to navigate to respective pages.

    TOCview

  • Before you create your PDF, if you’d like to set a Home link to the document, linking back to the TOC page from other pages is as simple as linking the Header title. Select the Header title, then pick the canvas you would like to link back to from clicking on the header. See the Properties, Actions section. In my case, i link back page headers to the TOC page.

    properties

UX Books / Reading List

I get a fair amount of requests from budding UX designers for best or favorite UX books. I dont like to overload them, so basically i do a walk through of a blueprint / spec’d wireframe set via Skype, hangouts or in-person, then the following reading list as a solid, easy to digest introduction.

The #1 read is: The Elements of User Experience. Jesse James Garret leads the Adaptive Path team here in SF, and he’s the man. This book talks about the structure of sites from the bottom up, then priority, structure and strategy. Its the Bible.

#2-3 include Designing the Obvious. This was my fav book from 2008/9 followed by Designing the Moment. The original versions were mainly web focused as opposed to mobile, but the approaches he suggests to trim down the design (get rid of the nice to have features, and how to talk the team into doing it and why, at least initially) was a game changer for me. I think the 2nd edition incorporates mobile.  Also check out his articles on that page. Good stuff.

#4 Don’t Make Me Think. I cant say enough good about this book. Its the first time i realized through a great visual statement the author make about street signs in Los Angeles. You can read the next cross street name a mile away the signs are so clear (Sepulveda or Venice). And you always know right where you are as it should be on a website, “I’m on the corner of hardware and chainsaws”. About x Careers. Something like that… There was no ambiguity, and due to this book, i am a diligent proponent of very clear “street signs” on the web.

#5-8 include: Mobile First, Responsive Web Design, Content Strategy for Mobile and Design is a Job (my fav of the abookapart lot which talks about how to be an effective consultant, which we ALL are at ALL times be it FTE or contractor).

Current challenges designing for Accountable Care Organizations (ACOs)

Some 10-15 years ago HIPAA came into play creating a scramble to meet the privacy constraints. Later EMR regulation via CCHIT and other “certification authorities” were born to authorize Electronic Medical Record systems. Compounding this, all medical providers must incorporate Electronic Medical Records into their practice by 2014 or be fined. Over the past year there has been a new mandate for all medical providers and or groups to become Accountable Care Organizations (ACOs). This includes single providers, small practices all the way up through medical centers. This will supposedly allow someone in or outside the org or practice to determine how well the patient population is doing.

One of the interesting spots of concern is that there are currently no interfaces for this “person” to see how well, rate, grade or even view the providers patient population yet alone the patients wellness. I’m also unclear on who should have access to this information. Those are a lot of unknowns that need to be surfaced asap in the form of Standards and Guidelines.

Here are a few of my questions to create an effective UI for ACO users:

1. What information needs to be surfaced? Patient Names, Provider Names, Address, Phone, Age, SSN, Sensor Data, Number of Monitors (fitbit, scales, etc), Wellness Programs they subscribe to, Overall population and individual wellness levels, amounts spent by patients, total amounts spent by ACOs to cover the care, cost of the visit or procedure?

2. Who should be able to see this info, and do we need to set permissions? Providers, Patients, Admins, Insurance agents?

3. How much transparency should Patients have? Should there be a usage log the patient can look at? See who and exactly what was viewed?

4. How much of the record and social networking within the ACO takes place here?

5. What really needs to be in the interface?

6. What APIs need to be in place?

7. Is this the new patient / provider portal? How opaque are the view points? Do we all finally see the same thing so both the provider and patient become accountable?

Who really should be accountable? The ACO is more than just the provider network; its a collective partnership between the patient and the care coordinator / providers office. The ownness of wellness for the past several years has been shifting to the patient, and although its not there yet, this move to ACO management could be the ultimate opportunity to place the responsibility of care on both patient and provider.