Revamping Fishbowl's User Interface

Introduction

Fishbowl’s Drive web app and mobile companion product lack a consistent design, negatively affecting the customer journey and brand image. To address this issue, I collaborated with three UX Designers on my team to develop a comprehensive style guide to align the user experience, ensuring a cohesive and polished interface across all platforms.

Goals

Improve Customer Acquisition and Retention: Provide a professional and polished user interface to attract new customers and retain existing ones, setting our company apart from competitors 

Achieve Brand Unity: By using a cohesive design language across all platforms, we establish brand recognition and provide customers with a consistent experience that reinforces our brand values.

Achieve Consistency Across Devices: By using a cohesive design language across all platforms, we establish brand recognition and provide customers with a consistent experience that reinforces our brand values.

Inspo from Marketing

As we prepared to revamp our product style, we were inspired by the marketing department's excellent website redesign. Drawing from their work, we unified our product design to create a seamless experience, improving the customer journey.

Design Feedback & Testing

Although I would have preferred to conduct more extensive testing, such as A/B testing with real prospective customers, the resources were unavailable. However, we did receive feedback from various departments. Particularly, the Sales team expressed great enthusiasm for the redesign, noting its modern appearance and its contribution to the product's consistency and alignment with marketing materials. They expressed confidence that this new UI would be easier to sell. Additionally, the Engineering and QA departments provided valuable input. Given their daily engagement with backend components, they welcomed the opportunity to review and enhance them.

Engineering Handoff

Working closely with developers, I gained invaluable insights about how to make their process easier. I showed them how to navigate our Figma files in live calls and made short video tutorials they could refer to. These tutorials covered the basics of Figma navigation and our style library, which held all the main components for our redesigned screens. This ensured clear visual representation for easy implementation. To address any challenges, we set up a Slack channel for questions. The introduction of Figma's dev mode during the project and its later integration with Jira improved our workflow.

What I Learned

From this experience, I learned how I could better document design decisions for the future. While components were well-organized, there were instances where clearer guidelines could have been provided. For example, although all our screens followed a lowercase lettering style, a developer overlooked this detail, highlighting the need for more communication of design rules. Also, I saw the importance of making feedback between designers and developers quicker to solve issues faster. And understanding the developer's workflow better made me more empathetic to their challenges, pushing me to find ways to collaborate better together in future projects.

Conclusion

Witnessing a design I worked hard on come to life in production was immensely fulfilling. Moving forward, with the software now componentized by the developers, iterating and refining the design system will be more streamlined and efficient. I am confident that our cohesive style guide will not only resonate with customers but also enhance Fishbowl's brand image to new heights.