How learning to code made me a better Product Designer

Last fall, I took a part-time course in Front-End Web Development with General Assembly in New York. It was my first time going back to school since college — a sensation first exciting…

feeling-accomplished-yay-412b8

…then a little frustrating…

…and finally triumphant with the completion of my website project (which, btw, I admittedly have not worked on since :\ ).

SwingQuote

Ultimately, my experience was well worth the investment of time and money. I didn’t become a front-end developer, and I didn’t expect to do so. I also didn’t quite level up to the next level of UX Unicorn: I would not trust myself with production code for serious projects right now! And contrary to what I thought I’d start doing after this course, I don’t typically prototype in code either.

From a Product Designer perspective, though, I’ve now had several months of applying this new knowledge set in a design role, and here’s what I’ve experienced as major benefits from learning to code:

  1. My visual specs and styling instructions are more realistic. With a better understanding of CSS, my visual guidelines for developers can be produced more systematically. I now know how to translate mockups in ways more compatible for actually implementing the code.
  2. My designs are more consistent. Along the theme of the previous point, the conceptual foundation of HTML templates and CSS have shaped my visual design approach to be more consistent and reusable.
  3. UX-dev collaboration is stronger. We can (more-or-less) speak the same language now. My eyeballs no longer glaze over as soon as the techy-talk busts out in a meeting.
  4. I can take advantage of new design software features. Adobe Suite, Sketch, and all the other top tools are loading in new features that help seamlessly marry visual designs with code. So now I can actually use them!
  5. I’m more considerate of technical constraints. Learning JavaScript and other technologies have really opened my eyes to developers’ perspectives. I have a better understanding of technical limitations, and why asking for things like form customization is such a bitch to deal with.
  6. I ask better questions. Along with the previous point, I know to ensure that the developers on our team are brought into conversations and involved in the decisions about our technology early enough. I find myself more capable of researching frameworks, libraries and support matrices (caniuse.com is my best friend), and with that I’m more prepared to ask the right questions.
  7. My QA testing is more useful. Instead of just reporting issues, now I can easily go into the DOM and inspect bugs for myself. I can provide better information, figure out which issues probably relate to one another, and even specify exact styling changes right there in the browser.
  8. Responsive design finally makes sense. There’s so much more to designing responsively than simply working with a grid. It’s been so helpful to really understand how breakpoints and media queries work.
  9. I appreciate engineers even more! …which basically puts them at the top of the castle.

hyjqy

Shout-out to our awesome instructor, Hart, for making the class such a productive experience and making those 3-hour night classes something to look forward to even after a full day of work!

So, for any other UX/UI Designers, Product Designers or Creative Directors out there who are on the fence about learning code — it’s not just another unicorn skill where you’d need to take on the developer role as well! Taking the time to really learn HTML, CSS, JS and their surrounding technologies will help any product/design role for web experiences. Your products and your teams will benefit!

giphy

The “Concert Matchmaker” Mobile Design Concept

Consider this a little UX Design Jam to switch things up… I took just a few hours to do a rapid design concepting project — in this case, the redesign of a concert-searching feature of an app that I love to use. Not sure if this idea will be continued! Sharing anyway 🙂

Problem Overview

As a concert-goer who’s always looking forward to seeing live music, I find the Bandsintown mobile app to be SO helpful because it suggests concerts in my area based in a direct integration with the music I listen to. However, I find the actual concert-searching feature of the app to be a bit lacking and cumbersome. So, I wanted to reimagine the “Tonight” feature with a new and improved show-seeking experience.

Solution Overview

FEATURE “Concert Matchmaker”
VISION Help show-goers discover and track shows to go to through a personalized, useful experience.

Requirements

  1. Ability to browse concerts/shows
  2. Ability to specify criteria
  3. Ability to take action on results

Assumptions

  • Extension of existing Bandsintown mobile app
    • Inherits base visual & UI style
    • Maintains integration with Facebook, Spotify, Calendar, etc.
    • Uses configured data in Settings section of app
  • Maintain existing desktop experience (separate, within Facebook)

Research

Heuristic Evaluation

I started by examining the usability of the “Tonight” feature to start identifying what’s working & what’s making this experience feel so lacking and cumbersome.

bandsintown_tonight

screenshots of the “Tonight” feature of the Bandsintown app

STRENGTHS

WEAKNESSES

  • Integration with “Concert Cloud” to control selected vs. recommended artists
  • Ability to filter by distance from specified location
  • Thumbnails of artists in list results
  • Venue & Town in list results
  • Level 2 detail view contains helpful information: Date, venue, map, RSVPs, Lineup, etc.
  • Level 2 detail view contains useful actions: RSVP (“I’m attending” or “Maybe”), Share on social media, Get tickets
  • Results only displayed in list; long-scrolling
  • Results only ordered by time; assumption that users are searching day-of or soon
  • Duplicative show results due to artist itemization
  • All results presented equally
  • No additional filters
  • Level 2 detail view could contain more useful information: Friends’ RSVPs, Distance from home, etc.

