• Role Creator / Designer / Fronted Developer / Content Writer
  • Years Since 2015 (Launched in 2017)
  • View Online vedroid.com
Vedroid - ScreenShot #1

About Project

Since I used to develop a website about Nokia phones (allnokia.in.ua), my friends have often asked me to recommend some kind of model for a purchase. After Nokia smartphones went out of a sale, and Android smartphones took their place, I decided to create a website Vedroid.com. This is a catalog of Android devices from smartphones and tablets to smartwatches and VR helmets.

The main idea of the site is to give my friends (site visitors) recommendations and the answer to the question «Artem, which Android smartphone should I buy now? And why?».

And I saw how outdated smartphones are on sale in stores. And what was even more surprising, people bought them without realizing one important fact — the manufacturers of Android smartphones do not often release software updates for their devices.

For example, a very popular budget model (about $110) Samsung Galaxy J1 2016 released in January 2016 on Android 5.1. This version of the software Google introduced in November 2014 (a difference of one and a half years). This smartphone has received an update only to version 5.1.1. And in October 2016, Android 7.0 Nougat was already introduced, but the Galaxy J1 2016 has never received it.

In my opinion, this is unfair, and buyers while choosing a new Android smartphone need to focus not only on the characteristics but also on the software version. Therefore, my site should help the user to find a good model on the current version of Android. But how can the site help with this?

I thought about this for almost half a year. And in the end, I decided to visually select devices in the catalog that have a new version of the operating system and an adequate set of characteristics. Such models I called Droids, and the rest models — Junks. The slogan of the project «Your new droid is not a junk!».

In addition, the site implemented a «smart» search. It can help those users who do not know on what new model to replace their current old model of smartphone/tablet/watch. In the search box, you can enter the name of your old smartphone and see the recommendations of the new models, which are called Droids on the site. In order to make such a «smart» search with recommendations, I had to add about 1,000 smartphones to the site directory.

In addition to searching, I decided to focus in the catalog and on the product pages for the model year. In the catalog, users can sort models very easily by year of production, price, and status of the sale.

Thus, I tried to make the site with the catalog of Android devices as useful as possible so that users could quickly and easily find a good new model to replace their old model.

Work on project

Mobile First Design
Vedroid - ScreenShot #3

I started developing this project in 2015, and the public launch took place in December 2017.

It may seem to you that doing the project for two years is too long, but you need to consider that, firstly, I was not engaged in it in full-time mode, and secondly, at the time of launch, there were already 1,500 products in the catalog with photos and text descriptions. Filling the site with content is very hard work, which took almost a year.

But the most interesting thing about Vedroid.com is the technical implementation and the new approach that I came up with while developing the site. For more details on this, I plan to write articles on Medium.

Basic requirements for the development of the site:

  1. No database on the server.
  2. Using the Jekyll static site generator.
  3. Using NodeJS and Gulp/NPM Modules.
  4. Responsive design (mobile/tablet/desktop).
  5. HTML-coding:
    • Mobile first.
    • Semantic HTML 5.
    • SEO ready with Rich Snippet and Open Graph.
    • Sass and preprocessor PostCSS.
  6. Pure JavaScript.
  7. Non-Render Blocking Assets (100% Web Performance):
    • Minification of HTML, CSS, JS files.
    • SVG-sprites.
    • Critical CSS.
    • Lazy Load CSS/Images/JS.
    • Image Optimisation.
  8. Multi-language support (en/ru/ua).
  9. Select currency prices for goods.
  10. Sort goods on the catalog pages by three criteria (implementation on JS).
  11. Search the catalog with the recommendations of new products.
Vedroid - ScreenShot #4
Vedroid - ScreenShot #5
Vedroid - ScreenShot #6

Results

Icons for Vedroid and other stuff
Icons for Vedroid and other stuff
 

Thus, over the two years of development, I did not compromise any of these criteria for a high-quality and fast site in 2018. Having fulfilled all these requirements, I created a website that scored 99 points out of 100 in Google PageSpeed Insights test. And one point is not enough to 100, because Google swears at the lack of caching on its own server where the Google Analytics script is located 😄

According to the Chrome User Experience report, the site has an FCP download median of 0.9 seconds and DCL of 1 second.

Work on the project is still ongoing, I write news, articles and add to the catalog all new devices on Android.

Vedroid - ScreenShot #9
Vedroid - ScreenShot #10
Vedroid - ScreenShot #11
Vedroid - ScreenShot #12

Summary

Tools used in this project

  • Sketch.
  • Editor Sublime Text.
  • Console.
  • Static site generator Jekyll.
  • NodeJS and Gulp/NPM Modules.

Skills used in this project

  • Experience with design tools (Sketch).
  • Understanding of human-centered mobile design principles.
  • Experience with Responsive and Adaptive design, Ecommerce experience, Mobile navigation principles.
  • Creating information architecture diagrams, wireframes, prototypes, and screen flows.
  • Experience with web technologies (Semantic HTML 5 with SEO requirements, CSS, SASS/PostCSS, Pure JavaScript).
  • Soft Skills: proactive, meticulous, organized and detail-oriented.
Vedroid - ScreenShot #14
Vedroid - ScreenShot #15
Vedroid - ScreenShot #16
Vedroid - ScreenShot #17
Vedroid
Vedroid Pattern 1 Vedroid Pattern 2 Vedroid Pattern 3 Vedroid Pattern 4 Vedroid Pattern 5