DURATION
12 weeks
MEMBERS
Self: Interaction Design Intern
Lexi Rohrer: Content Design Intern
Chris Martin: Design Manager
TASKS
Product audit, prototyping & wireframe, UI design, micro-interaction, development hand-off, usability testing
Making QuickBooks Online mobile responsive on mobile browser
PROJECT BACKGROUND
40% of QuickBooks web traffic comes from mobile browser.
The current mobile web experience is outdated and not mobile responsive, which is a deterring factor to users and especially trialers. As a result, trial to subscription rate from mobile web is half of that on desktop.
HYPOTHESIS
Improving the mobile experience by identifying high traffic pages and making them mobile responsive will increase trial to paid conversion rate, and also improve retention rates with users.
92% of users have changed their settings in QuickBooks
PROBLEM:
Account and Settings was identified to be a highly trafficked page that is still not mobile responsive. This page is especially highly by trialers, who we seek to retain.
However, its clunky desktop adapted interface is frustrating to use, creating a major pain point. Buttons are out of reach, information is cut off, and challenging to navigate around requiring pinch to zoom.
APPROACH:
Redesigning Account & Settings with a mobile first approach while keeping information structure consistent and maintain parity between desktop and mobile web.
PROCESS
HEURISTIC EVALUATION
We first went through a round of heuristic evaluation of the current experience to identify successful areas and places with room for improvement. We quickly realized the current experience is quite broken and needed an overhaul.
COMPETITIVE ANALYSIS
Since there is no strong guideline in the existing design system for mobile interface, we conducted competitive analysis from other mobile sites to determine the best layout and approach.
MINIMAL EFFORT WITH HIGH IMPACT
We then worked with our project manager and engineers partner to map out a timeline for rollout of the redesign. With time and technical constraints, we were also challenged to design a solution that uses efficient effort with maximum impact.
NAVIGATION
PREVIOUS DESIGN
The old design utilized a stationary side bar for navigation which works great on larger screens, but takes up too much space on a mobile display.
EXPLORATIONS
We went through multiple rounds of ideation to identify the best option that encompasses all 3 attributes: discoverability, visual styling and clear affordance indication.
CHALLENGE
This was challenging since there is not a consistent pattern guideline for navigation in the design system, so we have to leverage using pre-existing components and also external design inspirations to apply to the design solution.
TAKEAWAY
By evaluating different options, we established principles of prioritizing discoverability to allow users to view different tabs at a glance from the main navigation section. We also had to be conscious of minimizing the real estate taken up occupied by the navigation while balancing visibility.
REDESIGN
The redesign implements a scrolling tabs section at the top as navigation to conserve space, while also allow users quick access to all the tabs.
DISCOVERABILITY
This solution lets the user view more than one section label at a time, therefore indicating the availability of options.
VISUAL STYLING
The horizontal layout of tabs help save valuable vertical space while still displaying crucial information.
INDICATION
The green line clearly indicates the active tab while still maintaining a minimal appearance, and tab label overflow gives affordance the ability for users to horizontally scroll.
CONTENT
EXPLORATIONS
Transforming layout of content from desktop to mobile web has numerous challenges. Mobile display’s portrait orientation presents a unique constraint that differs from one on web.
CHALLENGE
Vertical orientation restricts the amount of information to be displayed together side-by-side.
TAKEAWAY
To take advantage of the vertical real estate, stacking information vertically is the best way to maximize space usage, and also improves visual flow of content.
REDESIGN
New content layout takes advantage of the mobile interface’s vertical real estate to display content in a vertically stacked pattern.
By using different typography treatments such as font weight, color and capitalization, there is clear visual hierarchy and distinction between different elements presented.
EDITING
PREVIOUS STATE
With the left nav bar constantly taking up most of the screen, it was practically impossible to make any edits to settings on mobile, rendering the page useless on mobile browser. This was a major pain point and required a fix quickly.
REDESIGN
OVERVIEW
To continue with the principle of mobile first design and making QuickBooks Online mobile responsive, there are some segments of the site that are not ready for mobile, or some features not logical to be accessed on a mobile device. An example is printing checks. Therefore we want to divert users from their mobile browser to stationary for the most optimal experience. We do this via replacing the content and surfacing ads on these pages.
EXPLORATION
For this project, we explored different ad messaging approaches to narrowed down to 3 ad models for different scenarios.
CURRENT STATE
Tables are not supported to be mobile responsive at this time.
PRINCIPLE
To create an optimal experience on mobile web.
SOLUTION
Instead of presenting the current broken experience to users, an ad is temporarily surfaced to reroute users to access and experience this feature on desktop web. Since these pages are determined to be low-trafficked with poor experiences, we decided this solution is appropriate
REDESIGN
CHALLENGE
The biggest challenge we faced while tackling this problem is how to gently direct users between where they are stopped on their current workflow to switch over to desktop. We do not want to make this a negative interaction. We worked extensively with a content designer to meticulously draft the messaging on the ad, and thought critically about the interaction flow.
DESIGN DECISIONS
Context: Having the content overlay ads while maintaining the site navigation makes displaying the messaging clean while still providing users with sufficient context of where they are in the QuickBooks product.
Hiding content: After multiple iterations, we decided to proceed with the principle of only displaying the optimal content. Therefore the decision was made to hide any content that is not mobile optimized, and replace it with our rerouting messaging.
OUTCOME
With the help of our PM and content design partners, we were able to identify 14 pages that required a rerouting ad at the time of project, and we were able to design and implement ads for these areas. We were also able to implement analytic tracking to analyze the flow success of our messaging.
OPPORTUNITIES
Because of time constraints, we were only able to launch our MVP version. Our ideal versions has a more seamless bridge between mobile and web that allows users to pause their workflow on their phone, and effortlessly pick up where they left off and get taken directly to their spot when logged in on desktop.
Remote teamwork is hard.
But not impossible.
After completing 12 weeks of my internship entirely online, I can confidently say it was a one-of-a-kind experience. Between accidentally muting yourself, to having to collaborate entire online, I’ve gained very valuable skills. I got to practice presenting and advocating my design decisions, gathering feedback and iterating on designs. Working closely with developers and project managers kept me on my toes and help improve grow as a team member. While not being able to have quick chats to get feedback or clarification, it made me appreciate and help me articulate and use scheduled meeting times more effectively. While it would have been nice working together in person, this unique experience challenged, and allowed me to grow tremendously as a designer, and also as a team member.
Things I learned
How to use auto-layout on Figma
Your relationship with your PM and PD partners are crucial to success
Always have foresight into potential problems to avoid issues popping up later on
Zoom backgrounds are flipped between your view and what others see
Presentation skills are important to master to succeed in communicating and advocating for your designs
Blue light glasses do really help your eyes
Slack, Outlook, and Figma are my best friends