Mobile accelerates growth:Vinted story
At the end of 2012, Vinted was a web-only product.
Today 90% of traffic comes from mobile apps.
Here is the story how Lemon Labs helped to build their mobile product.
Vinted is a place girls and women sell, buy and swap pre-loved clothes. It is the leading marketplace of the kind currently operating in 8 countries: United States, Germany, France, United Kingdom, Czech Republic, Austria, Poland and Lithuania.
The company was founded in 2009 and has been growing exponentially over the years. In 2012 it raised Series A round of €5M from Accel Partners to further fuel its growth. By then Vinted already had a strong presence in several European markets and was ready to expand into new territories.
Vinted saw the importance of mobile as early as 2010. However, development of their mobile apps went so slowly that by late 2012 there was nothing shippable. That was when Vinted asked Lemon Labs to get on board and bring Vinted to mobile.
We joined the party late: the apps were in development limbo for over a year, had a huge set of incomplete features, and had undergone a slew of redesigns. To make matters even worse, the company initially wanted to ship an app that has every feature the website has; which was ever expanding.
Our primary goal was to ship. ASAP. With a set release date there was no time to deviate from the master plan. The app was already a year behind and we had a month to get it ready for release. Or, rather, to get it as ready as possible.
Jumping into an existing 120k lines of code is quite a feat by itself, not to mention business logic related issues. All in all, it was a crazy month which culminated with a release to a highly-hyped Vinted community that’s been waiting for a while.
For the launch day we’ve prepared big-screen displays with download graphs, opened our beers, crossed the fingers and hit the proverbial big red buttons. It felt like finishing a marathon!
Almost immediately Vinted forums started to get excited. In Germany, girls even managed to discover the app in the App Store before the official announcement.
We had mobile apps in development for more than a year, constantly iterating, but never delivering it to our members. Quality and stability was not there and it seemed crazy to go for release, but as soon as the apps were in the hands of our members, not only we knew where to concentrate our effort, but got the real picture of importance of mobile and it's upcoming inevitable dominating future for us.Andrius, Vinted Co-head of Product
Before the app was released, 80% of the traffic came from desktop web and the rest came from mobile web browsing.
The next day after release, Vinted saw a major shift in traffic: as much as 30% of the traffic came from the just-released apps.
Members finally got what they were long waiting for; so happy forum posts and positive app ratings were abound.
Traffic dynamics were also very positive. Vinted already had a healthy daily traffic, but just 24 hours after the apps' release, they saw a traffic growth of 30%. All from mobile, the largest spike ever!
Unfortunately, we knew this would end as user experience was sub-par and the app would crash often. After the initial excitement wore out, members started to complain and give us 1 star ratings.
Stability issues were easier to resolve, however to get major improvements, fundamental changes were needed. A year of development left apps with a big amount of technical, design and user experience debt.
Paying the debt
Programmers say they’ve accumulated technical debt when code-base improvements are postponed or skipped altogether, places that need refactoring are left intact, or architecture that got to evolve with the feature-set stays set.
Design debt is talked about more rarely, but acquired just as often. Whenever a certain user interface or flow is designed, it can be difficult to change it: whether it is removing or simplifying something. Very often new design features are tacked onto existing interfaces without rethinking other parts of the user experience. This was fairly evident in our first release of Vinted app: the app was designed with having almost all the functionality of the website in mind. That meant long complicated screens without clear priorities. Also the app had some old web-like usage patterns that felt out of place on mobile.
Accumulated debt is like an anchor. Work drags, changes are difficult and new features are influenced by past decisions that are not relevant anymore.
The proper way of dealing with situation like this is to start paying out the debt bit by bit - refactor this place here, renew design there and after some time you end up with a clean state. This approach is slow and not the most pleasant one - basically that’s like cleaning up. Developers most often have an itch to start from scratch and avoid cleaning up altogether.
In Vinted's case we understood risks and saw the advantages of a new start. Two factors were most determinant in our choice - lack of robust architecture in the code base and outdated design. Problems with architecture meant improvements to the code were local because there was no good way to introduce proper abstractions. Local changes were also very inefficient.
Design-wise we needed to change all look-and-feel at once. This didn’t play well with architectural problems.
After deliberations we decided that in our case a fresh start is the better option than gradual improvements. This was the point where we started to work on Vinted v2.0.
A new start is a big boon. We knew the feature set, the problems and the usage patterns - in other words, we had the benefit of hindsight and were in position to make use of it.
Vinted is complex for an app. At that point we had around 90+ different screens, complex information hierarchy and had to re-implement this efficiently. Waterfall approach was the way to go - reusable UI patterns were needed to design that many screens and we had to plan the app architecture such that it would help us manage the complexity and allow as much code reuse as possible.
UI patterns and reusable blocks helped us to develop efficiently. Before we got there we needed a full review of every screen and every element to help us find a more optimal solution. Scroll down for a few examples for the screens that underwent UX and UI overhauls.
When evaluating the item screen, we focused on the single most important goal - to make the sale. Photos influence the decision the most, so we made them visible all at once as a mosaic header. Important actions and key information went right below the photos to give them the most attention.
To make it even simpler to engage with an item we made the bar with the Buy button sticky: if member scrolled the screen below the photos, it would stick to the top and remain visible allowing interaction with the item.
Last but not least, we placed favoriting action much more prominently and replaced star symbol with a heart. A heart feels more personal than a star - something Airbnb learned while developing their app. These changes increased favoriting by as much as 1,000%! Three 0’s. That’s not a typo.
Navigating the Catalog
The clothes' catalog in Vinted has a deep hierarchy. Short skirts are different from long ones even though they are both skirts. Also skirts fall under the category of women’s clothing. Not to mention the variety of accessories. In the v1 design a member had to navigate the catalog from top to bottom until she got to the item list. That could take as much as 6 taps with a couple of scrolls. We set out to change that - a member got to see items after 2 taps, and began to redesign around that goal. For the entry into the catalog we created an iconic grid of categories that led directly to the item listing within the chosen category. After many iterations the final solution allowed a member to navigate deeper via a dropdown in the navigation bar.
Content creation is a critical part of Vinted. It is performed by sellers who create listings of clothes they’ve got for sale. Core tasks in listing creation (or item upload as we call it internally) is to take and upload photos of the item. We could not get away without the member having to fill a largish form but we could improve the experience with photos. An idea came up to flip the order: instead of showing the form first and adding photos via form fields, we let members be creative first and shoot images before showing the full form. Having the most difficult and important task accomplished, a member is more likely to finish filling in the form and complete the item upload.
Signing Up for Vinted
It’s a well known fact that the size of the form to fill correlates inversely with successful completion rate. Practically, the shorter the form, the better it is. We’ve taken that to heart and strongly simplified the sign up process. A dialog instead of a separate screen, a couple of inputs instead of a handful. Once the member is in and starts using Vinted she’ll be more eager to add more information about herself.
The UX and design guys were busy thinking about member facing parts of the app but that was only a tip of the iceberg supported by massive internal structure. Nothing brings as much fun as a serious challenge. We faced quite a few.
While iOS suggests an opinionated approach to structuring your app, architecture in Android is a less developed topic. Older Android versions, up to 2.x branch, had an
Activity component which was the core building block of the app. Android 3.0 introduced
Fragments - a more lightweight component. We made good use of them porting all screens to be
Fragments and using the sole
Activity of the app to act as a router. This way we built an architecture akin to MVC that’s usually found in web development. Later such approach greatly helped us to keep complexity of the app manageable.
Layers & Abstractions
In developer tongue encapsulation is the process of hiding complexities behind a façade that is easier to grasp. We think in layers of abstraction - for instance, networking and server API access is complex on its own. When we're working on UI we'd better not have to care about the complexities of networking. We call it "the network layer", put an elegant API on it and forget the complexities. Same approach works for many parts of the app - navigation, common UI components, data persistence, etc. Since we knew what we would need in advance by having version 1.0 for analysis, we were able to define well thought out abstractions that helped us to be productive. For instance, the Android code base shrank to 50% after the rewrite while feature set increased.
Network access in mobile is often tricky. Connections tend to go flaky, mobile charges apply, server APIs may be outdated. A robust network layer is a must to be able to deal with UI and business logics without much pain. Initial app versions were good examples of what to avoid - low level network code mixed up with higher level UI code, limited reusability and minimal error recovery. Our first concern when we started working on app version 2.0 was to eliminate these issues. When we were done networking wasn't an issue anymore and we could put all of our brain cycles to build what actually maters - UI and member facing features.
After all the hours put into Vinted 2.0,
launch was no smaller event than initial one.
And, it was a success - here are the numbers:
With the release of version 2.0 the crunch time was over and development routine stabilized. More iterative process took over - work on separate features, bi-weekly sprints and more frequent releases. As sprints passed several noteworthy practices and processes emerged.
We've already mentioned that The Vinted app is very complex. It has many screens and even more user flows. Communication of these dynamics is difficult and prone to misunderstandings. Our solution was App Flow documents - large flowchart-like documents showing every screen relevant to a particular flow (e.g. Sign Up) with every possible state and transition between the screens. These documents proved to be invaluable by serving for a reference point when discussing and implementing design solutions.
UI Asset Management
Lots of screens leads to really big pile of assets - resource images, icons, button images and other interface fragments that are the building blocks for the user interface. Developers can easily get lost with that many files and versions, so we needed a system to manage them. It got to be scalable to hundreds of screens, thousands of assets with multiple pixel densities and all fully automated. Otherwise, preparing images manually and browsing them would be a huge time sink for both developers and designers. With Slicy and our custom-developed pipeline, we got the process working and enjoyed increased productivity ever since.
Thorough member tracking proved invaluable. It really bit us in the back when some events were not actually tracked. Real hard data about member behavior let us determine usage patterns, find bottlenecks and improve various flows. Our platform of choice was Google Analytics complemented with Vinted’s internal analytics system. Comparison of usage between different platforms also offered valuable insights - as UI was slightly different because of platform specifics, we got a poor man’s A/B tests for free. On a lower level we used crash tracking services from day one. That allowed us to quickly pinpoint lines of code that were causing problems.
Handing Over to In-House Team
Since the release of Vinted 2.0 the in-house mobile development team has been steadily growing with new members joining the mixed Lemon Labs and Vinted crew. They smoothly integrated into Vinted app development and when time came for Lemon Labs to depart, the transition was effortless.
The user interface design was way ahead of development at the time with a healthy backlog of features planned and designed. To further pass on as much design knowledge as we could, we also prepared "Vinted Design Guidelines". A 30-page long document that covers in detail our workflow, design reasoning and provided resources for designers who would be working on Vinted mobile in the the future.
Year in Numbers
Downloads in the first year
We had an extraordinary experience working together with Lemon Labs, converted company from desktop to mobile-first and built an app which has been downloaded by 2 million people this year. So, high recommendations from me.Justas, Vinted CEO
This is by far my favorite and most used app! it's so easy and a great way to meet people and make extra money and trade really cool old things that you have! Thanking God for this app! ❤ ❤ ❤CaileyMarie, Vinted member
Code base Lemon Labs prepared had a robust architecture and well thought out structure. That gave us a solid and scalable foundation for future development.Martynas, Android Developer at Vinted
Lemon Labs proved to be indispensible partner in our journey from desktop-centric to mobile-first product. While helping us to rethink and reengineer our apps, they tightly integrated with our internal team to deliver the next-generation user experience and the world-class quality level. This in turn accelerated our growth and created possibilities to open new markets.Andrius, Vinted Co-head of Product
Lemon Labs worked on Vinted mobile app for a year. We helped Vinted to transition from being desktop-centric to mobile-first, which increased traffic and improved many other metrics.
These achievements strongly contributed to the $27 million Series B investment led by Insight Venture Partners. Fueled by fresh funding Vinted continues to grow keeping a sharp focus on mobile future.