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.

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
44. Thanks. https://goo.gl/MiYYWr pepi@soundcloud.com