We spoke about how the Depop UI was made consistent using principles of Material Design as well as how we developed the style sheet to make the app styleable in the shortest amount of time. This enabled us to rebuild the app from the ground up, laying down solid foundations for future development. www.depop.com

1. Our first steps towards Material Design

2. Mantas Varnagiris
Mantas is passionate about all things Android.
As a UX-driven Engineer, he advised on the rebuild and built the
new codebase with Akshay, helping the UX team understand the
Material concepts too.
@mvarnagiris

3. The UX Lead for Depop, Mark has a background in
user experience for mobile apps and the web.
Mark leads the design of how Depop looks, works and delights its
community across the iOS and Android platforms.
@markjenkins
Mark Jenkins

4. “Depop – a marketplace that lets friends sell things to other friends
- is becoming the one-stop destination to snap up second hand
threads, sneakers, design, art and music”
– Jasmine Garnsworthy, StyleCaster

5. The Depop experience on Android was subpar and broken in many places.
We wanted to move towards a Material Design app.
The problem

6. Technical debt
Time spent dealing with a legacy app that was broken.
Messy codebase
A lack of speed in our development process.
Inconsistent
An experience that didn’t match our iOS app.

7. Our solution
To take our first steps towards a Material app, we put solid work into
the foundations – so that we can design and build faster in the future.

8. Material containers
Updated the chrome of the app (toolbar, keylines)
according to Material Design guidelines.
Consistent UI
Cleaned up the UI layer. Used consistent styles across views.
Next steps
Update the content to follow Material Design guidelines.
Add animations that makes sense.

9. Attention to detail
We’re strong believers that the details make the experience – even if they are invisible.
We paid special attention to padding, margins, keylines, spacing
and the layout structure, following some of the guidelines from Google.

10. Onboarding Home Feed Profile

11. Onboarding Home Feed Profile

12. Stylesheets
Implementing consistency as a framework

13. Styles and resources
<style name="Text.Body1" parent="TextAppearance.AppCompat.Body1">
<item name="android:textSize">14sp</item>
<item name="fontPath">fonts/Roboto-Regular.ttf</item>
</style>
<style name="Text.Title" parent="TextAppearance.AppCompat.Title">
<item name="fontPath">fonts/Roboto-Medium.ttf</item>
</style>
<resources>
<dimen name="keyline">16dp</dimen>
<dimen name="keyline_content">72dp</dimen>
<dimen name="space_xlarge">24dp</dimen>
<dimen name="space_large">16dp</dimen>
<dimen name="space_normal">8dp</dimen>
</resources>

14. Themes
<style name="AppTheme.One" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#00bcd4</item>
<item name="colorPrimaryDark">#0097a7</item>
<item name="colorAccent">#cddc39</item>
<item name="colorIcon">#001122</item>
</style>
<style name="AppTheme.Two" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#cccccc</item>
<item name="colorPrimaryDark">#aaaaaa</item>
<item name="colorAccent">#cc0000</item>
<item name="colorIcon">#334455</item>
</style>
<resources>
<declare-styleable name="Theme">
<attr name="colorIcon" format="color" />
</declare-styleable>
</resources>

15. Themes
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary" />
public static int getColor(Context context, @AttrRes int resId) {
final TypedArray a = context.getTheme().obtainStyledAttributes(new int[]{resId});
final int color = a.getColor(0, 0);
a.recycle();
return color;
}
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?colorAccent" />
</shape>

16. Demo
Github URL: http://git.io/vf5SJ

17. The outcome

22. We launched the app
An increase in 4 and 5 star reviews!

24. Featured in “The week’s Best apps”

25. Questions?
Like what you see? Got a question? Fire away!

26. We’re looking for an amazing Android Engineer to join our team.
For more details: bit.ly/workatdepop
or email to work@depop.com
Thank you, we’re hiring!