How We Approach a Product Design Overhaul
Have you seen the new Lay’s packaging? It took them 2 years to redesign the bags. The team considered everything — from the photography angle (flat lays so that it’s insta-worthy) to the font of the logo (still classic, but a bit more modern).
Even the material of the bag matters — it has to give a satisfying sound when you shake it.
Yeah — THAT intense. For something that we impulsively grab from a supermarket aisle. That’s the reality of good design — the outcome may look simple, but the journey behind the scene is long, inspiring and at times, tedious.
To return the favor, we’re going to show you how we tackle a digital product design overhaul. We figured that an overhaul can give you a comprehensive look.
As you read this, remember that we work very very closely with our client. So close that we become an extension of their teams. And like any good team player, we share our updates, processes and thinking often.
Now, step into our kitchen and we’ll show you around.
I. Research
Since good design can only happen within a context, we start by researching the key elements of our project: user, product and competitors.
A. User.
We want to get up close and professional (because personal would be creepy) here. We spend a lot of time observing our users — who they are, what they’re like and where they come from.
Beyond that, we want to read their minds as well. What are the thoughts and interactions that led them to us? What problem are they solving and where did they find us? We discover all this through user research, assessments and concept tests.
One good thing about an overhaul is we could speak to the existing user base. Studying their past behavior gives us a good start in understanding the users.
B. Product.
Vision. We want to know the goal of the product now and what the team wants it to achieve in 5, 10, 20 years. What does it want to be when it grows up? This will help us to make design decisions that safeguard this dream.
Features. Like a stalky girlfriend, we want to know all about them features — the current ones and the old, abandoned ones. Give us the deets — when, why and how they happened. Reviewing these features will give us a better understanding of what users like and dislike. We compare what they do with what they say in our research because we all know we don’t always do what we say.
Analytics. What are the team’s indicators of success and how has the product fared so far? This is crucial as they can serve as our north star in our redesign. Each team has their own. Tiket.com, our online travel agent client, aims to simplify their flow so that users can go from browsing to booking within a few taps. We keep this in mind in the redesign.
C. Competitors
a.k.a. Competitive Landscape Analysis. We try to get the lay of the land by analyzing their strengths, weaknesses and positioning in the market. We also draw inspirations from players outside the market when we can.
II. Stakeholder Workshop
Sometimes, clients come to us without a clear vision of what to do next. Or, they want to explore other directions for their product. In such cases, we would do a workshop to discuss project goals, road map and action items with our clients.
III. Kick-off Meetings
With all the information gathered from so many sources, misunderstandings can arise. The purpose of kick-off meetings is to get our client on the same page. We share our summary of insights and share our understanding of the project. This includes where the product is standing now, which direction it’s heading and the practical next steps we would take.
IV. Strategy Formation
Information architecture. Digital products are dynamic and can lead to many paths. Information architecture is how we organize these app’s elements. In overhauls, we work off of two information architectures: the current and ideal architecture.
This is also a good time to take a step back and do a spring cleaning. At this point, we can toss out features/ pages that are no longer relevant.
Framework. Based on all the information we have, we form a framework we can apply throughout the product. For example, in our Tiket.com redesign, we created a framework of flow in their hotel booking department and we apply the same structure in their flights, car rentals and other services. If the product team decides to add more features, they can keep replicating this structure.
Once a user master the flow of a framework, he/she can easily apply the same logic in other parts of the product. Learn one and you’ve learned all.
Often, we work with our clients in forming a long-term digital strategy that positions the product well, now and into the future. This includes visualizing the future needs and providing a design framework that’s easy to scale.
Wireframe and flow creation. Whether it’s low-fi or hi-fi wireframes, this is the phase where we get to define the user flow when they go through the product, from start to finish.
Here, we apply our framework to relevant pages. This gives the client a structured view of how a user experience unfolds as he/she goes through the product.
Alignment with other teams. No man is an island: we work closely with other teams like the engineering and marketing teams. Checking technical feasibility early on can increase the efficiency of the design overhaul.
Aside from that, other teams can provide us with valuable insights that can improve the design.
It’s worth remembering that the client’s teams are responsible for their own OKRs on top of the design overhaul. It’s smart to remember this when working with different teams.
V. Design
Weekly Check-Ins. We touch base with our client weekly to give them progress updates and next steps.
This helps to avoid misunderstandings early on and with them, unnecessary reworks. If directions or decisions are changing (because trust us, they do), we’ll catch it early before our team put a lot of work.
If our client has major comments, we’ll get together with to discuss and resolve their concerns.
Completing states. At this late stage, we complete the details, from push notifications to error messages. We do a full sweep of the product and make sure that the details are perfect.
User tests. This is the best indicator we have in finding out if the designs we’ve created are not working well.
The truth is only the users’ opinions matter.
The truth is only the users’ opinions matter. This trumps your boss’ comments or even your client’s opinions. Our design is born out of our assumptions and judgment calls about our users. And we can only judge the correctness of these calls when products get to the user’s hands.
Sometimes, we conduct multiple user testing. We did this in for our audio streaming client, Langit Musik. We did one to validate concepts and another after launching, to test features. We then incorporate the insights we gleaned to the next revision to improve the product.
VI. Handoff
UI design and style guideline. With a total revamp, we always make sure that assets are passed-on properly. This includes design files, documentation and guidelines.
Making sure that the continuing team can proceed seamlessly is part of the work. Good guidelines and design systems enable designers to maintain a consistent look and feel.
Development support. All the work that we have done would go to waste if the client fails to implement the designs properly. That’s why we support the development team with a prototype and design direction. This is to ensure that implementation is aligned as per our design vision.
There you have it! Our entire design process. If we were Spartans, we would rewrite this post as: research — align — design — test — handoff. But we’re here in the internet age, aren’t we? So feel free to read and scroll the above again. No shortcuts people!
Wait — actually, if you’re looking to do an overhaul of your product, there IS something better than a shortcut: letting us do your overhaul. We’re a remote studio passionate about design and UI. Have a project in mind? Chat us up! We might be perfect for each other.
