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

Mobile development and design harmony at SoundCloud

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.

B0a336761194918a853deeff1f22b537?s=128

Pedro Piñera Buendía

June 19, 2017
Tweet

Transcript

  1. https://goo.gl/MiYYWr pepi@soundcloud.com Mobile
 Development and Design
 harmony At SoundCloud

  2. Pedro Piñera iOS Developer at SoundCloud pepibumur www.ppinera.es

  3. Give the people the power to share
 and connect through

    music SoundCloud
  4. Designing a mobile music experience Design Implement Feel Deliver

  5. DESIGN

  6. Design process

  7. 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
  8. IMPLEMENT

  9. Key points That drive developers work Reusability Consistency Simplicity Confidence

  10. Key points That drive developers work Reusability Consistency Simplicity Confidence

  11. Reusability Saving time Home Team Like Button

  12. Reusability Saving time Home Team Like Button Search Team

  13. Reusability Saving time Home Team Like Button Search Team

  14. Reusability Saving time Home Team Like Button Search Team Like

    Button
  15. Reusability Saving time Home Team Like Button Search Team Like

    Button
  16. Reusability Saving time Home Team Search Team Like Button UI

  17. Key points That drive developers work Reusability Consistency Simplicity Confidence

  18. Consistency Having a single source of truth Home Team Search

    Team Like Button UI
  19. Consistency Having a single source of truth Home Team Search

    Team Like Button UI 11
  20. Key points That drive developers work Reusability Consistency Simplicity Confidence

  21. 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)
  22. CHAPTER NAME

  23. Building a new feature Connecting pieces UI Core Player App

    for OS platform (iOS/watchOS/tvOS/macOS). Extension for notification center. App for iMessage.
  24. Key points That drive developers work Reusability Consistency Simplicity Confidence

  25. Confidence * Snapshot testing First execution The snapshot gets generated

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

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

    the same (pixel perfect) the test will fail. Snapshot Test Snapshot ❌
  28. FEEL

  29. 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…)
  30. How can I feel the design? BIDIRECTIONAL 
 CHANNEL (

    ) * + Version of the app with the changes Feedback to implement
  31. 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
  32. Getting designers feedback

  33. Feature flags For beta builds

  34. DELIVER

  35. 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
  36. Experiment A/B testing When? You want to validate your design

    with users. Why? More confidence when doing design changes. Helps making design decisions.
  37. 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
  38. Experiment A/B testing

  39. 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
  40. 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).
  41. 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.
  42. References Sketch Zeplin Snapshot Testing Feature toggle

  43. None
  44. Thanks. https://goo.gl/MiYYWr pepi@soundcloud.com