Simplifying a complete Digital Product Design/Redesign process in Just 5 steps (TravelTriangle.com)
These days, companies must have a strong online presence to justify the uniqueness of their products. This is exactly where the need of an appealing and streamlined digital product design comes into play. It’s like the face of an online business that can attract or repel users. Therefore, it has to be unbeatable.
An effective digital redesign of your product can take its digital presence to newer heights. In addition to enhancing user experience, digital revamp can add value to what you are already offering online.
In this blog post, I will run you guys through the entire step-by-step journey on how to go about revamping your digital products. Since there are so many platforms- web, mobile web, android, iOS; it gets tricky from where to start and how to strategize and measure its impact.
I will not just theorize but also delineate the process of redesign that we recently went through at TravelTriangle. At each step in the process, I will be talking about our thought process and why we did what we did. Let’s start!
Step 1. Knowing the core objectives of redesign
This is a crucial part. Whenever you are redesigning/ revamping your digital presence you should know exactly why are you doing it.If you are unclear about the underlying reasons of digital-product redesign, you might end up doing anything and everything.
Also, it’s imperative to know; how you want to be projected as a brand, or as a product. You should have a deep understanding of the domain and the problems that users are facing. Know your audience, understand their mental models and only then start the process.
As you can see, both the products shown above are completely different but the designs serve their audience perfectly. So both are great products.
At TravelTriangle, we did the same, defined WHY we wanted to do a product redesign in the first place.
After you complete the main objectives of redesign by understanding the domain, core consumers and business needs, we move to the next step.
Step 2.Creating a Design System
Step 2 is creating the foundation of your platforms. We followed an atomic design framework for creation of a suitable design system.
In this philosophy, you start with the atoms, the building blocks of your products, instead of the pages or screens.To read more about atomic design, click here.
So, we did the same thing. Rather than revamping complete pages/screens on mobile-website, app or desktop-web; we started with the fonts, brand colors, success and failure colors, icons, spaces, shadows etc.
For each of these items to be finalized, it took its own design thought process which majorly comprises zeroing-in on our primary user segments, understanding their psychology, creating mood-boards for them and deriving color palette from multiple mood-boards
What we created from there was a design system which technically translates into an evolving ruleset governing the composition of a product. Creating design systems that comply with your philosophy and help you achieve your objectives is your second challenge.
At TravelTriangle, we have a vision of creating the best holiday platform, globally. From a user’s perspective, planning and finalizing a holiday is a very complicated and time consuming process, which can go from days to sometime months. One of the primary issues that travelers face is consuming a lot of information: be it flights, hotels, itineraries, cabs, activities, etc. Even if you take each individual piece, like cabs, there are multiple questions in users mind such as airport pick-up & drop, A/c or non-ac, english or Hindi speaking driver (See the image below)
Since it is very complicated, we wanted the design systems to have atoms with minimum visual load and which are easy on eyes. We wanted minimalism in terms of structure and with focus on the right elements. We also wanted visual hierarchies to give each element or piece of information the visual importance it deserved.
In deciding the fonts, we had to understand that the users will usually have limited time to skim through a lot of information. We browsed through a lot of font types but finally zeroed in on Lato. This font offers multiple font weights which will help us in showing a lot of content in different visual hierarchies, thus improving readability of the content in bulk. In addition to this, the font also infuses trust ,looks great on all resolutions and reads well on a computer screen which was very important for us.
Similarly while creating Icons and illustrations we went through a lot of samples but finally closed on something that is simple yet effective. We focused on
- Reducing the visual load for users to be easily be able to skim through a lot of information
- Using minimal designs to reduce clutter
- Focusing on the elements we want the users to take away. Like in Verified agent, the verification badge is highlighted.
- Brand reinforcement which was done to maintain an assured recall value to the icons and illustrations.
Step 3. Using Atoms to create Molecules, Organisms, and Pages
This step is more executional, easier and less time-taking than the previous steps. Now that the atoms are created, you can use these to create molecules and organisms and pages.
Here, we did a simple hack, we just used the existing system design. I will discuss the pros and cons of this approach in step-6
Step 4. Using the same atoms on other platforms.
In this step we just focused on replicating the experience on web.
Step 5. Changing the molecules and the organisms
Now that all the platforms have moved to new visual language, we can experiment with defining the new system and architecture. We can change modules, too.
We defined a new experience for the homepage and changed the organisms/modules, which can be used anywhere (On other pages / Platforms)
In redesigning these organisms, the philosophy remained the same (whatever we defined in step-1). So, you see all those defining elements like low Visual load, minimalism, no clutter, and focusing on the right elements consistently in these organisms as well.
Agile way of Redesign
So now, do you realize that atomic design done differently here. In nutshell, instead of changing the system architecture straightaway or rethinking the elements first, we just changed the atoms and created the designs on previous architectures.
Pros:
- Step-by-Step rollout vs One big Release
When all pages and platforms have moved to new visual design elements and everything is consistent, you now have the liberty to change the experience of specific modules or pages, without having to temper with all. The system will still be consistent as the similar visual guidelines, elements, atoms will be used to create this new experience. This gives you the power to do a step-by-step rollout.
This liberty would not have been, had we changed experience page-by-page or module-by-module, as in that case the whole site would have become inconsistent and the rollouts would have happened only when all the pages were complete. Complete digital product experience change would have ended up becoming highly resource-intensive and time-consuming project. But here, we first broke the project; and deliverables were sequential in days, rather than each milestone after a few months.
We were able to move our complete web and mobile web including the change of backend from ROR to React and Node step by step, in just 2–3 months with interim releases every 15 days.
Even currently, if you see traveltriangle.com, only the site atoms have been changed for most pages and the architecture for the homepage has changed. The modules for the rest of the pages are still the same but will change in future, gradually. Even then the website and mobile site look consistent.
2. Hypothesis testing in new modules
When you change experience of all the modules and the visual design system is also changed, you would never know what actually worked and what did not. It would be very difficult to attribute improved (click through rates) CTR’s or (Visitor to lead) V2L or any lead metric you have, to a particular module, which essentially means that now you can’t replicate what worked and you can’t change what did not. So, when a lot has changed, attribution becomes very complicated.
Whereas, if the things are changed step-by-step, as mentioned in the article, you can attribute success or failure to a particular step and reiterate that step, instead of doing everything at once and being clueless that what did work and what did not.
3. Aesthetic Usability
The aesthetic usability effect is where a user will perceive an attractive product as easier to use than an ugly one. Users will overlook many difficulties and will make many subconscious concessions while using the attractive product. It really doesn’t matter if the product is usable or not, the perceived usability of the product increases.
So, just revamping the site to make it look beautiful, version 1 release in our case, has usability improvements as well.
Cons:
- Rework
You need to rework on the pages/modules, once you redefine the architecture and experience.
The cost is minimal in-terms of the gains though.
“In God you should trust, all others must bring data”
The data was completely in sync with the hypothesis that reducing visual load and cognitive loads will allow users to browse through the product seamlessly and consume more information, as a result of which pages per sessions increased significantly.
Here are the numbers from our initial 10% rollout :
Click Through Rates (CTR)
- Homepage – 25% growth
- Package listing – 37% growth
- Package Detail – 66% growth
- ‘Visitor to Leads created’ move up by 446 bps
- ‘Session duration’ increase by 125%.
- ‘Pages per session’ increase by 208%
If you need to understand more details regarding any of these steps or have suggestions on how product redesigns could be done in a better way, feel free to write in the comments section below.
Also, If you liked the article, do share and like so that other might stumble upon it too.