E-commerce is a fast-growing market, but most online shops lag behind the conceptual and technical possibilities. Inspiring online experiences are rare and all customers usually see the same, non-personalized, online shop. By integrating external content from Influencers, Fashion and Consumer Brands as well as users themselves, ABOUTYOU makes online shopping more inspiring and ventures into the field of Discovery Commerce. In addition, ABOUTYOU consistently focuses on personalization and distinguished itself from the competition by an individually tailored shopping experience for its users.

1. 1
R E T H I N K I N G
FA S H I O N -
E C O M M E R C E
@
ABOUT YOU

2. Welcome
Stefan Tobel Robert Kilian
ABOUT YOU Shop Unit
Product Tech

3. Personalization Process
• Vision & mission
• Business strategy
• USP
• Understand your target group
• Analyse characteristics
• Tracking data
• Execute A/B tests
• Interaction „sweet spots“
1. Set up hypothesis
2. Build feature pipeline
3. Test & learn
F U N D A M E N TA L S I N S I G H T S O N U S E R
B E H AV I O R
A C T I O N

4. F I N D I N G F A S H I O N
„Ich suche die perfekte Jeans.“
D I S C O V E R F A S H I O N
„Ich möchte Mode entdecken.“
B U Y I N G F A S H I O N
„Ich brauche die Levis 501 in 27/30.“
Online
Penetration:
€ €€ €€€Gesamtmarkt-
Volumen:
Growth Potential for the Online Fashion Market

5. Instagram
Spotify
Discovery Happens Mobile
Facebook

6. Adapting to existing Features
Adapting your feature to learned customer behavior improves feature UX and likelyhood to suceed
- I N S P I R E D
• Profile
• Newsfeed

7. First Step of Personalization
Personalization of core product functionalities as first step
C AT E G O R Y P A G E H O M E P A G E C R M

8. Into the New World – Rethinking Fashion E-Commerce
P R O F I L E
N E W S F E E D
O U T F I T S
C O M M U N I T Y

9. Profiles – The Centerpiece of our Personalization Efforts
M A N A G E D P R O F I L E S
U S E R P R O F I L E S
• Influencer Profile
• Brand Profile
• City Profile
• Regular User
• Featured User
Timeline Outfits Lookbooks Other Stars
Recommendations to
discover similar profiles in
the fashion community
Inspiration through
profile specific fashion
insights
Updates on user
activity in the
fashion community

10. Outfits – Meet our Fashion Community
Connecting Discovery Commerce, User Generated Content and our Fashion Community
User inspire through outfits
Outfits enable community activity Outfit Categories
C O M M E R C E F O C U SC O M M U N I T Y F O C U S
User Outfit
+
Products
Notification
Likes
User Upload

11. Newsfeed – Tailored Fashion Updates for Every User
Brand has new
products
ABOUT YOU posted
fashion update
Someone created a
new trend lookbook
Lookbook has new
products
Someone uploaded
an outfit
You have a new
follower
Someone liked
your outfit
F O L L O W S
D AT E
C T R
U P D AT E T Y P E S

12. I N F L U E N C E R
Fashion Community – Holistic Approach Helps to Faster Personalization
T R E N D S
O U T F I T S
C I T I E S
E V E N T S
F R I E N D S
S I M I L A R
U S E R
O R D I N A R Y
O N L I N E S H O P
A D VA N C E D
O N L I N E S H O P
F A S H I O N
C O M M U N I T Y
C AT E G O R I E S
P R O D U C T S
U S E R
buys
buys
likes
have
have
have
likes
have
follows
upload
follows
have
follows
follows
follows
follow
s
have
have
follow
s
follows
lives in
have
generate
follows
promote
Personalization potential

13. Outlook – Geo-based solutions

14. Outlook – Personalized shop navigation
D E F A U L T H E A D E R
P E R S O N A L I Z E D H E A D E R
A
B

15. 15
PA R T I I –
A
J O U R N E Y T H R O U G H
O U R
T E C H
S TA C K
@
ABOUT YOU

16. Challenges of personalization: Performance
Personalization can be a performance killer
• complete server side response has been cached by Varnish

17. Caching with Varnish
Client Response
Request
Varnish Server
CACHE HIT
Client Response
Request
Varnish Response
Cache-Miss
Server
CACHE MISS

18. Caching with Varnish
Replace server side rendered content with frontend data
GET https://www.aboutyou.de/api/customer/me
GET https://www.aboutyou.de/api/basket/my
GET https://www.aboutyou.de/api/wishlist/my

19. Caching with Varnish
What if you want to personalize a bigger feature that is server side rendered?
Remove Varnish caching.
Not a good idea.
Personalize by making clusters and cache
those clusters (i.e. by setting a cookie with the
cluster to a user)
Works for that use case.
Replace full page caching with
partial caching Means high maintenance cost and
performance loss because of
framework overhead.
Rewrite for frontend rendering
What about SEO?

20. Single Page Application
Render everything in the Frontend:
• Rewrite as Single Page Application
Requirements:
• Isomorphic: Same code can be rendered in the backend
• Flux State management
• integrates with TypeScript

21. Isomorphic Rendering
User
Request aboutyou.de
HTML, (SPA-)JS, CSS
Link
API Requests JSON Data
Screen 1 Frontend Server
Backend Server
Route change
handled by SPA
API Requests
JSON Data
Screen 2

22. Data Flow - MVC
Action Controller Model View

23. Data Flow - MVC

24. - Flux - unidirectional data flow
Actions Reducers Store
View
dispatch subscribe

25. - Vue.js - single file components
single component.vue file

26. - React.js - Bring your own
Component.jsx or Component.tsx file CSS in Javascript with Aphrodite

27. Choosing an SPA Framework
very stable, mature framework
very big ecosystem, lot of library choices
easy integration with TypeScript
flexible
hard learning curve
a lot of ways to do things
React + Redux
lower learning curve / lot of best practices
Performance
relatively new compared to React.js,
but pretty stable API
smaller ecosystem and less libraries
angular-like template language that can get messy
TypeScript is possible but tricky
Vue.js + Vuex

28. React - Server Side Fetching VS. Client Side Fetching

29. Lumen Backend
all data is returned as JSON, no rendering of HTML
( M I C R O - F R A M E W O R K B Y L A R AV E L ) A P I B A C K E N D
endpoints cannot be cached by Varnish if not personalized by user „session“ data
• endpoint will not block the whole page
• we can decide based on usage if performance is an actual problem
endpoints can be cached by Varnish if unpersonalized or personalized by parameters
• i.e. ?gender=female, ?sizes=xs,36, ?cluster=A

30. Questions & Answers
T H X !
Exciting Commerce –
Start-up des Jahres 2015
Deutscher Kunden-
Innovationspreis 2014
Europ. Handelsinstitut
Best Customer Exp. 2017
Show your App
Award 2015
Internet World Business
Shop Award 2015
Swiss E-Commerce
Award 2016
Deutscher
Handelspreis 2015
Internet World Business
Best Pure Player 2017