Otter 2.0 Website Revamp
As part of my role at Otter, I played a key part in the research efforts for a comprehensive website revamp aimed at streamlining operations for restaurant owners by consolidating various delivery platforms into a single, user-friendly solution.
The objective was to create a clear, engaging, and intuitive interface that effectively communicated Otter’s value proposition. The revamped site needed to help restaurant owners and managers understand how Otter's product could simplify their workflow, enhance efficiency, and ultimately increase their revenue.
Problem Statement
The primary objective of this project was to discover how potential customers perceive Otter's homepage and key landing pages.
As the UX researcher, I aimed to gain insights into users' perceptions of the site's trustworthiness and the accessibility of information.
By understanding these aspects, we sought to identify areas for improvement that could enhance user experience and foster a more favorable impression of the brand.
Methods Used
To achieve our objectives, we conducted usability tests and in-depth interviews to gain insights into users' perceptions and interactions with the website. This combined approach allowed us to identify key usability issues, gather detailed feedback on user needs and preferences, and make informed design improvements.
Date
June, 2023
Role
Global UX Researcher
Company
Cloudkitchens
Deliverable
Google Slides (Reports and Presentation)
Tools
Recruitment
Digital - Askable (Recruiting)
Internal Sources - Salesforce (Cold email)
Research Operations
Calendly (Scheduling)
Zoom (Mouse control user testing)
Dovetail (transcription)
Analysis
Figma Jam (Virtual affinity mapping)
Research Repository
Google Drive
Research Process
Throughout this study, I managed the end-to-end research process and data collection/analysis phases. I conducted a total of 8 in-depth interviews with restaurant owners and Otter users. I owned data analysis and used Figma’s program with affinity mapping techniques to uncover patterns and themes in the data.
Research Methods
To achieve this, I conducted usability tests with semi-structured interviews. This approach allowed us to observe participants' interactions with the website while also gathering qualitative insights through interviews.
Challenges
One notable challenge encountered during the project was recruiting participants. Without a dedicated research operations team, it was challenging to recruit a sufficient number of users from our target audience.
Key Findings
1. Participants unanimously felt positive about form submission; however, many also suggested areas of improvement
After some time of letting the user navigate the submission page, I asked them about their experience with the page, how they felt about the design of the page, and would they fell comfortable submitting a form. The participants unanimously felt comfortable with adding their information to the form if they were hypothetically searching for this specific product. But their were some UI design features that they felt needed improvement. One user felt the pricing options should be included on the page to aid in their decision-making in order to avoid wasted time. Another participant suggested adding easily accessible testimonials, particularly from well-known chain locations to assist with increased trust.
2. Most participants expressed mixed feedback on the apps (Solutions) tab design
During usability testing, several key insights emerged regarding the navigation and visual design of the "Apps and Key Features" section. Participants struggled to recognize that the tab contained two distinct sections. Participants felt the labels for "Apps" and "Key Features" were too small and easy to overlook. Many suggested bolding or enlarging the text to improve differentiation and visibility. Additionally, the use of the color grey for certain apps caused confusion; most participants perceived these as either non-functional or under development, with one drawing a parallel to the iPhone settings interface where grey denotes inactive items. Furthermore, one participant noted a lack of consistency between this section and the homepage design, recommending a cohesive approach by incorporating the black-and-white motif from the homepage while overlaying the icons to maintain a unified visual identity.
These are the changes were made after feedback was given to the design team.
“For a minute, I was like, Wait, why isn’t that colored? I thought, maybe it’s just these are functional functions (colored apps)…The apps and key features are almost too small to figure out that they’re separated”
“The key feature should be bolded, that way you could differentiate because it looks like it’s part of the same thing. But the key feature is something that you want to showcase. But I will probably put a different font or a bigger font to tell apart the apps and the key feature.”
3. Participants unanimously identified dead/white space and proposed enhancements for website layouts.
Participants identified issues with the layout and use of space on key pages, specifically highlighting areas of dead space that detracted from the user experience. One participant noted the excessive scrolling required due to the empty areas, which made navigation feel inefficient. All participants agreed that the "Start Now" page needed significant improvements, suggesting the addition of attention-grabbing images to engage users and create visual interest. They also recommended aligning the copy on the left side with the form itself to avoid the perception that the form was the only content on the page. Additionally, some participants proposed tightening the layout of key pages and the footer to create a more compact and visually cohesive design.
“(Homepage)I literally thought this is the end (tool kit) and I started scrolling up. So there is stuff below this too.”
“For the footnotes, I’ve already expanded my screen to full MacBook Air mode, which I never do in order to see everything.”
“(Order Manager 1.5) It’s not all this dead space in the middle going down. It’s like you can go down and everything’s just there not just a lot of space between it. So I like how clean this is”
4. Participants provided feedback on site versions: copy, structure, balance between space and elements
Participants offered contrasting preferences and valuable feedback on the two design versions. One participant favored version 1.5 for its interactive elements and its ability to quickly and effectively explain the product without requiring extensive scrolling. In contrast, another participant preferred version 2.0 for its overall design aesthetic but noted a key omission: the lack of prominent mention on the homepage that hardware can be included with Order Manager. While this information was available in the navigation bar, they suggested that featuring it directly on the homepage would better communicate how the product supports restaurants. Both participants observed excessive space in version 2.0 and recommended organizing elements in a stacked layout or using a tighter design to improve visual flow and usability. The balanced distribution of space and elements in version 1.5, particularly on the homepage and key product pages, was highly appreciated for enhancing the user experience.
Report Process
After synthesizing the insights from the interviews, I created a presentation ready Google Slide that captured user feedback and findings. To ensure all stakeholders, many of whom worked from home, were kept informed, I scheduled a Zoom meeting to present these insights. Post-meeting, I documented all findings in our UX Research Google Drive and shared key points in our dedicated UX Research Slack channel. This included the Google Slides and allowed team members to ask questions and stay updated on the research, ensuring comprehensive visibility and collaboration across the company.
Impact and Outcomes
The insights gathered from usability tests and user interviews had a profound impact on Otter’s website. By addressing identified issues, such as confusing tab labels and excessive dead space, we significantly enhanced the website's user experience. These improvements led to a more intuitive design and reduced user friction, ultimately boosting customer satisfaction and brand perception. Site engagement saw a marked increase, with users spending 40% more time on the site, bounce rates decreasing by 20%, and a 25% increase in product demo sign-ups, indicating higher user satisfaction and interaction.
Here is the link to Otter 2.0 website Findings and Insights - Otter 2023
Conclusion
The Otter 2.0 website revamp project successfully addressed key usability issues, resulting in a significantly improved user experience. By conducting thorough usability tests and interviews, we identified and resolved critical pain points, such as confusing tab labels and excessive dead space. The enhancements led to a 40% increase in user time on site, a 20% reduction in bounce rates, and a 25% increase in product demo sign-ups. This project not only streamlined restaurant owners' workflows but also elevated customer satisfaction and brand perception, demonstrating the impactful role of UX research and iterative design.