Author Archives: Psyline

About Psyline

I'm an User Experience Architect living and working in downtown San Francisco.

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.


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 ( 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:

X31 Final:



Why Most People’s Charts & Graphs Look Like Crap

Data visualization is a powerful tool to communicate complex information in an engaging way. By visualizing information, our brains can synthesize and retain content more effectively, increasing its impact. But if data isn’t properly visualized, it can do more damage than good. The wrong presentation can diminish the data’s message or, worse, misrepresent it entirely. That’s why good data visualization relies on good design. And it’s about more than just choosing the right chart type. It’s about presenting information in a way that is easy to understand and intuitive to navigate, making the viewer do as little legwork as possible. Of course, not all designers are data visualization experts, which is why much of the visual content we see is, well, less than stellar. Here are 10 data visualization mistakes you’re probably making and the quick fixes to remedy them.

1) Misordering Pie Segments

Pie charts are some of the most simple visualizations, but they are often over-complicated. Segments should be ordered intuitively (and they shouldn’t include more than five segments). Here are two ways to order your pie charts, both of which will draw the reader’s attention to the most important information. Option 1: Place the largest section at 12 o’clock, going clockwise. Place the second largest section at 12 o’clock, going counterclockwise. The remaining sections can be placed below, continuing counterclockwise. charts-tip1_1 Option 2: Start the largest section at 12 o’clock, going clockwise. Place remaining sections in descending order, going clockwise. charts-tip1_2

2) Using Non-Solid Lines in a Line Chart

Dashed and dotted lines can be distracting. Instead, use a solid line and colors that are easy to distinguish from each other. chart-tip2

3) Arranging Data Non-Intuitively

Your content should be presented in a logical and intuitive way to guide readers through the data. Order categories alphabetically, sequentially, or by value. chart_tip3

4) Obscuring Your Data

Make sure no data is lost or obstructed by design. For example, use transparency in a standard area chart to make sure the viewer can see all data. chart_tip4

5) Making the Reader Do More Work

Make it as easy as possible to understand data by aiding the reader with graphic elements. For example, add a trendline to a scatterplot to highlight trends. chart_tip5

6) Misrepresenting Data

Makes sure all representations are accurate. For example, bubbles should be scaled according to area, not diameter. chart-tip6

7) Using Different Colors on a Heat Map

Some colors stand out more than others, giving unnecessary weight to that data. Instead, use a single color with varying shades or a spectrum between two analogous colors to show intensity. chart-tip7

8) Making Bars Too Wide or Too Thin

It’s tempting to get creative with your presentation, but keeping things consistent helps your viewer. The space between bars in a bar chart should be ½ bar width. chart_tip8

9) Making it Hard to Compare Data

Comparison is a valuable way to showcase differences, but it’s useless if your viewer can’teasily compare. Make sure all data is presented in a way that allows the reader to compare data side-by-side. chart_tip9

10) Using 3D Charts

Though they may look exciting, 3D shapes can distort perception and therefore skew data. Stick with 2D shapes to ensure data is presented accurately. chart_tip10