DesignDrivenNYC #2: designing as a group activity, design goes international, rebranding
Posted on December 4th, 2014
12/03/2014 WeWork @ 69 Charlton St, NY
Kim Bost @kimbost @coverpay
Andrew Chen @ andrewfchen @Gilt
Manuel Lima @mslima @Codecademy
Paula Guntaur @pollybirdy @FiftyThree
Four speakers talked about their experiences in designing web sites. They emphasizes collaboration of designers and developers to improve the user experience.
Kim Bost @coverpay (“dine and dash”: Cover takes care of the mechanics of paying for the meal) talked about the iterative design process. She said design decisions should be shared by the full team including developers, designers and business. Transparency is a key part in this sharing and is fostered by
- Frequent iterations in the cycle of design -> build -> measure
- Sharing incomplete work to foster trust and increase team motivation
- Get up-front buy-in by group members on the problems & goals document
Andrew Chen talked about lessons learned @Gilt (online clothing sales) when adapting their U.S. site to cater to customers in China. By looking at their competitors they made the following observations of retail sites used by customers in China
- Pages tended to be cluttered and filled with graphics.
- Customers preferred buying items from a small number of sites, such as Alibaba, which sold a wide variety of products
This list was further expanded as they implemented the changes.
- Gilt needed to create system for language localization. Buttons and other Fixed parts of the site need to have translated text. Gilt is working on a method to translation the dynamic content, including descriptions of the items for sale today.
- In contrast to the U.S., 75% of transactions use Alipay and UnionPay.
- Shipping – in China, user expectations are for 3-hour shipping.
- Mobile – need localized version of apps.
- Social experience is essential. Customers in China have justified concerns about product quality and fraud when making online purchases. Establishing a presence in Weibo.com is important in obtaining social verification.
- International customers tend to search more and make fuller use of the FAQ page. In Asia customers buy fewer brands as there is a greater consensus on favored brands.
Manuel Lima @ Codecademy (online courses on how to write code) described how they rebranded the company starting with a focus group and updating the look and feel of the site.
Interviews of 23 users showed them that there were four types of users in a 2 x 2 grid with axes of experience and engagement: hobbyist, achiever, refresher, explorer.
To better reach all these groups Codecademy wanted to
- Redesign the logo to emphasize the online nature of the learning experience
- Make ‘merit badges’ have a uniform look and feel
- Bring uniformity to the headers, footers and color scheme
The page redesign was guided by the principles.
- One column – multicolumn dilutes the narrative.
- Social proof – have users do the talking
- More contrast – colors used for specific calls to action (CTA) to make each stand out
- Fewer form fields – increases conversion rates.
- Keeping focus – reduce number of calls to action in a single page. Focus on what matters
- Direct manipulation – directly act upon UI elements – reveals contextual actions/controls.
- Visual hierarchy – insert white bands to give the eye a place to stop.
- Visual recognition –provide users with visual elements that they are already familiar with. Show thumb nail icons and visuals showing coursework progress
- Larger targets – increase the size of form fields and CTAs. Fitt’s Law – the smaller the target, the longer it takes for the user to go to. Also better for touch-enabled platforms
- First use – optimize for a great out of the box experience.
Paula Guntaur @FiftyThree talked about a collaboration tool for creating graphics on iPad. The Mix product gives people starting points: Templates that you can modify.
Since many users have multiple journals they added a row above the main set of journals to create a duplex view. To refine the idea, the developers and designers went through the following steps.
- Sketch ideas
- Wireframe – show details and it fits into the bigger system
- Motion visuals – create detailed story-board visuals
- Build use C++ and OpenGL. Designers also use a tool to fine tune the display.