I’m here, coffee in my system and a fully-charged iPad at my disposal. Let’s get it on!
9:10 - First speaker of the day is our Mystery Speaker. And who will it be? Also, I’m hoping to win the Instagram contest. Shameless plug for my @averagedenverphotog account.
9:15 - Sara Soueidan is our mystery speaker! Talking today about the new Smashing re-design launch
9:18 - As a result of the travel ban, we weren’t sure she was going to make it. Also, due to electronics ban, she was unable to bring her laptop.
9:19 - Starting with article layout. DOM issues were a problem-- needed to be in logical order and not changed to accommodate visual layout. Also could not interrupt content DOM w/ extra DIVs.
9:22 - “At some point, I gave up.” It’s good to know that this doesn’t happen to just me. Timing of transitions is thrown off.
9:24 - overflow: hidden; solves a lot of floating problems. It sorta worked for her. “Every time design needs to be changed because CSS is shit, a kitten dies somewhere.” - Lea Verou.
9:25 - Hacky solution that worked for her was using positive and negative margins, and a pseudo-class. It’s a bit much to go into here, but it was very hacky. “I hated it… I wanted to convince [Smashing] not to use it… [after talking with them] I moved over to the dark side.”
9:28 - Here’s the basic how-to. Problem: overlapping elements.
9:29 - “Maybe if you combine CSS grid, it could work.”
9:30 - Used Flexbox to change order of elements from how they appear in the DOM. Used only sparingly in layout to change DOM and help with mobile layout.
9:32 - Used SVG for all iconography except for small illustrations.
9:34 - Talking about choosing SVG embedding techniques. Which one should you use? “It Depends.” Shocking. Suggests these rules:
9:36 - For Smashing, text needed to selectable, searchable, and acceptable as illustrations replaced actual text. Inline SVGs were insanely long here. Inlined it after all, and added title and text tags in svg tag.
9:43 - This talk is very code-heavy. Great for developers, less so for designers. I’ll do what I can to keep up, but I’m sure I’ll miss a bit.
9:47 - Accomplished nesting links by using an object with an invalid type.
<a href="someplace.html"> <object type="just/kidding"> <a href="somewhereelse.html>Somewhere Else </a> </object> Someplace </a>
9:50 - Also presented some accessibility problems. Also had overlap problems.
9:55 - Not gonna lie, my tiny designer brain is hurting here. There’s a lot of great CSS hacks going on, most of which I’m ill-equipped to understand. I just know that they’re awesome.
9:57 - Talking animating text w/o JS. Working with max-height attribute in conjunction w/ CSS animations is a pain.
10:00 - Her time is up, but there’s a lot more that she didn’t cover. Semantics for accessibility. Contextual text for icons. Views & announcements for content changes. ARIA Live Regions. Content Shortcuts. Don’t treat accessibility as an afterthought. Full presentation and code at sarasoueidan.com/slides/smashing-magazine
10:14 - Up next is Erika Hall, discussing Data Driven design and decision making.
10:15 - Starting off with a missive from the Hitchhiker’s Guide to the Galaxy. Deep Thought, giving the Answer to the Ultimate Question of Life, the Universe, and Everything. It’s 42! Way to cater to us nerds. I doubt there’s a person here who hasn’t read THHGTTG. It’s crazy to think that the series is 39 years old.
10:19 - Deep Thought story meant to illustrate essential truth of human conditions. “We humans have the terrible misfortune to be born self-aware an enormous and uncaring universe… we’ve separated ourselves from all the creatures on the planet by our capacity for reason… That’s great and all… but we humans are not really as rational in our decision making as we’d like to think… We have to make choices, and choices are scary… Because we’re so smart, we made computers… people began to think ‘maybe there’s a mathematical solution to all our problems’… but no matter how smart our machines get, they cannot solve all of our problems.”
10:22 - “Our measurements and how we manage them are just as subjective as anything else. People, on the whole are terrible at math-- terrible at numbers.”
10:24 - DON’T PANIC.
10:28 - Talking about an example of African villages with iron deficiencies and how to solve the problem. Solution? Use a chunk o’ iron when cooking food. First “health rocks” and an explanation were handed out, but rejected as weird. Solution? A fish-shaped hunk o’ iron to add to pot when cooking food. It became a “lucky fish” and the concept spread well between households/villages. A good story trumps rational analysis.
10:31 - This is Big Data. Shows pictures of large Star Trek action figures of Data.
10:33 - is big data really a good thing-- that so much of our information is trackable? “Jeff Bezos owns the Washington Post, and makes a surveillance device [the Amazon Echo].”
10:35 - “We put up with it because we love the convenience.”
10:36 - “We are not computers… We fit the data into our stories… If we see information that’s presented clearly… or your in a good mood… you’re more likely to believe it.”
10:37 - “Thinking is hard.” “We still read the nutritional information not he back of a bag of Doritos-- then eat the whole thing anyway.”
10:38 - 26% of people believe the sun travels around the Earth. Wow. “Our access to data has evolved, our brains [and cognitive limitations] have not.”
10:39 - “We should all locate a metacognition buddy to keep us honest.”
10:40 - Only two types of data: data that can be measured (quantitative) and data that cannot (qualitative). The numbers are meaningless without knowing assumptions. Each has own advantages and drawbacks. Qualitative depends a lot on people doing the work. The Hawthorne Effect takes center stage.
10:44 - To analyze qualitative research, you need good critical thinking skills. To analyze quantitative research, you need to be good at statistics. You can’t just review the data with an untrained eye.
10:45 - “New data doesn’t change minds” when underlying biases exist.
10:46 - “The numbers won’t tell you what they mean. They won’t tell you what’s better.”
10:47 - “The fundamental question of design… is a matter of getting from what is to what you think ought to be.”
10:48 - “Surveys are the most dangerous research tools.” Easy feels true. “If information feels true, we’ll tend to believe it, even if the information is terrible.” “If you write bad survey questions, you’ll get bad data at scale.”
10:51 - “A survey is not a substitute for another kind of research.” “Customer satisfaction is a lie. It’s a really widely-used metric, but it’s a useless abstraction.”
10:52 - Never ask people what they like or don’t like. Never ask people to remember (we’re terrible at remembering things). Don’t ask people to predict.
10:54 - the most measurable data is not necessarily the most valuable. "You nee to move your focus from ‘Can I measure this?’ TO ‘Can I actually use this?’
10:55 - Know your reason. “This is the value and reason of our shared humanity.” Also, Smashing Magazine just mentioned this thread in a tweet. Hello, fellow conference goers!
10:56 - Q&A - What metrics do you use to argue the value of usability? “For usability?.. That all starts from what you need the person to do from a business perspective… Completing a task quickly is often really good, and that’s generally what’s optimized for. That’s the mistake people in design… You need to think ‘what matters to our business?’… really think about… ‘how is this valuable’ [in somebody’s life]”. Should we slow down users and make them think? “Do we have time for me to talk about delight? … Delight and empathy are two words I really avoid using. You should talk about ‘What value am I giving to a person, and is it real?’ … You only slow them down if it helps them to achieve their goal… give them information to help them make a better choice. It’s not about delight, it’s about making sure… that they fully understand [their actions] and getting informed consent… Think about a doorknob. When was the last time you were delighted by a doorknob? … Interface elements are like that. The function should be clear… but nobody is going to be delighted by your doorknob.” Should websites have their own striking personalities? "I think things need to be distinguishable to the extent it’s important to the experience. People already have a hard time remembering things, and if you want to be rememberable, you need to distinguish yourself… The best thing you can use is language… That’s the place to differentiate yourself… When you get to the nouns and verbs of what you do-- what only you can do-- that’s the language that’s differentiating… It also maybe doesn’t matter if things looks the same or not… Who cares what the look and feel is like? That’s a really serious question to ask. Do I want this to look good on Dribble, or do I want to it [to be usable]’.
11:04 - Morning break.
11:28 - Tin Kadoic (of Rosetta Stone renown) is on stage discussing taking responsive design to the next level.
11:29 - How to go from a Design Sprint to an 82% in revenue.
11:32 - Story of Michael the Paramedic, learning Spanish on an app between calls, in order to better serve his community.
11:36 - “When we started, there was no proper mobile strategy, no mobile products.” Talking about invoking Rosetta’s famed “child-like” learning. Wanted to get there in a mobile app. Talking about journey to get the mobile app up up-and-running. Also worth noting-- about 70% of the room know about and/or have participated in a design sprint.
11:39 - Step 1: Unbox and learn as much as possible. Engineers, PMs, designers from the agency side. “Half of success is bringing the same people in the room.” Stakeholder interviews, define endgoal, share known aspects of projects. Day 1 is great if we’re able to define success metrics.
11:42 - Quoting the great Daniel Burka (incidentally my very first follow on Twitter) - “Design is the scientific method of business, if done right.”
11:46 - Product testing. 5 Users giving 85% of feedback is good for a single type of user. Make sure to use 5 users for each group of target customers.
11:47 - Apologies, I’m working through slow WiFi.
11:48 - Combine the following to move forward: What we heard from the users, what we think is the best, since we’re the experts, and what’s feasible give the timeline and budget.
11:50 - Talking about getting to the first release. What happens between design and v1.0? UX design is done first, and then UI work. Research, Info Architecture, journey design, wireframe, interaction design, and user testing were the steps (in order) used to create the UX. For UI, mood-boarding, creative direction, interface design, prototyping, localization and accessibility, and specs & developer handoff for the UI (in order). 4 months of intensive design, and 4 months of engineering.
11:51 - There was a total of about 100,000 screens that could be created. With so many permutations of possible, the decision was made to keep the display landscape-only. Considerations that followed: 1. users use two hands vs. one. 2. Swiping vs. scrolling 3. One input vs longer forms 4. Pull out menu vs tab menu.
11:53 - Had to start dev in parallel with design due to time constraints.
11:54 - How do you learn a language without ever seeing your own? This is the concept of immersion. Used basic knowledge of words to create and introduce game mechanics into the app.
11:55 - Zeppelin introduced in early 2015. “It’s our single source of truth for design” on this project. InVision also mentioned as similar.
11:56 - Chatting w/ design team at Apple and at Android Play to give feedback about how to give best experience for users. Challenged the team in the design phase.
11:58 - Getting to v2.0. Let the Waterfall vs. Agile wars begin! After v1.0, got into groove of 2-week sprints.
11:59 - Number of sessions in first week was related to the conversions. Users with more than 20 sessions in first week (4% of users) accounted for 85% of conversions.
12:00 PM - What were the results? Macworld: “Rosetta Stone beats Duolingo and Babbel.” +49% daily active users, +73% registration, 4.62 App Store Ranking (up from 3.1).
12:01 PM - What happened at 3.1? This was worse than the previous flash version. The loud minority was really angry about some things. We didn’t ask people who were happy about our app for feedback. Once feedback was requested, App Store rating went up…
12:03 PM - Q3 and Q4 last year-- revenue was up 82%. “It’s one of those things I’m really proud of.” “Designers that care about the business results, are the ones what will be most successful.” - John Maeda (@johnmaeda)
12:04 PM - Project nominated for a Webby Awards. Vote for Rosetta at bit.ly/voteforrosetta
12:05 PM - Design principles:
- Bring in all of the stakeholders. Engineers were even involve in sketching.
- Know what success looks like. If we don’t know where we’re going towards, we can’t get there.
- Test products with people. “A lot of times, this gets forgotten.” Suggests 2-week cadence for user testing.
- Honest and timely communication. “I’ve been living on Slack for the last three years. My main design tool is Slack.”
- Care about what you’re building.
12:08 PM - Q&A - How does it run over time? “In every app, you’ll see engagement going down after a couple of days… That’s a little bit related to the hype that we had… The question is, ‘Do we need an app for that?’ Given the complexity… it made sense for us to build an app for that… For a lot of other apps, it really doesn’t make sense.” Is delay time an issue? “It’s something that we plan, and every 2 weeks the priorities are fixing the biggest crashes and bugs… design comments maybe get pushed to another version… reading through App Store reviews, we’ve seen how excited they are that Rosetta is paying attention…” Do you see a delay building for Android and iOS? “For a lot of new projects, we’ve been using React Native as well, which has been working incredibly well as a cross-platform solution…” Do you still do any web content as well? “My team was just focused on mobile. There is still a solution on the web, but it’s still in Flash…” What about Progressive Web Apps? “Maybe there’s a workshop tomorrow?” Was the subscription model of Rosetta Stone a win? “We were coming in in a really good state with Rosetta Stone as a brand…” Does the design sprint happen before the production spring? How do you align the engineering and design sprints? “For us, the sprint… is both engineering and design. The design sprint I mentioned is just something we use when we tackle big problems, like a new version… The default cadence after that is having 2-week springs… with everyone on the same team.”
12:16 - Jessica Svendsen is now on-stage. Jessica currently works in design at DropBox.
12:17 - I AM A GRAPHIC DESIGNER. "We live in age of distraction… I wanted to share my own work " that counters expectations.
12:18 - “Design has become the central metaphor of our time.” - Michael Rock. While designers think they’re irrelevant, everyone else thinks they’re very relevant. Design is now seen as the instigation of the process.
12:26 - Apologies, slow WiFi has struck again. I missed a bit in my battle, but the gist of the beginning of the talk is the value of being a design generalist and the danger of sameness in design.
12:26 - Quote from Richard Turley critiquing modern designers as considerably minimal.
12:27 - Jessica began career as a typesetter. She set type letter by letter, and began to enjoy the interaction between design and typography.
12:29 - Modern authors have introduced visual disrupters, and that has carried over to her design style.
12:30 - Story of the survey that defined Baskerville as the most trustworthy typeface.
12:30 - Worked at Wyndham Campbell Prizes, creating prize identity. Brackets used to group items together typographically, and requirements of prize is that candidates come together for a literary conference. Also used for competition connotation. Used different brackets from different typefaces. Contained information and used as display and decorative patterns.
12:32 - It’s clear that Michael Rock was very influential in her career. He is very quotable, and quite clever, so that’s absolutely understandable.
12:33 - Charlie Rose identity was a new project for Jessica. Identity was bound to be a wordmark, as his brand is his name. Fit in square perfectly. Use of squares and circles to abstractly represent the table and stage. Worked well with PBS’s circle-designed logo.
12:36 - Jessica is discussing the typeface used for the wordmark. No lower cases, decorative quotation marks, strong connotation to print journalism. Quotation marks important. Strong and bold enough for identity of the show. Works well for grids, which lent itself to a number of different advertising mediums.
12:39 - Onto what pushes us forward. Is Bootstrap pushing us forward?
12:40 - “Moments of friction on the web allow for expression… are they ugly or beautiful, or does it even matter?” Talking about working with physical objects rather than on a computer. Example given is using a laser cutter to create perfectly-cut letters that could be layered to create interesting depth.
12:42 - It’s clear that she’s put in a lot of work to bring typography offline. An interesting concept, and from a design perspective very unique. From a practical perspective, my biggest takeaway is the need for uniqueness (and a desire for it as well) in my freelance projects.
12:45 - Writing about this presentation doesn’t do it justice. Jessica has done so much great, visual work that there’s no way I can capture it. I’m going to look for a link to the presentation to post. This is simply something that I’m ill-equipped to translate into a blow-by-blow account simply due to the very visual nature of her work.
12:46 - Classical vs. iterative design. “Classical design is fast disappearing, if it ever really existed, and the iterative nature so emblematic in tech has worked its way into everything we do.” Not Jessica’s words, but I couldn’t catch the quotee.
12:47 - In my opinion, some of the designs are sublime, but fall a bit in their legibility-- some irrevocably so. This works well for her posters, but I’d be burned at the stake for trying some of these approaches online.
12:50 - Guiding principle for testing mediocrity - “When you make something no one hates, no one loves it.”
12:51 - Q&A - What do you do to keep up on trends? “I try to avoid creating mood-boards… I try to… look to the past, to what designers have historically done before you, and then projecting to the future… What happens a lot in design is we’re looking around in our peripheral… it’s a lot more important to dig our your design books and reference history.” Is generic always bad? “I don’t think it’s always bad, but I think it’s a spectrum… I would hope the design work we create, especially online, navigate the spectrum [between art and usability] a bit… there’s a lot more potential if you design something unique…”
Lunch Break. Back at 2:30 PM PST