User Reviews

I looked into what existing users are saying about the app by skimming the iTunes App Store and Google Play Store reviews. I did this in lieu of having the ability to conduct interviews with, distribute surveys to, or study analytics of current users’ app usage behaviors & sentiments. Below, I noted anecdotal patterns in feedback that are relevant to this feature.

POSITIVE

NEGATIVE

  • Keeping track of RSVPs
  • When searching by artist, can directly see shows instead of sifting through many
  • Integration with music library; automatic artist tracking
  • Search by location & distance
  • Choice to either seek specific artists’ shows, or discover recommendations
  • Less helpful for lesser-known artists
  • Delayed postings of shows
  • All list views with immense scrolling and default ordering; no calendar-like view
  • Itemization of separate artist listings for the same single show

Competitive Landscape

I examined similar features of competitive products to conjure best practices and inspiring ideas that could be applied to this redesign.

competitors

screenshots of similar features of comparable apps

Best Practices & Inspiration
  • Tiles / Cards
  • Sense of timeline
  • Large visual imagery & Typography
  • Personalized recommendations
  • Limited color palette, hierarchy and template views
  • Sticky CTA / action buttons

Audience Survey

Based on ideas gathered from my heuristic evaluation, competitive analysis, and investigation of user reviews, I distributed a quick survey to validate some initial ideas and help guide the design direction.

Survey Contents & Distribution

I used Google Forms to quickly create, distribute and collect results of the short survey. The questions were designed to focus on how this audience discovers and decides which shows to go to. In hindsight, I would’ve also asked about how far out people look for shows to go to.

survey

Recruitment

Given that I needed to resort to guerilla recruitment methods for this exercise, I reached out to show-goer friends on Facebook and Reddit users in a music channel.

recruitment

Thank you, awesome comrades who participated!

Key Findings

These are the three most relevant, insightful findings that resulted from the 18 participants. This data would help shape the design focus of this feature, along with specific design decisions of functional components, like the kind of options to involve in filters.

Insight #1  /  Unalignment of important show-finding criteria between “Tonight” feature & user expectations

While the “Tonight” feature of the app focuses on tracked artists and events that are approaching soon, the audience finds the following seven factors to be most important when searching for shows to go to:

  1. Day of the week (77.8%)
  2. Distance away from home (72.2%)
  3. Ticket price (61.1%)  /  Whether favorite artist is headlining (61.1%)
  4. Other plans in the mix (55.6%)  /  Whether friends are going (55.6%)
  5. Number of artists in lineup interested in seeing (50%)

results_factors

Meanwhile, the factor of “How soon it is,” which the “Tonight” feature’s UI tailors towards, was the least important factor (0%).

Insight #2  /  A common theme of “worth” in decision-making

The open-ended response revealed that users very consciously weigh several factors in deciding whether or not they will plan to attend a show, with the following criteria noted as the most critical to weigh:

  1. Availability / Day of the week
  2. Distance
  3. Ticket price
  4. Artist interest / Lineup

Insight #3  /  Validation of app/website browsing as a primary show-finding method, with Facebook feeds and Facebook event invitations as the next most-used show discovery methods, respectively.

results_discover

Design Principles

Establishing a set of overarching design principles based on all the exploration thus far helps direct, strengthen and control the design decisions going forward.

  • Customized: Flexibility to personalize criteria
  • Algorithmic: Smart automation to present relevant results that aid decision-making through weighing multiple factors
  • Efficient: Eliminate extra steps or burdens, utilize automated processes and data integration, limit number of choices to choose from, and maintain consistent formats
  • Simple: Light-­touch aesthetics; straight­forward actions
  • Current: Up-to-date, real-time information
  • Actionable: Meaningful ways to engage with the content

Style Guide

Color Palette

colorpalette

Typography

  • font-family: ‘Fira Sans’, ‘sans-serif’;
  • font-family: Open Sans;
  • font-family: “Georgia”, “sans-serif”;

User Interface Design

Wireframe Concepts


