Guiding Hootsuite web users to discover the benefits of the app
SUMMARY
What was the problem we were trying to solve?
Data showed that a percentage of our mobile users were accessing their Hootsuite dashboard via browser. While the dashboard had a responsive design to accommodate smaller screens, users had a superior experience when using the Hootsuite app. Beyond providing a better user experience, having more app installs was beneficial from a business standpoint so we could encourage the habit of using the Hootsuite app.
My role
UX/UI designer on the Online Revenue Team, driving growth by converting Free users to Pro subscriptions.
Challenges
The main challenge faced on this project was related to alignment. I needed to understand expectations for how assertive the design should be in promoting app installation. To tackle this challenge, I collected examples from other services and added them to a scale of assertiveness. This scale helped set clear expectations and guided the design process before starting on wireframes.
Outcomes
• Designed 2 variants that took over the whole screen on mobile web login.
• Worked closely with the engineer, troubleshooting technical issues and doing design QA.
• Successfully launched the designs as experiments
Problem statement
As a member of Hootsuite’s Online Revenue team, our primary objective was to convert users from Free accounts to the Pro (paid) version.
Some Hootsuite users choose to use their web browser to access their Hootsuite dashboard. However, using the Hootsuite app offered a better experience with more features.
We decided to do an experiment in order to increase app installs for iPhone users: if the person had an iPhone and went to the login screen via browser, they would land on a page that would show them the benefits of installing the app.
Process
I Discovery Phase
The first step was to analyze the current user flow to understand how users are asked to install the app on the website when they are using their phones.
The next step was to research similar products. I wanted to learn how other companies nudged users towards app installs when they used their website. Based on the research, I made a diagram showing different approaches and presented it to my team to get a feel for how strongly we should nudge the users towards app installs. I also collaborated closely with data analysts to better understand the types of devices our audience was using. This step was essential to a successful experiment as I wanted to optimize the experience for the majority of users.
II Planning Phase: UX
I did wireframes to show stakeholders the solutions I had in mind. This stage was important to not only refine the flow and identify issues but also to make sure the team was aligned on the proposed experience.
We ended up with 2 versions for implementation: one that would break down the benefits of installing the app into 3 stages (with screenshots) and one that was only 1 step (heavier on copy), explaining it all in one screen.
III Delivery Phase: UI and engineer implementation
After stakeholders’ approval it was time to polish the screens. I did an interactive prototype to have a realistic representation of the final experience.
I then worked closely with the engineer to implement the mockups and did design QA. We troubleshot solutions as small issues in technical implementation showed up.
I also presented a slide deck to my team, addressing UX considerations regarding the frequency at which the app install banner should be displayed. If the test was successful, I wanted to ensure the implementation of a logic to improve user experience for specific scenarios. For instance, if a user already had the app, they shouldn’t see the banner; instead, we could provide a CTA directing them to the app. If a user closed the banner multiple times, we should interpret that as a signal indicating their reluctance to take this action and refrain from persistently showing the banner to them.
Conclusion
This process was a valuable collaborative experience in which I worked closely with other areas such as data analysts, strategists, engineers, and copywriters. Together, we brought to life a promising proposal, leveraging our diverse expertise.