Behind the scenes of creating Vuetique PWA theme [interview]
Today, I’d like to reveal some secrets of building PWA themes to you. To do so, I invited Sergio Tabaran and Georgiy Slobodenyuk from Absolute Web Services, whose team recently won The Vue Storefront Demo Theme Competition, to talk about their approach, winning concept and solutions incorporated in it.
Their team focused on delivering the best tool for developers but, at the same time, they did magnificent work and proposed a fresh, light, and very well-crafted PWA theme for fashion industry merchants. How did they manage that? Well, let’s dive into our talk!
Hi, let’s start our conversation about the Vuetique theme with the target groups you have focused on. Who did you have in mind when you were designing and then developing the Vuetique theme?
The Vuetique theme was built first and foremost for developers. We based the Vuetique theme on the tailwindcss framework, which has this awesome configuration file that lets a developer pick and choose which helpers they want their own theme to take advantage of, among other really nice features.
If we were to answer for a particular category of eCommerce, it would be for fashion-sellers with larger catalogs.
The fashion industry seems to be the most active one when it comes to engaging users and increasing sales on mobile. Why did you decide to work with the fashion industry? What are the benefits that Vuetique can bring to fashion-sellers?
We decided on this group because a large proportion of our clients sell fashion and we know how image-heavy fashion sites tend to be, so we wanted to build something that would still be exceptionally fast and wouldn’t compromise on the image-heavy nature of fashion sites.
From the perspective of benefits, we felt that desktop shouldn’t be left out, so we made sure to include an always-visible menu to let merchants merchandise their catalog structure and other promotions without being hidden behind a click.
Additionally, we implemented a basic system for alternative images on the desktop that would let users see a better representation of the product without having to leave to the detail page. It does work on mobile if you tap while scrolling up/down or even swipe gesture on the images, but it isn’t as intuitive as we’d like it to be.
It looks like a well-thought out tool for developers and merchants to join the ongoing mobile revolution :). How is your theme adjusted to mobile-first eCommerce?
Our theme is incrementally built for mobile-first eCommerce. We implemented an accordion system for the product detail pages to respect the scrolling height of a mobile user and let them decide what information they care to see. Of course, it’s up to the developer of the theme to create sane defaults that they feel would better fit their brand. Outside of that, the theme really is based on what Vue Storefront is already incredible at: lazy loading, incremental data load from page to page, offline support, etc.
Do the mobile-first solutions for eCommerce align with your strategy? Why did you decide to invest in and create an eCommerce PWA theme?
At Absolute Web Services, we are focusing on becoming an eCommerce powerhouse, building a team of data-driven experts to help inform on our client’s goals in development and marketing. We invested in this theme because we were confident our team would be capable of designing a great theme, learning Vue Storefront, and working quickly to iterate something decent in the allotted time. We also have a few projects in the pipeline using Vue Storefront and want to make sure the rest of our team still used to using other platforms would have a few people to turn to during those projects for insight and technical advice.
Let’s get back to the Vuetique theme. Tell us, what team stands behind it?
Well, we had a few small teams. Probably we should start with the design team, with Sergio Tabaran as a leader and Serghei Grab implementing the entirety of the design and pitch document itself. Our development team was led by Georgiy Slobodenyuk, with the majority of development work coming from Dmitry Kozachek, Aleksander Kharchenko, and Eduard Kozachek. Our QA lead was Julia Zotova, who helped us polish the theme and bring us to general device compatibility. Finally, we couldn’t have done it without the green light from our boss, Roman Yoffe.
Are there any particular problems or latest trends that your theme responds to?
If we had to say, there is evidence that hiding the menu behind a click tends to work less effectively than having the menu available with zero clicks. Another area we tried to combat was cognitive overload, so implementing the accordions was, in a way, in response to seeing these excessively long websites that hinder a user’s ability to find what they are looking for.
How did the design and development process look?
We learned of the competition on December 21st, 2018 and immediately went to speak with my team to figure out if we could make this project happen. We don’t get a lot of opportunities to be early in the game on something we feel we have enough experience on, so we thought this would truly be a great opportunity to test our team’s skill. With the green light from Roman to mitigate as much as we could.
Almost in an instant, Sergio built a first, very quick mockup which caused lots of laughs ;)
Joking aside, we gave this mockup to Serghei to create the pages for the site. We didn’t want to create something radical. It was to be a subtle iteration on what Vue Storefront already was, so as to make sure we could make the deadline.
Within a week, Serghei gave us the home page, menu dropdown design, cart design, product list page, product detail page, popup notifications, contact us page, checkout, and 404 page designs. We immediately assigned it to the developers team to begin.
In the meantime, we also realized we ignored account pages up until this point:
We needed some help and onboarded Eduard Kozachek to come in and assist. The whole process was very dynamic. Soon we had other designs, for Login, Reset Password, and Registration popups, Confirmation, and we had to seriously speed up the development process, update to Vue Storefront 1.7 (which finally Georgiy did at night and later caused some problems) and merging everyone’s work.
Without scoped component styles and our reliance on tailwind’s helpers for most of our layout, this would have been much more difficult. Up to this point, QA was difficult because we didn’t have a development server to preview any of our work — using something like ngrok didn’t work so well because the local URLs were pointing to localhost in the source code. We took it upon us to buy a domain: vuetique.io, and provision a server on Digital Ocean. We set up Cloudflare and railgun, and I set up a vanilla version of Magento 2.3 community with sample data. Locally, everyone was using the vuestorefront endpoint, so we didn’t have the ability to swap content on CMS pages that got pulled from Magento.
By the early afternoon of January 18th, our demo theme was deployed to its current location: demo.vuetique.io.
The last two weeks of January we focused on fixing the miscellaneous bugs, improving UX and auditing our project — and on February 1st we submitted the design in The Vue Storefront Demo Theme Competition.
That sounds like lots of work, but also loads of fun :) Vuetique theme is based on Vue Storefront. What are the new, unique features Vuetique brings to this framework?
Cart loading state, alternative product images on gesture/hover, and accordion functionality on product detail pages.
Last but not least: do you have any tips and tricks for developers wishing to use your theme?
Well, Vuetique hasn’t been tested with Vue Storefront 1.8 completely. So try to use 1.7 if you are seeing issues. Also, be sure to follow the README as we couldn’t find a streamlined way to include the tailwindcss dependency.
Thank you for reading. If you’d like to learn more about themes and solutions that we’ve spoken about, go to the Vuetieque and Vue Storefront webpages.
