We’re always on board with initiative and exploration, so once we heard about the new DE conference in Warsaw, with talks from Vitaly Friedman (Co-founder of Smashing Magazine) and Guillermo Torres (Google Maps), there was no way we would miss it. Here’s a brief overview along with the conference highlights and lessons learned.
Let’s just get this out of the way and say that like every other conference there were things that could’ve been better — like a different heating solution instead of a giant howling air tube... But apart from small imperfections, it’s hard not to hand it to the sponsors of the conference. We loved the old fort venue, the goodie bag with stickers and notebooks, enjoyed the buffet and drinks after the show. On top of that we had a really nice talk with the design team from Avocode and had a laugh after my name tag got trolled by Kuba Stanek with the ongoing Damn Daniel meme.
All that was great, but the best part was the amazing set of complementing talks and fascinating people in one room. The topics span from general concepts of optimizing design and development systems, just to take a nosedive in detailed UI elements like a quantity picker for your ecommerce website, including talks about friction design as well as delight along the way.
Vitaly started where many design talks end - with Brad Frost’s Atomic Design. Anyone who ever tried to implement this methodology knows that it’s great for maintaining consistency, but as you build your way up along the element hierarchy it’s pretty easy to lose context of the actual product.
The very basic outline of Atomic Design is to start with the smallest elements like buttons, inputs and build your way up by putting them together to form more complex patterns. To give you an example, start with an input and a button, which at a later stage will form a search box which will be part of the top navigation and so on. These more and more complex patterns become whole components and form Molecules then Organisms, eventually ending up as a complete page.
The fallback of this method was something we sometimes experienced during our work as the approach doesn’t tell you a lot about what a user is trying to accomplish and doesn’t explicitly say how a given pattern promotes a certain behaviour. During the talk Vitaly presented a General Electrics case study advocating for a different approach - one that is also known as the Predix Design System.
Atomic and Predix complement each other in many ways, but in terms of organizing a design pattern library Predix inverses and expands the Atomic Design logic. The starting point of the Predix Design System is the Application level. Applications are presented as small case studies for a product use, which contain context and provide understanding in what sort of problem space a certain solution exists — it clarifies how the product meets the customer needs. On the next level there are Features which are interfaces (sometimes full pages) that correspond with a user’s capability to complete a certain task with the product, e.g. managing contacts. After that it gets pretty similar to Atomic Design with the key difference of “building-down” the interface elements and dissecting them, ending up with smaller and smaller parts of the interface up to a point where you start to talk about the Principles like the grid structure or an inline validation.
A full explanation of Predix isn’t the goal of the article, but if you’re interested and want to read more we highly recommend you check out this awesome post on how GE implemented Predix by GE’s Product Designer Jeff Crossman.
Delightful design at Google
At RST-IT we mainly deal with startups, so one thing that stood out for us, from the talk given by Google Maps designer Guillermo Torres, was the claim that delight in design becomes mandatory with time. Guillermo stressed that for any well established company delightful design is not something you should think about before easter, but what should be strategized and tested just like any other feature. He also gave a little insight into Google’s feature evaluation process which turned out to be the good ol’ Kano Model (with data from surveys and usability tests) along with thinking about the Hook model on every step for maintaining retention.
Some examples of delightful design from the talk:
- Google Maps change the walk icon to a hike icon when the destination is 8h away on foot.
- Google calendar provides a contextual image for each month,
Friction in design
Another talk we really enjoyed came from Tomasz Bieńkowski (Senior Service Designer at Kwiecinski Business Advisory). He talked about friction… Wait... Friction? What friction has to do with design? – some of you might ask. Most of us know what friction is in terms of physics and it works pretty much the same way in design if you imagine the interface as a surface that the user is gliding on.
Uber introduced friction within their pricing model when they embarked on a problem of having a lot of riders, but not enough drivers during rush hours in town centres. They introduced the surge pricing model that was aimed to attract drivers to certain areas with more demand,offering drivers a higher rate. The cost had to increase for riders and even though Uber was telling them that prices are higher, people usually ignored the information and just clicked “continue”, which brought about dissatisfaction and surprise after receiving a higher bill than usual. To put it simple - the order experience was too smooth. To avoid the problem Uber forced riders to manually type a multiplier number to make sure that the user understands the difference between his order and the regular price.
Another friction example we liked was Airbnb’s decision to obscure parts of the information the applying guests share with the hosts. Their research showed that certain information enabled racial discrimination when accepting guests and it did not correspond well with the company’s goals. Airbnb’s choice made it harder to choose the right guest but correlated directly with the company’s values.
Nicolas Duval from BlaBlaCar had a brief presentation on how they handled design consistency between web, Android and iOS platforms of their carpooling product. We got to know the story behind the start of Avocode, told by Vu Hoang Anh, and how they handled declining client retention. Emilia Bojańczyk went over some of the basics of web design, comparing two perspectives — designer and developer. A nice view on the importance and role of a product owner, in any software building team, was given by Łukasz Banach.
Tips for ecommerce
To close the official part of the conference Vitaly Friedman presented a set of comprehensive data to back up his experience with building ecommerce sites and gave great tips for any online store. Luckily, I hastily scribbled most of them down for you:
Tell it upfront - keep the price clear, avoid hidden costs like delivery, taxes etc.
Price match your competition - especially when users copy titles of products on your website, which usually means they’re going to search for them online and see if they can get a better deal.
Infinite scroll, pagination or a “load more” button for product catalogs? The answer is that a combination of infinite scroll and a load more button get the best results.
Example: 50 products that load automatically on scrolling and after that a load more button.
Ratings can’t be too good. People prefer a 4.5 instead of a 5.0.
Excerpt keywords from reviews, think about a way to summarize client reviews.
Connect people that bought an item and others that are thinking about it (AO.com is doing this with their Q&A section).
Keep an active coupon code somewhere else than your website. Try a newsletter or a different service - just make sure it’s pretty easy to find. People will be delighted when they find it.
People are more careful about their data once they decide to pay or have already paid. Ask them for their email at this step of the checkout process, and you’re likely to get more accounts created.
Prevent errors after the checkout is done. “Have you received an email confirmation? if not, here’s an option to change your email.”
Custom designed security badges prove to be the most trustworthy.
Always use a padlock in the checkout process.
Provide free shipping to customers who buy 20% above the average threshold in your shop.
Optimize for buying without an account.
“Click to activate this deal” - call to action, proved to be the most successful when offering promotions.
Offer a discount to a client that has returned to your product page a couple of times, as he is probably struggling with the decision between several options.
Provide a gift in the cart for 0,00$ along with the quantity selector (People will probably abuse the selector - just give one gift).
The most evil tip was probably to provide an option to add free stuff to your order that you would get for free anyway (like breakfast in some hotels). This way you let your clients think that he got them because he’s smart and increase their satisfaction.
Many thanks and kudos to the speakers, partners, sponsors for organizing the event and my company for sending their designers to the conference. Here at RST-IT we’re looking forward and hope for a next edition in 2017.