New York Tech Journal
Tech news from the Big Apple

DesignDrivenNYC #2: designing as a group activity, design goes international, rebranding

Posted on December 4th, 2014

DesignDrivenNYC

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

  1. Frequent iterations in the cycle of design -> build -> measure
  2. Sharing incomplete work to foster trust and increase team motivation
  3. 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

  1. Pages tended to be cluttered and filled with graphics.
  2. 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.

  1. 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.
  2. In contrast to the U.S., 75% of transactions use Alipay and UnionPay.
  3. Shipping – in China, user expectations are for 3-hour shipping.
  4. Mobile – need localized version of apps.
  5. Page & content loading – CDN’s are inaccessible. Need internet content provider (ICP) license to quickly load content. To ameliorate the problem of slow-loading pages, they eliminated some JavaScript code and streamlined the site.
  6. 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.
  7. 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.

codecademcy logo

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.

20141203_191419[1]

Novice Intermediate
Active achiever explorer
Passive hobbyist refresher

 

To better reach all these groups Codecademy wanted to

  1. Redesign the logo to emphasize the online nature of the learning experience
  2. Make ‘merit badges’ have a uniform look and feel
  3. Bring uniformity to the headers, footers and color scheme

The page redesign was guided by the principles.

  1. One column – multicolumn dilutes the narrative.
  2. Social proof – have users do the talking
  3. More contrast – colors used for specific calls to action (CTA) to make each stand out
  4. Fewer form fields – increases conversion rates.
  5. Keeping focus – reduce number of calls to action in a single page. Focus on what matters
  6. Direct manipulation – directly act upon UI elements – reveals contextual actions/controls.
  7. Visual hierarchy – insert white bands to give the eye a place to stop.
  8. Visual recognition –provide users with visual elements that they are already familiar with. Show thumb nail icons and visuals showing coursework progress
  9. 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
  10. 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.

  1. Sketch ideas
  2. Wireframe – show details and it fits into the bigger system
  3. Motion visuals – create detailed story-board visuals
  4. Prototype – use JavaScript to create a mockup. Shows developers how things should look also can be used to beta-test the idea.
  5. Build use C++ and OpenGL. Designers also use a tool to fine tune the display.

posted in:  Data Driven NYC, DesignDrivenNYC, UX    / leave comments:   2 comments