First, I captured the existing “Tonight” feature list view (default). Drawing from my research, I made some changes that addressed the major priorities:

  1. I clearly titled the page “Concerts” so that it revolved around the idea of a concert list first and foremost, as opposed to using a single data variable (i.e. location) to drive the focus of the page.
  2. I swapped the distance icon in the top right with a more generic filters icon, expanding the functionality to control the list results with more data variables than distance alone.
  3. I reimagined the list to visually convey more personalized information, without completely abandoning the sense of timeline. Bandsintown’s Concert Cloud algorithm is incredibly powerful for matching up how strongly an artist or concert would be recommended to a user, based on their music listening data that’s automatically integrated into this app. So, instead of using two general buckets of “Recommended” vs “All” with all items listed in an equal way, I visually emphasized the best-matched shows with the size of the image. However, this first concept iteration brought up too many visual problems of clutter and spatial content dependencies.

conceptsketch01

Along with these timeline list sketches, I made sure to examine what kind of data could be controlled once the filters button is activated. I based these decisions off of the existing settings, the research findings, and the general design principles of keeping things simple and efficient. So, I landed on only four inputs within the three categories of location, tickets and weekdays. I used sliders and toggle buttons appropriately for a clean, efficient UI.

conceptsketch02

Going back to the list view problems about visual clutter, I did some quick UI research and revisited the competitor analysis findings for inspiration. I started gearing towards a card-based view driven by large images. Additionally, I pushed the interaction design by using the modern trend of swipe gestures to reveal more information. This helps reduce the cognitive load, focusing the user on the right information in the right order, based on user initiation to voluntarily see more details.

conceptsketch03

Building off this core list view, I extended the experience to the full details view. Again, I reworked the existing view of this page to be more image-driven and to include more important information. Going forward, I would reorder this information based on importance and logical flows to comprehend it.

conceptsketch04

sketches compared against screenshots of existing pages

Finally, I took some time quickly iterating on specific UI components within this user experience. For example, based on findings from the competitor analysis and heuristic analysis, I reimagined the RSVP buttons as options that spring out from a sticky button always present on the detail screen. This draws attention to it as a CTA, reduces clutter, and encourages users to act on this at whatever point in the details page they feel ready to make their decision.

conceptsketch05

sketch compared against screenshot of existing UI element

Mockups

Normally I’d take more time sketching variations of the design approach and creating sets of wireframes digitally before jumping into higher-fidelity mockups. But for the purpose of this exercise, I sped ahead to design. You’ll see that I incorporated the idea of using size visualization to emphasize better matches in the concert list, but combined with the visual style of the second sketch iteration. A few other details for content, iconography, hierarchy, and small features were iterated as well. I used the limited amount of time to focus on the core, primary mobile screens for this feature.

Mockups

Next Steps

This was fun! But it was a quick rapid concepting exercise done in a few hours. If I were to seriously keep spending some time on this, here’s what I’d do:

Mockups of Additional Screens

Completing the flow of secondary screens from sketches and beyond, such as the filters screen to adjust settings and the activated sticky button to take action.

Additional Wireframe/Mockup Sets

I’d go through the rapid concepting exercise a couple more times to ultimately have 2-5 sets of mockups that all represent a substantially different UI. For example, some of my initial sketching involved a more calendar-oriented approach that visually indicated the dates with best potential. Another idea revolved around a few stacked sets of ways to approach the results, using horizontal scrolling to skim through them. Another idea took a Tinder-esque approach, really focusing in on the “matchmaker” concept.

Usability Testing

  • A/B Tests of different layout & UI treatments to evaluate efficiency and effectiveness in carrying out specific tasks by testing first-click impressions and path analyses
  • Cognitive Walkthroughs of the experiences to see how users are reacting to the various approaches, and what’s most helpful in directing users towards a successful experience
  • Interviews with wider representation of audience to discover needs of unaccommodated segments

The Method to Our Madness

One of the things other product / user experience designers and myself try to push for is sharing progress more early, more frequently, more collaboratively, and more iteratively. (I’ve blogged about The Lean Product Playbook before, which dives deep into this approach to product management). Last week I participated in a Design Thinking Crash Course hosted by The Design Gym, and it really helped summarize some of these core philosophies from a product design perspective. So, I want to share some of the central ideas that may shed some light into why it is that Product/UX Designers might seem OBSESSED with post-it notes and strategy decks and whirling in messes of research…

Before we jump into it, here’s my teaser for you: This Semisonic song is going to become completely relevant by the end of this post:

PhasesAs you could see in this illustration, every phase of product design opens with a starting point – usually a hypothesis that needs validation or an idea/direction that needs feedback. At that starting point, the possibilities are wide open. We use whatever methods and activities are most appropriate and feasible to explore different avenues. We draw patterns and discoveries from that exploration to arrive at some better understandings, narrowing down to an at least semi-conclusive end point of that phase. That end point should evolve from the start point from which it originated, and essentially becomes the start point for the next phase.

PhasesFlow

