Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile development and design harmony at SoundC...

Mobile development and design harmony at SoundCloud

Talk that goes through some of the processes and tools that we use at SoundCloud to deliver the best music experience on mobile platforms.

Pedro Piñera Buendía

June 19, 2017
Tweet

More Decks by Pedro Piñera Buendía

Other Decks in Design

Transcript

  1. Sharing the designs Speaking a common language Readable and exportable

    por developers (colours, fonts, resources…) Option to share comments with developers (clarify things, animations) Well integrated with Sketch (seamless integration with designers tools) Zeplin
  2. Keep it simple It’ll be easier for everyone Same naming

    convention as designers (colours, sizes) Simple and composable UI elements. Readable UI code (Storyboards/XIBs)
  3. Building a new feature Connecting pieces UI Core Player App

    for OS platform (iOS/watchOS/tvOS/macOS). Extension for notification center. App for iMessage.
  4. Confidence * Snapshot testing First execution The snapshot gets generated

    and the designer validates the design Snapshot ✅
  5. Confidence * Snapshot testing Future executions New snapshot are compared

    with the validated snapshot. Snapshot Test Snapshot ✅
  6. Confidence * Snapshot testing Future executions If they are not

    the same (pixel perfect) the test will fail. Snapshot Test Snapshot ❌
  7. Why feeling? Can it even be felt? Implementation might feel

    different on device. Platform animations/transitions. Not considered states (connection, no data…). Developers can make mistakes. Multiple screen sizes (iPhone, iPad…)
  8. How can I feel the design? BIDIRECTIONAL 
 CHANNEL (

    ) * + Version of the app with the changes Feedback to implement
  9. Distributing Beta builds Beta distribution platforms: TestFlight for iOS Google

    Play Store for Android. Notifications when there’s a new version. Continuous delivery: Every new change introduced, generates a new version
  10. Gradual release (aka rollout) Not necessary when the changes introduced

    are small. Very important when breaking design changes are introduced. New navigation. New font. Example: Twitter and its new design Increase
 Percentage 0%˝ Rollout Change
  11. Experiment A/B testing When? You want to validate your design

    with users. Why? More confidence when doing design changes. Helps making design decisions.
  12. Experiment A/B testing 1. Define a KPI: User listens to

    more music. Spends more time in home. 2. Define A and B options. 3. Release the experiments. 4. Wait for a few days. 5. Analyse results. 6. Iterate
  13. Dynamic designs Driven from the server Based on: The day

    of the week. The gender. Music preferences. Facebook information. … Track without layout parameters Track with layout parameters
  14. Future improvements Integrate snapshot testing Improve cross-platform consistency. Make components

    more reusable. Involve developers more in the early steps of designs. Improve design validation in multiple devices (usually done on iPhone).
  15. Summary Collaboration is very important to deliver the best experience.

    Dynamic designs engage more (the app knows about you). Never assume you know the user very well. They are unpredictable. Get designers and developers as close as possible: Designers using developers tools and understanding platform limitations. Developers using designers tools and contributing with ideas. Improve your tools and processes iteratively.