SHORTCUTS
In case you would like to jump straight to the good stuff 
- INTRODUCTION
- THE CHALLENGE
- THE SEARCH FOR A REMOTE SOFTWARE DEVELOPMENT TEAM
- THE PROCESS & THE SOLUTION
- Analysis & system architecture design
- Coding & testing iterative process
- Responsive Website Design and its implementation
- Production deployment & configuration
- End-product solution
- Post-launch monitoring & optimization
- Further development
- Additional services
- TRANSPARENCY, COMMUNICATIONS & HANDS ON PROJECT MANAGEMENT
- SHOWCASE
- TECH STACK & INTEGRATIONS
- CONCLUSIONS
British-based luxury & fashion marketplace MilanStyle.com experienced a spectacular 45% increase in conversion rate after launching its new mobile-ready and improved platform running on open-source Spree Commerce framework.
MilanStyle.com now features over 300 thousand luxury items from top boutiques all over the world and brands like Gucci, Tom Ford, Givenchy, Saint Laurent. That’s ten times more than its old website.
This Black Friday Weekend its online buyers were offered a coupon code for 10% off selected brands but on any other day users are offered regular incentives such as free shipping and sales up to 70% by partnering with a variety of select luxury e-tailers.
And Milan Style is probably the only large fashion marketplace in the world which allows users to search for thousands of items say in pink, khaki, floral designs or even transparent.
“MilanStyle.com was founded with a vision to enable people to buy the best in luxury lifestyle products from wherever in the world they happen to live. For years, you could not do this unless you lived in the right city with a flagship store, and even with online retailers, you had to live in selected shipping territories. Today, the website is the largest online shopping platform for luxury goods in the world serving members across the globe.” – said Jonathan Edwards, MilanStyle founder.
However, Rome (or Milan) was not built in a day.
MilanStyle.com was originally founded as an online shopping destination for men’s designer and luxury branded clothing and quickly gained traction. Its founder Mr. Edwards, now a recognised authority on classic style and luxury lifestyle, had a vision to expand into into womenswear, improve overall customer experience and invest more heavily into marketing, however had been limited by the old platform’s functionality and scalability.
His easygoing personality, passion for digital as well as lots of effort enabled him to form alliances with the world’s biggest luxury and fashion brands, as well as form commercial partnerships across a variety of like-minded lifestyle news-media outlets. However one element of the puzzle was still missing – a new website development strategy architected by an experienced CTO and then implemented by a team of software developers.
Having been impressed with some of the most luxurious brands’ implementation of Spree Commerce as an ecommerce platform he started searching to find a software company which could design and deliver a great mobile website based on that open-source framework.
“We are pretty successful in our niche but hampered by currently being on WordPress. We need to make the move to something far more advanced technologically to take our website and therefore our business to the next level. The scale we are working towards with the new website adding women’s fashion to augment our menswear offering is approximately 500-800k products. The old website can facilitate up to around on 40k products due to tech bottlenecks. We need an upgrade to a new tech stack and completely new architecture.” – wrote the MilanStyle.com founder in his brief for ecommerce consulting and software development vendors.
THE SEARCH FOR A REMOTE SOFTWARE DEVELOPMENT TEAM
“I am keen to use to Spree for its open source nature and ability to get moving quickly with Ruby on Rails. The new contractors will work in an agile way, interacting real time with me along the way, regularly updating me and demonstrating to me required as each component is built. This is not a waterfall project. Speed / site latency is the key criteria of what will deem the project a success. Looking to be best in class when it comes to site speed, across all international territories. I am looking to achieve the high quality of execution of other retailers who are using Spree.” – stated Jonathan’s brief.
He conducted a series of interviews with Spree specialists around the world but couldn’t reach a deal for many reasons ranging from unclear architecture vision to very imprecise budget estimates.
The MilanStyle.com founder finally found good chemistry and culture fit with Poland-based software house Spark Solutions, who specialize in ecommerce projects.
It took only a few emails and conference calls to discuss old site bottlenecks affecting the business growth being limited by product count capacity, slow page load speed, unreliable and slow product XML data feed imports and lack of custom features.
After this initial correspondence, Jonathan and the Spark Solutions team proceeded to discuss goals and expectations for the new site like having a stylish and fully responsive, retina ready user interface and super fast and auto-scaling backend – to please both buyers and of course Google.
“Spark Solutions convinced me with their enthusiasm to take my business to the next level but at the same time great ecommerce and tech expertise. Their timeline & budget estimates were very precise which was a very pleasant surprise for me given that other software houses were completely opaque in that respect. And most importantly they delivered the working software as required within the estimated budget and timeline.” – said the MilanStyle.com founder summarizing his early experiences with his future development team.
After sealing the deal and expressing enthusiasm for the cooperation to come Spark Solutions team proceeded to work on the project in its usual fashion (no pun intended).
Analysis & system architecture design
Client brief containing high-level system requirements and User Story list was converted into system architecture design that could meet all the client requirements at the same time. A full stack of technologies supplementing Spree Commerce was chosen for a modular, redundant architecture of several layers of hardware and software.
“At this level of complexity we’re talking about advanced web engineering going far beyond picking a popular cart solution” – says Damian Legawiec, CEO & CTO of Spark Solutions.
Coding & testing iterative process
As Spark Solutions works in an agile way the project was conducted in weekly iterations. It took 13 weeks to launch an MVP. Each iteration consisted of several micro-cycles oriented around particular User Stories (developer tasks) managed using Pivotal Tracker project management software – as shown on the graph below.
Each User Story development and testing micro-cycle was timed using Toggl.com for billing purposes. Each week’s workload of User Stories was screen-shared with the client during a weekly Google Hangout session. Each User Story was either Accepted or Rejected with some feedback for the developer. Only after a green light from a client each User Story was pushed from staging to production infrastructure.
The whole development process is a repetitive cycle of coders and testers working together with a client with the help of Spark Solutions project manager (PM).
“We have QA staff (testers) working with developers on a daily basis. From day 1 you as a client have access to the staging environment with a working copy of the project. As a Product Owner you can add notes, bugs, accept or reject features anytime. Or you can have our PM staff do it for you.” – said Damian Legawiec.
“We’re doing Test-Driven Development (TDD) with tools like RSpec, Capybara, Factory Girl and many more. After every push tests are run on our continuous integration & deployment server. Besides that we like to do GitFlow approach with pull requests on Github – every pull request must be code reviewed by another developer before merging to the master branch. We’re also doing static code analysis with CodeClimate to keep the code quality on a high level. Most of our projects reach ~90% level of test coverage.” – explains Spark Solutions CTO.
Responsive Website Design and its implementation
Mobile-ready layouts design was a 5 week process conducted in a series of workshops in the presence of MilanStyle.com founder, Spark Solutions UX designer and the project PM.
First greyscale wireframes were created to agree on the high-level UX architecture and user-flows without the distraction of colors and exact page element placements. It was also a feature list exploration process which resulted in some project scope modifications. As soon as the client signed off on wireframes Spark Solutions designer prepared hi-res layout designs. Each page was designed for large desktop screen, laptop, tablet and mobile phone (both screen orientations – horizontal and vertical) for a standard and Retina-ready resolution. Then the PSD layouts were sliced, coded and tested on various devices. But that was not the end of the layout implementation process.
“In order to make the site blazing fast – quick loading of new products in product list infinite scroll or quick product list filtering by various attributes without page reload – we used React.js on client and server for SEO purposes and better user experience. For MilanStyle.com, as in most our projects, we used React.js framework with Flux application pattern. We wrote JavaScript in CoffeScript but moved to EcmaScript 2015 (ES6) right now. For single page apps, we like to use React Router. For Bootstrap integration we’re using React Bootstrap library. All of those front-end tools make up an amazing user experience of which we are very proud” – explains front-end coding intricacies Spark Solutions CTO.
Production deployment & configuration
Deployment to production environment was followed by basic SEO and performance optimization which are critical for ecommerce success – especially with 800k products and so much potential for organic search results traffic.
End-product solution
With the launch of MilanStyle.com MVP its marketplace business was taken to the next level in all respects – 10 times the scale of the old website measured by product count, great scalability and site speed, user and business owner requested features, improved user experience including RWD which is quite important given that 47% of the site’s traffic comes from mobile devices.
New MilanStyle.com features:
- probably world’s largest luxury goods marketplace with:
- over 300k luxury brand products visible to the users so far and growing
- all stock and promotion information updated almost in real time
- great user experience
- mobile-ready clean layout and greatly improved user experience
- blazing fast user interface including search, product list loading and filtering
- search engine with smart auto complete search box
- precise filtering enabling users to pick and choose the best of the high fashion boutiques from around the world
- intelligent “You may also like” feature on product pages
- front- and back-end SEO features stimulating organic search results traffic
- admin panel enabling
- products management
- product category management and moderation
- designers and retailers management
- promotion and promo messages management
- CMS for content pages
- general website configuration
Post-launch monitoring & optimization
Website is being monitored post-launch with tools such as NewRelic for performance monitoring and Rollbar for automatic error reporting. All arising issues and requirements are being addressed in an agile methodology as described above.
Auto-scaling of Heroku cloud hosting was implemented to accommodate load fluctuations, optimize performance and reduce hosting costs throughout sales highs and lows happening in the fashion industry.
Further development
During website development many new ideas popped up and are being developed:
- increase product count
- further SEO improvements for higher organic search results traffic
- product semantic search engine improving user experience as well as sales results
- product list and product page improvements boosting conversion rates
With huge volumes of data being processed every day new tools are being developed to manage and monitor business critical areas and alert notifications are being sent to the business owner as well as the dev team. With time a number of product data related glitches and anomalies is dropping as the application is being hardened to resist them.
Additional services
During the project Spark Solutions provided MilanStyle.com founder with additional services supplementing design & development process:
- data entry during
- internal (MilanStyle) and external (partnering e-tailers) category matching
- de-duplicating brand names in product lists
- SEO consulting & optimization
TRANSPARENCY, COMMUNICATIONS & HANDS ON PROJECT MANAGEMENT
“With so many interconnected solutions making up a website with 800k products and more than one ongoing development process you need an Architect, an experienced CTO to design your product development strategy and execute it on time and within the budget. That and lot of transparent communications, negotiations, patience and team spirit between the client and development team.” – explained Mike Faber, COO of Spark Solutions.
Transparent and ongoing communications was maintained:
- Slack group chat was used for
- real-time team communications
- tracking project progress thanks to integrations with Pivotal Tracker, GitHub, Circle CI and Heroku
- Skype and Google Hangouts were used for weekly or ad hoc video calls
- Trello was used for quality assurance and tracking testing progress
- Toggl was used for time tracking and billing transparency
In addition to remote cooperation MilanStyle.com founder even made the effort to visit his development team in person. He flew in twice to Spark Solutions HQ – to get to know the team and kick off the project and then to finalise the launch of the new version of the website.
Face time with the team definitely boosted the team morale and helped to maintain project discipline in a positive fashion.
In appreciation of Jonathan’s efforts and trust Spark Solutions with a cooperating PR agency arranged for a series of local media interviews which resulted in a national TV appearance and Elle Magazine interview.
“That’s what I call value added” – says Jonathan smiling.
There was also time for visiting bespoke tailors, shoemakers and other renowned Polish craftsmen famous all over the world which Jonathan was also keen to try while in the city. It seems that not only world class bespoke software is being developed in Poland and there are people that value Polish bespoke craft as much as Italian or British.
But there was also time for team dinners. And drinks. That really helped to get through the project as a team despite the usual client-service provider difficulties that needed a swift resolution helping both project partners.
“Jonathan as a client was both ambitious and flexible throughout the whole project which was instrumental to a successful outcome. On top of that he’s extremely smart, witty and fun person to spend time with. And he’s a true British gentleman which is a whole experience in its own.” – added Spark Solutions COO.
MilanStyle provides great user experience on all devices with a fluid mobile-ready layout
Filtered product list with multiple options including price range, sale, color, brand, retailer
Sales-boosting top dropdown menu
Search box with intelligent autocomplete stimulating sales of admin-chosen items
Visually beautiful, very functional and fully responsive product pages
Intelligent “You may also like…” section
Technology stack
- Ruby on Rails 4 with HTTP app caching & memcached for shorter page load times
- Spree Commerce 3.0 – probably the biggest implementation of the latest version in the world
- ElasticSearch for quickly searching and filtering millions of records
- Twitter Bootstrap 3.3 – for mobile-ready easy-to-modify layout
- ReactJS frontend with React-Bootstrap and Flux architecture pattern
- Haml, Sass, CoffeeScript – front-end components
- PostgreSQL, Redis – back-end engine
- Heroku – cloud hosting optimized for increasing traffic loads with automatic scaling up and down
Integrations
- Multiple data feeds from hundreds of cooperating e-tailers being imported several times a day, split into text data (free shipping and sale updates, product info updates, stock info updates, new arrivals) and images to be processed in the background and presented on the website ASAP to remain always in sync with e-tailers stock levels
- Amazon S3 – for all file assets storage and trusted, scalable, secure backups
- Amazon CloudFront content delivery network – for faster page load all over US and the rest of the globe
- Cloudflare – for a significant improvement in performance and a decrease in spam and other attacks (DDoS)
- Facebook API for sign in / sign up
- Mailchimp for building a mailing list and customer loyalty for repeat business
- Sendgrid for e-mails sent by application
Business perspective conclusions:
- MilanStyle.com business was transformed and scaled 10-fold with the right technology and dev team
- MVP (beta-version) was launched:
- in 3 months within the originally estimated timeline
- within 96% of originally estimated budget
- Website was beta-tested and optimized for a few more weeks right on time for Black Friday promotions
- With each weekly iteration of the development process – both pre- and post-launch – new requirements arise for UX or business improvement
MVP pre-launch stage conclusions:
- it is not easy to separate must-haves from nice-to-haves at MVP stage
- number of feature requests pre-launch will increase but project timeline will shorten
- keeping MVP lean is a difficult PM & negotiation process requiring compromise between client and dev team
- with present day diversity of mobile devices Responsive Web Design is a lengthy iterative process with a lot of testing time for great UX
- pair programming is key for effective problem solving and maintaining high code quality
Post-launch stage conclusions:
- high code quality pays off in the long-term at maintenance and further development stage – less bugs, shorter bug fixing & further development time, lower costs
- at a large scale of business marketplace retailer and category management & verification is an ongoing chore to be automated whenever possible
- long-tail SEO is a time- consuming process to be automated whenever possible
- Big Data utilization is not an exact science and requires time and custom tools
We are your Ruby on Rails & Spree Commerce developers. We offer eCommerce development, integration, customization, migration but also high quality Ruby on Rails application & website development services for heavy loads and demanding users. Spark Solutions founders are both experienced web entrepreneurs. We often assist our clients in a CTO role. Contact us at we@sparksolutions.co.
You can become stylish on MilanStyle.com
You can get expert Spree Commerce advice from Spark Solutions – Ruby on Rails & Spree Commerce developers