This is where our checkpoints and design artifacts play their essential role, though. The quality of the close of each phase dictates the success of the next phase. If we don’t take the time and serious thought to formulate our findings in some tangible way – whether it’s a series of personas, a strategy deck, a rough sketch, list of features, user journey map, wireframe, etc. – then we’re not concluding all the effort of that phase in a collaboratively useful way. Just as important, if we don’t take the time and serious thought to regroup on those end points before starting the next phase, then we risk moving forward without alignment. Clear end points help establish a unified vision going forward.

 The quality of the close of each phase dictates the success of the next phase. – Jason Wisdom, Co-Founder of The Design Gym

Now, just because we need tangible artifacts at the end points of each phase does not mean that we need to wait until we have a massive, polished presentation assembled. (And yes, I admit this despite a history of 80-page UX documents…but the era of lean is now here). Sometimes a sloppy sketch might do. We want to receive buy-in and feedback before investing a large effort into a single idea, which is why we’re often hesitant about mocking up early-phase design concepts. What if we spend weeks perfecting the UI of an idea thats premise doesn’t work for the client? While it may feel too abstract to seem productive, strategically aligning early on will save time in the long-run.

Design Thinking Crash Course worksheets

Likewise, just because we’ve reached a new hypothesis or idea to validate and explore does not mean that we need to invest massive amounts of time and money into elaborate design research exercises. In The Design Gym‘s Design Thinking Crash Course, we conducted these little activities within two hours and it still helped provide more clarity, direction and ideas to help move forward less obliviously. Of course, if the time allotted for these is extremely limited, we move forward with much less confidence and security (and sanity) than what feels adequate, but nonetheless there is merit to any effort that involves real research and real feedback.

Again, all these efforts come down to the principle of closing those loops strongly. Just listen to Semisonic…

EVERY NEW BEGINNING COMES FROM SOME OTHER BEGINNING’S END – Semisonic

Swing Quote v.0 – Beta tester enrollment (plus content updates)!

A couple weeks ago I posted about Swing Quote — a side project I’m designing and developing.

swingquote-update-summary

Swing quote is a website designed to help young Americans use self-discovery to explore 2016 presidential candidates and better identify which views resonate with their own stances on various political issues, without the presence of names or party tags influencing that decision.

In that post, I shared some of my process and acknowledged eight of the many problems that need to be addressed. Most of those issues still need to be addressed — especially the critical mobile bugs. But here are three new updates:

Update 1: Analytics & Beta Tester Enrollment

I’m very thankful for all the great feedback and support I’ve received from friends, family, peers and talented people in my network over the past couple weeks. It’s helped inspired me to keep going with this project…which means I’m going to need to resolve some of the user experience questions I brought up in the last post.

Luckily, I have this functioning (more or less) v.0 build temporarily hosted on my github to start gathering some real feedback from. That’s why I’ve integrated Hotjar — one of my favorite UX/analytics tools — to start observing the natural usage behavior on the website.

In addition to that, I intend to conduct some more structured user tests (after the major bugs are fixed) to both test out some feature development ideas and maybe gather some other problems and ideas that I haven’t discovered. That being said, would you like to be a beta tester?! (Basically, would you like to receive invitations to periodically do less-than-10-minute usability tests or surveys, online, at your convenience). If so, please simply visit the Swing Quote website to enroll. You’ll see this pop-up at the bottom of your screen, where you can choose “Yes” and enter your email address.

swingquote-updates-poll

Even if you’d rather not enlist as a beta tester, but have some initial feedback to offer, please use this prompt at the bottom of the screen to choose “No thanks,” and you’ll then be presented with an easy option to enter some feedback!

MAJOR thank you to anyone who enlists as a beta tester and/or takes some time to provide feedback. It’s immensely helpful to hear what you like and don’t like, what you find easy and difficult, and what you’d like to see different or added. I’m very aware of many current problems and incompleteness, so your honest feedback is very welcome!

Update 2: Improved “Candidates” Page

One of the to-dos listed in the last post was to create dedicated image assets for the Candidates page (as opposed to recycling unsuitable images). This page should look much more presentable now, and be much more usable thanks to some other interaction tweaks (although, something is still a bit off with the hover interaction). Check it out!

swingquote-update-candidates

Update 3: More Content!

Candidates who have dropped from the race like Jim Webb and Bobby Jindal (finally, gosh) have been dropped from the site. Similarly, more candidates are now represented in the quotes exploration. With both GOP and Democratic debates in the past few weeks, some very recent quotes have been added up-front in the quotes experience. Many more need to be added, but check out what’s new! (Note: This is still broken in mobile. Next item on the to-do list!)

swingquote-update-content

