Redesign a mobile web experience
Softonic's Mobile web was getting outdated and urgently needed a revamp. Starting from technical needs (Use Node.js and simplify the development process), we decided to redesign Softonic's mobile web user experience (from site architecture to visuals). At that time, there were two mobile sites: One for old devices which was providing low value to users; and another one for new devices with an unsustainable code legacy, hard time loading and extremely complex for the user taking into account the mobile web environment; so we redesigned & unified them.
CATEGORY: UX Design / Product Design | COMPANY: Softonic | YEAR: 2016
RESEARCH & UNDERSTAND
A good data-driven model must include both qualitative and quantitative metrics, so we started the research: The first step was to analyze navigation flows using Analytics where we detected very confusing patterns: we found serious usability problems with the site navigation (the user was lost easily and that means a high exit rate).
"Users were lost because they didn't expect tabs on a mobile site"
At the same time we conducted heuristic evaluations and qualitative lab test sessions with users. We also confirmed the hypothesis detected in Analytics, users were lost with the tabs navigation because they didn't expect this behaviour on a mobile site. We drew a customer journey map in order to have the whole team aligned with the main pain points of the user.
DESIGN THE EXPERIENCE
We worked in a full collaborative way between design and development. I got into the day-to-day with the development team on a Scrum environment. It was fully necessary to be aligned with the possibilities that we had from the technical point of view.
"We conducted interviews and collaborative design sessions with developers"
In this process we achieved a great synergy between design and development, achieving full alignment in the final proposal. To improve the site architecture we focused on reduce complexity. We proposed a system that keeps the one-click principle but deleting the tabs navigation: We decided to include the links in a logical context not in the menu (for example, the link to the gallery is placed on the cover image).
TESTING WITH USERS
For the launch we decided to redirect traffic gradually to reduce the impact and to be able to compare the performance with the old version. We improved basic engagement metrics such as Bounce Rate, Time on Page and Returning visitors.
WHAT WE LEARNED
- Working closely design & development saves time, reduces costs and gives much better results!
- It may seems obvious but we always need to design taking in consideration user's context and platform. Each platform has its own characteristics and needs; for example a mobile site is not a mobile app.