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!

Games For Change 2014…in tweets.

Five days ago my mind was blown at the Games For Change 2014 Festival. And in five more days, my mind will be blown again when I arrive in Italy! This weekend was supposed to be when I get all obsessed about my trip, but somehow my mind is still enthralled with everything from G4C! I’m still soaking it in…

This was my second G4C Festival to attend, and this year I had the privilege of attending as a volunteer. It was an incredible experience to be surrounded by so many intelligent, innovative and inspiring individuals. Among the many thought-leaders present this year were Jenova Chen of ThatGameCompany (makers of Journey), Jesse Schell of Carnegie Mellon University, Dr. Michael Levine of Joan Ganz Cooney Center, Noah Falstein of Google, Eric Zimmerman of NYU Game Center, Jane McGonical (author of Reality is Broken)Paolo Pedercini of Carnegie Mellon University, Erin Hoffman of Institute of Play’s GlassLab GamesTom Giardino of Valve, and so many more! 

And, of course, the games for change nominees really showcased the effort for moving the games for change initiative forward! (Go play ’em!)

/nerdingout

1404_G4C14-Festival-header

ANYWAY, the energy that surged through these three amazing days is still wildly pumping through my veins. I’m still reflecting on everything I’ve learned, still feeling warm & fuzzy about the great people I met, and still overcome with the drive to do more.

My job as a volunteer was to help front the social media effort for G4C. So I was working with a small team to tweet our hearts out with the 800+ attendees and 10k+ online streamers (according to an article by USA Today — nice job, G4C!) (Shoutouts to my awesome social media crew: @DanButchko @LegendaryHylian @garrettfuselier @emmalarkins @catherineskwak @justin_snyder and the lovely G4C social media leader, @meghanventura)!

It was really cool to be in a designated role where we’re completely inserted into the online conversation along with live-tweeting the event highlights as they occurred. And it was kind of funny (or creepy?) to meet festival attendees and feel like we already knew them from their tweets 😛 …On a side note, I also learned to accomplish the impossible when it comes to using an iPad for typing & multitasking under pressure, and seem to have morphed into one of those crazy Twitter addicts overnight.

In light of this live-tweeting extravaganza, I thought a recap of my favorite #G4C14 tweets would be a solid way to share my own personal highlights of Games For Change 2014. They’re snippets of the moments that had me sitting at the edge of my seat, feeling my soul throb, or cleaning up the pieces of my brain exploding all over the Skirball Center auditorium… BTW, keep an eye out for the recordings on the G4C YouTube channel — everything will be posted there within the next week for your binge-viewing pleasure 🙂

What’s a UX Designer to you?

I expect the usual “What does a user experience designer do?” question when talking  with people outside of design & technology industries.

What’s scary is the vast discrepancies over the answer to that question  according to people within the most relevant industries to UX.

Part of the problem is simply the large spectrum of various specializations which all fall under UX design. OnwardSearch’s “A Guide to UX Careers” infographic helps examine some of these differences. (Although, I would add a “UI Developer” role to pinpoint UX developers who are more equipped with the technical skills to code foundations of front-end designs).

Part of OnwardSearch's infographic of "A Guide to UX Careers" segments some of the various roles that fall under UX/Interaction Design/Development.

Part of OnwardSearch’s infographic of “A Guide to UX Careers” segments some of the various roles that fall under UX/Interaction Design/Development. http://www.onwardsearch.com/UX-Career-Guide/

While OnwardSearch’s resource does a great job identifying differences between job titles, the titles still don’t quite align with job descriptions posted by HR managers or tasks requested by co-workers. This infographic conveys these roles as separate jobs which fall under the UX umbrella.

Instead, I see a spectrum of UX disciplines which range across four core anchor points:

Spectrum of UX Designer Roles

Of course, this a spectrum. So there are aspects of each point which may overlap or fall between others. And that’s part of what complicates the identity of a UX designer’s capabilities, responsibilities, purpose and title. I think it might help to start associating these titles not only with task-based skills, but goal-based verbs. We need to think about who is strategizing, who  is designing, who is producing, who is executing. (You might even classify the latter two disciplines as separate — Graphic Artists and Front-End Developers, for example. But these skills are often coupled under “UX Designer” today).

For example, a UX designer might be designing the functionality of an interface, and may play an influential part in the strategic, visual and technical decisions — but the responsibility to actually produce the visuals or to execute the product may or may not be part of that person’s job. This is where that gray area exists, and where we need to be more specific about identifying the core purpose of each UX role. After all, as Jakob Nielson and Don Norman define it:

“‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

UX Magazine highlights IBM’s balanced approach to fundamentally incorporating content strategy and its related roles in the UX design process.

Another major part of the problem pertains to UX designers in that first of four categories — the one which primrily revolves around the conceptualization, strategy and user-centered design. This problem, which I frequently face, is the misunderstanding of the UX design process. For this role, tasks should never begin with “make a wireframe that shows this” or “put this button here.” UX processes begin with the problem and the users — not with the solution. Instead, assignments should start with “familiarize yourself with this company’s product, audience and needs.”

Similarly, UX designers should not be called upon to immediately provide the “expert” decisions for flows, interfaces, visual designs and technical specs without understanding the context first. Whitney Hess wrote an excellent blog post about this subject matter, emphasizing the importance of intel over instinct and intent over matter. Yes, we are constantly researching and testing usability, and we are knowledgeable of the general best practices. But this usability knowledge can only be as valuable as understanding the context and goal to which it is applied. Good UX designers should be depended upon for their attention to details — but always in the frame of the big picture as a whole.

We need to stop expecting UX designers to always know the answer; we need to focus more on the UX designer’s ability to know how to find the answer and convey it through thoughtful solutions.

Please. Don’t ask a UX designer to blindly make decisions. You will devalue their role and miss out on their positive contributions.