Do you agree or disagree with this quote, recently spoken by a presidential candidate? Curious who said it? Go explore! (Unless you’re reading this from a phone :\ …Man, I really need to go fix that).

 

A personal project on politics: Swing Quote v.0

Last Monday I presented my final project for a 10-week part-time Front-End Web Development (FEWD) course I just completed through General Assembly in NYC. (Whoohoo!) Along with picking up a much stronger, practiced understanding of HTML, CSS, JavaScript and responsive web development, I wanted to dedicate this time towards creating something personally meaningful and different from the kind of web work I do professionally.

Fueled up by the current presidential election campaigning, I felt inspired to create something educational that challenges this space based on a problem consistently experienced during political conversations: automatically closing our minds to certain candidates or policies due to preconceived perceptions of that candidate or their party. From this problem, I’ve designed and developed a preliminary version of what I am calling Swing Quote.

Product Summary

  • PRODUCT: Political website titled “Swing Quote”
  • VISION: Help young Americans use self-discovery to better identify which 2016 presidential candidates’ views resonate with their own stances on various political issues, even if previously unimagined.
  • USER OUTCOMES: Desire to become more aware, informed, decisive and confident about who they should consider being open to voting for in the 2016 presidential election.
  • ACTION: Users should engage with candidates’ true stances on issues without the misguidance of political jargon or party-based preconceptions in order to help form their own realizations.

Design Principles

  • SIMPLICITY: Light-­touch, minimalist aesthetic; Straight-­forward actions
  • CHOICE: User-driven discovery
  • SHOCK: Immediate feedback exposing the unknown; Meaningful content planning focused on common misconceptions
  • EDUCATION: Inclusiveness of diverse views and issues; Provide access to additional information and context
  • CURRENCY: Include up-to-date information; Content planning primarily focused on current campaigns
  • EFFICIENCY: Eliminate extra steps or burdens; Utilize automated processes and data integration; Limit number of choices to choose from, and maintain consistent formats
  • FRIENDLINESS: Warm, welcoming language and tone; Communicate with colloquial language; Creative use of visuals

Inspiration & Competitive Landscape

I spent a little time checking out sites about presidential candidates, existing political quiz websites and apps, along with other interactive learning experiences outside of politics. I drew from strengths and weaknesses for features, visual style, content strategy, and interaction design that could set this experience apart in an advantageous way.

inspiration

(Oh, please don’t snoop around my other Pinterest boards…that’s embarrassing).

Let’s not talk about how awesome Presinder is for essentially already doing this idea but in a way smarter way by pulling their content from candidates’ Twitter accounts -_- (…This competitor was SO upsetting to come across since it was so close to my idea. However, it helped me focus my concept more on the deliberate use of content planning, added value of comparing results, emphasis of web exploration, and ability for users to contribute quotes they’d like to see included).

Feature Set

The initial feature set captured the core functionality I envisioned, noting usability needs that I felt were requirements along with additional enhancements that I was hoping to reach. Overall, given the timeframe and learning curve, I ended up skipping two features that were not essential to the core user experience, but integrating a fair amount of the reach enhancements to add a little delight to the primary features.

features

Wireframes

These are the initial wireframe designs that capture the page template layouts, content types, functionality, states, and UI components. These evolved during development…

wireframe-intro

INTRO: I ended up adding a global footer to help frame the page and serve as navigation to additional features that were added later. Also added two buttons to those features, but kept the quotes exploration as the primary CTA.

wireframe-prompt

PROMPT: A quote presented to the user prior to exposing the affiliated party/candidate. Users are prompted to agree or disagree.

wireframe-feedback

FEEDBACK: The second state of a quote is revealed after the user agrees or disagrees, exposing who said it, what party they’re from, access to the citation, ability to share, results of all respondents, and a button to continue to the next quote.

Content Planning

Here’s an excerpt of what the content planning looked like. Since I had this idea early on, I was able to spend a few months gathering quotes from different candidates. (It actually was a great way to force myself to stay informed of all candidates). The biggest challenge was finding short-but-substantial quotes. Most of the short soundbytes are not very unique to one candidate’s particular point-of-view or policies, and those are exactly the kinds of quotes that I believe mislead Americans; this site is about focusing on more substantial, informative quotes, which is why this tedious content planning exercise plays such a critical role.

contentplanning
Swing Quote v.0

Not only did I learn tons of coding and mobile-first responsive design approaches in this process, but I also learned how much time and delicacy good development takes. I will admit, this project was re-coded from scratch one week before the deadline, mainly thanks to figuring out smarter ways to control my layout with FlexBox and manage my data with objects and arrays.

SO, with the time I had, I can present the incomplete and buggy alpha of Swing Quote!

swingquote-home

Swing Quote v.0: Evaluation

While I did not accomplish nearly what I set out to design and development for this project, I am very happy to report that the concept has been validated thus far! Walking through the quiz demo with my classmates, the final presentation was full of shocking “gotchya!” moments that left my classmates stunned by the candidate reveals and following up with lots of the hypothesized behavior, like wanting to see the source of information (which can be toggled with the info icon button).

Similarly, I’ve had friends and co-workers use the site then say things like, “You know, I think I might be a Republican and didn’t know it,” or, “I don’t know if I want to vote for Ben Carson anymore,” etc. This is exactly the kind of impact I was hoping to accomplish: making a self-determined, surprising discovery strong enough to consider reexamining and further researching one’s choice of presidential candidates — and hopefully in a more open way. Perhaps it can also expose us to more common ground than we realize we have with one another, regardless of the party tag.

Swing Quote v.0: Next Steps & Priority Fixes

Receiving this kind of feedback and witnessing its impact is really psyching me up! I was starting to give up on this effort before, but now I think it might be worth taking it more seriously. I’ll just need to fix the bugs, finish out the experience design, implement more content, build the features that didn’t make this version, improve the visual design, and actually host this with a domain instead of from my github.

bug-mobile

YIKES.

There is SO much work that would need to be done. Here are the starters…

1) I’ve got to fix whatever the heck I broke that makes mobile load like this. Literally unusable. Thank goodness this was not a real project!

2) I also need an end to the experience. Once the array runs out of content to inject into the template, you just cycle through semi-populated templates. It probably should direct users to the submission form so that they feel invited to become part of growing this experience by being presented with the option to submit more quotes. This is something I’ll have to feel out more from people who test out this site, though. One person mentioned wanting a results algorithm that tells them who to vote for based on all their responses, but I’d be worried about accuracy and fairness, and concerned about violating the core design principles and self-exploratory purpose of this site :\

3) In the feedback state, there needs to be emphasis on whether the user agreed or disagreed with the quote. The shock of this reveal truly is the most impactful aspect of this experience, so this is where much more attention and play into emotions is needed. Hoping to do a little A/B testing on some ideas to see what makes the most impact without crossing the line of being too in-your-face…

swingquote-reveal

4) I need to build the Compare Results feature, probably using HighCharts, which I’ve been exposed to and researched before when working with developers in past work projects.

5) Prooooobably related to #2, but gotta fix this bug that makes long text overlap with other elements and overflow out of the container. I’ve diagnosed that it’s related to some FlexBox and vertically-centered-text changes I made way too last-minute, but I have not yet been able to debug it without changing the design. Box, I will make you fit the text.

bug-desktop

OOPS.

6) I need to get the share button working! I’ve tried two jQuery plugins so far — sharrre and share (very creative names here) — but didn’t have the time to customize either of them to my needs within the course span. Circulating this site and its content via social media is going to be imperative.

7) Must create real image assets and improve the visual design. This was fine for a prototype, but as you see, it needs more time dedicated to styling the site and creating proper, optimized images.

swingquote-candidates

This Candidates page was a late-added feature, so it just reuses the existing background images meant to be utilized for the quiz series :\

 

8) While the form has validation, it needs a) success feedback, b) visual bug fix to the dropdown menu, and c) somewhere that the data hooks up to!

swingquote-submit

I’d need help on all fronts if I’m really going to make this happen. Visual designers, developers, and political junkies: let me know if you’d be interested in collaborating!

#LeanProduct Webinar w/ @DanOlsen: 4 Guiding Principles for Great Product Experiences

Is it just me, or have certain terms in the UX/product world sadly morphed into constantly-abused, empty buzz words? It seems that, somehow, words like “lean” or “user-centered” or “iterative design” too often are likened to nearly any exercises involving colorful post-it notes and whiteboards, without even considering what methods and meaning they’re representing. It’s like pre-conceptualized ideas of what smart product experience methodologies should look like are blurring whether or not certain techniques actually are valuable.

The Lean Product PlaybookThis summer, UserTesting.com hosted an excellent webinar with author of The Lean Product Playbook, Dan Olsen. In this webinar, Olsen does not just advocate for strong product experience leadership, but breaks down specific components of lean product management in substantial ways that can help us differentiate those who truly carry out valuable UX/product methodologies versus those who just carry empty jargon.

Here are four guiding principles I’d like to share his deep dive into:

  1. Explore real problems to generate better solutions.
  2. Address real needs to produce better products.
  3. Pursue real differentiators to create better value.
  4. Prioritize real details to craft better experiences.

1. Explore real problems to generate better solutions.

Dan Olsen talks about the importance of differentiating problem space vs. solution space from the very start of a project. Kick-offs, executive summaries and initial business requirements are so important for communicating the core purpose of the project, identifying important requirements, sharing background information, and aligning strategy and expectations of all the stakeholders involved. But great potential can be lost in these first steps if a solution is already specified.

“By articulating the requirement [with execution specifics], you’ve already dictated and limited the solution space…By not jumping into solution space and by just being really clear in problem space, you can identify better, higher ROI solutions.” -Dan Olsen

Personally, I love having a multidisciplinary team together shortly after a project-kick-off to brainstorm all sorts of solutions. More minds means more ways of thinking, more possible paths, more chance for uncovering a common thread that could lead to a gem.

However, that gem won’t shine unless the problem space is sufficiently examined first. If we first identify all the problems that could be addressed, then we can figure out which ones we should address.

“As you get more detailed in the problem space, they’ll organize into related themes.” -Dan Olsen

From there, possible solutions can strategically be explored and better evaluated based on the user-centric thinking that is grounding the process.

2. Address real needs to produce better products.

“If you’re gonna spend a lot of time and resources and money on going after a new product opportunity, there’s no reason to focus on a low-importance user need.” -Dan Olsen

Olsen discusses the concept of customer value on a scale of importance vs. satisfaction. Where there is a high importance of user need and high satisfaction with a product, then there is an area of opportunity to create customer value.

03 - CreatingCustomerValue

However, this area of opportunity should also be checked across the competitive landscape to determine whether or not it is worth pursuing.

03 - PrioritizingCustomerNeeds

Intercom wrote a post called “Product Strategy Means Saying No,” which delves into a myriad of situations when you need to say “no” to certain features. One of them calls out the common mistake of including features simply because competitors have them. In reality, many of those features may not actually be needed, so you’re just complicated the design and wasting development costs by including them.

3. Pursue real differentiators to create better value.

It’s not only about which features to include, but how to include them. Olsen refers to the Kano Model of User Needs & Satisfaction, claiming:

“Yesterday’s ‘delighters’ become today’s performance feature and become tomorrow’s must-haves.” -Dan Olsen

04 - UserNeedsAndSatisfaction
So, when deciding on feature sets, we need to examine which user benefits we are providing and how we’ll do it better than competitors.

05 - ValueProposition

From here, this is when we start imagining what the minimum viable product (MVP) might look like. Here’s where things tend to go wrong, though. Drawing back to Olsen’s previous point about yesterday’s ‘”delighters” becoming tomorrow’s must-haves, concluding that “it works” no longer makes the cut. Making something simply functional cannot be an excuse for ignoring the other pillars.

06 - MVP

“Yes, you do want to take a limited set of functionality. But you need to make whatever MVP you’re building reliable enough, and usable enough, and delightful enough that there’s gonna be something there that people will react to and like.” -Dan Olsen

Here is a great medium article that talks about shifting the idea of a “minimum viable product” to a “minimum lovable product” instead…

View story at Medium.com

4. Prioritize real details to craft better experiences.

“It’s rarely the case that you need to deliver 100% of the feature to deliver most of its value.” -Dan Olsen

So how can the minimum lovable product actually succeed and grow? Olsen nicely demonstrates breaking features down into chunks to help limit scope without killing delight, and to translate into product roadmap placement.

07 - FeatureChunks

08 - ProductRoadmap

This is the kind of planning needed to accomplish a MVP with a well-rounded approach. This approach is illustrated in what Olsen pulled out as the “UX design iceberg”

09 - UXDesignIceberg

“It all starts at the base with conceptual design — this is basically what’s the fundamental concept for how we’re gonna design this product to deliver these benefits…When you use a product that you really enjoy using — it’s easy to use, it’s delightful — it’s because the team has really put in a lot of thought and made a lot of good decisions at these lower levels…Good product teams need to be making good decisions across that whole iceberg to create a good user experience. -Dan Olsen

The webinar continues into the important next steps of testing and iterating based on user feedback. But those steps won’t mean much without grounding the product experience design with these four guiding principles.

Health 2.0 Keynote Recap: 7 Patient Insights for Connecting with Patients

Health20NYCA couple weeks ago, Health 2.0 NYC hosted a “Patient Empowerment & Connectivity” Meetup event at Epion Health. Part of the evening included a keynote delivered by Daniella Koren, founder & CEO of ARCHES Technology, “Bridging the gaps between providers and patients.” Koren has over 15 years of experience in the field of patient relationship marketing, including immense hands-on patient research within healthcare and pharmaceuticals. In her keynote, she divulged compelling anecdotes and stunning statistical findings uncovered from hundreds of patient interviews and studies. In healthcare technology, many of us don’t have many opportunities to personally conduct such research, given the private nature of patient care. So, I thought I’d share what Koren identified as the seven patient insights that the healthcare technology industry needs to follow (but isn’t).

1) Show the real pictures.

Diseases are not glamorous, and the patients know that best. Koren’s research has solidified the kind of criticism some colleagues and I often make when it comes to cheesy, posed stock photography images so commonly used for pharma sites. The lack of realism makes patients feel isolated from the brand, or even belittled by hiding the true nature of the condition. Resounding patient feedback called for not only focusing on patient imagery, but exposing real symptoms, conditions and environments…even the ugly stuff. Patients are just as sick of seeing the classic smiling-patient-with-nurse’s-hand-on-shoulder-and-forced-multiethnic-representation photos as designers are sick of having to use them.

PharmaPhotos

…the classic smiling-patient-with-nurse’s-hand-on-shoulder-and-forced-multiethnic-representation photos are abundant on any stock photo site.

2) Don’t generalize.

Generalizations about our audiences can easily creep up and affect our product decisions. Especially in an agency role where we’re further isolated from the patients, assumptions and broad statements can hastily guide a product’s pathway or a content piece’s message in the wrong direction. Patients of a common condition may have very diverse problems, needs, personalities, capabilities and tastes. This is where user personas – based on the synthesis of real research – can help us zone in on specific audience types. It’s of course not practical to create a custom feature set and content strategy for multitudes of different users, but it’s wise to determine the most prominent few segments that can be tailored to.

3) “White coat syndrome” is real.

whitecoatsyndromeAs you’ve likely experienced yourself, the sterile environment of hospitals and clinics does not produce the warm and fuzzy comfort to make patients feel relaxed. In the healthcare world, “white coat syndrome” is a legitimate problem – when a patient’s anxiety induced by the situational environment causes increased blood pressure, preventing the HCP from attainting an accurate measurement. But there is another aspect of white coat syndrome that opens a huge opportunity in healthcare technology. According to Koren, the white coat syndrome also prevents patients from accurately explaining their health problems to the HCP. Patients who know exactly what’s wrong and how severely it affects them will suddenly forget or downplay the conditions when reporting it in the doctor’s office. We should innovate tools that empower patients by equipping them with conversation facilitators and helping them articulate their problems, improvements, concerns and needs.

4) Don’t talk down to patients.

It might seem like the “user friendly” approach to dumb down medical language in content. However, Koren emphasizes how the target audience for a medical condition are the ones with an above-average health literacy level, since they are the ones seriously dealing with it and therefore consuming more information of that nature. This is especially true with chronic or terminal illnesses. By dumbing-down the language, a brand patronizes their audience instead of connecting with them. Patients are turned off by the softening, the fluff, and the exclusion of educational information. At the same time, too much advanced medical jargon is not helpful either. Koren recommends an absolute minimal 12th-grade reading level for such language, and encourages market testing to help find the right balance.

5) Reconsider the “community support” push.

In competitor analyses of different pharmaceutical brands and disease management groups, we’ve been seeing a growing trend of community support groups to connect patients with other patients. However, this strategy does not always resonate with the audience: when offered this kind of opportunity from pharmaceutical brands in large-scale patient studies, interest was extremely underwhelming. It’s just not necessarily what patients are looking for from their treatment providers. Instead, Koren cites that patients are seeking educational materials, financial assistance, and management tools.

6) Careful about interpretations of blame.

People are sensitive about health and adherence. It’s personal, and it can be scary. Content design can mistakenly make patients feel blamed for their health challenges. This happens when there’s too much focus on what the patient isn’t doing, should be doing, or is doing wrong. Personal market research methods are probably the best way to find the right balance.

7) Respect the emotional needs, too.

When thinking about feature and content requirements, it’s common to plan the pieces in a very literal manner – especially as outsiders with business goals to meet. Koren’s interviews unveiled a great need for making patients feel like their feelings are respectfully being taken into account, too. While patients appreciate a caregiver’s devotion to covering the demanding logistics of picking up medications, arranging appointments, doing laundry, preparing meals, etc., oftentimes it’s really just some conversation or a simple “How are you feeling?” that’s needed. Similarly, a disease management app might cover the essential step-by-step tracking process needed to record one’s data, but neglect to account for the emotional impact made throughout that process. This is where user personas and user journey mapping really come into play. Instead of just mapping a diagram of how a task is technically carried out in a digital experience, mapping the human experience surrounding that task can help prevent us from designing hurtful situations and help us identify opportunities to soften a digital experience with more humanistic elements.

Overall, Koren emphasized trust and user research. There cannot be connection without understanding. This healthcare technology – design with empathy!