The Crispy User Experience

From Swipe to Bite: Redesigning a Food Discovery and Ordering App for iOS

Overview

Crispy, a food discovery and ordering platform, was initially launched as a web app. However, the platform faced significant challenges in terms of performance, user experience, and overall engagement. We were tasked with redesigning it for iOS to improve functionality, user interactions, and address key pain points, aiming for a seamless, engaging experience that drives business growth.

My Role

As a product designer, I co-led the design and strategy for Crispy alongside senior product designer, Victoria. I conducted user research, collaborated with stakeholders to align the app with business goals, and led the creation of user flows, wireframes, high-fidelity mockups and prototypes. Additionally, I played a key role in user testing, quality assurance, and developing the restaurant partnership program strategy.

Problem Statement

Crispy’s web app faced major performance and usability issues, including slow loading, crashes, and complex navigation, which hindered user engagement. The cluttered design made it difficult for users to discover dishes and complete orders, leading to frustration. A redesign was needed to improve performance, streamline the interface, and enhance the overall user experience.

Client

Crispy AI

Timeline

06/02/2024 - 09/12/2024

The Team

Designers, Developers, iOS Engineer, AI/ML Engineer, Operations, Project Manager, Marketing

Role

UX & UI, Product Designer

Activities

Iteration
Research
User Flow

Mockups
Prototype
Usability Testing

Tools

Project Background

Transitioning Crispy from Web to iOS App

The Crispy app, originally a web platform, struggled with performance and user engagement. To address this, it was redesigned for iOS, focusing on improving functionality and user experience. The main goals were to enhance search, simplify the interface, and add personalized features.

Key updates included advanced search, social features like reviews and collection tracking, and seamless integration with third-party delivery services. Driven by user research and iterative design, the redesign aimed to solve issues while boosting engagement and app waitlist signups.

Figure 1. Crispy's interface design before the iOS redesign

The Challenge

Enhancing the User Experience and Engagement

Before the iOS redesign, Crispy’s web app faced several critical issues that hindered user experience. Performance issues such as slow loading times and frequent crashes frustrated users. The inconsistent and cluttered design, overloaded with unnecessary content and excessive emojis, made it difficult for users to navigate, find dishes, and make informed decisions on pricing and ratings.

The Solution

Overcoming Usability Challenges and Performance Issues

Complex navigation and performance issues frustrated users, making food discovery clunky and difficult. Broken links and the abundance of unclear options with placeholder images further diminished the overall experience. Addressing these usability challenges was essential to creating an intuitive, engaging app that met user expectations.

Figure 2. The redesigned Crispy iOS app

The Design Process

Tapping into Empathy for a User-Centric Approach

We took a user-centric approach to solve these issues, starting with in-depth user research, crafting user personas, user interviews to uncover pain points and preferences. Competitive analysis research, especially focused on Bitesight and Beli app, helped us identify best practices that guided our design process.

Figure 3. User personas crafted for Crispy, highlighting the needs and pain points of native New Yorkers

Figure 4. Through competitive analysis, we identified key areas for improvement in Crispy's feature design

Uncovering Problems: User Feedback and Testing

We iteratively developed low and high-fidelity prototypes and conducted testing with real users to refine the interface. Major improvements included a simplified interface, enhanced search and filtering, and personalized dish recommendations.

We then introduced TikTok-inspired swipe functionality for dish discovery. An the early prototype can be viewed here (link to protopie prototype), then after conducting research, we worked out designs for features such as the social feed for user reviews and item collections to tie them together with existing integrations with third-party delivery services such as Doordash, GrubHub and UberEats. This user-focused design strategy were aimed to address the core issues and create a more enjoyable, streamlined experience.

From Research to Refinement

Building on our user-focused design strategy, we began creating mockups and prototypes, gathering feedback from stakeholders as Vikki and I worked together to refine our approach and mid-fidelity wireframes to ensure a high-quality, user centric final product.

Figure 5. Crispy's brand identity: Aeonik font on the left and signature colors on the right

Ideation

Using insights from research, we brainstormed and generated ideas to enhance the app's functionality, aligning them with the business objectives.

Figure 6. The images illustrate the iterative design development of Explorer screens for food discovery and social feed features. Preview an early prototype ideation made in Protopie here.

User Flow

We used tools like Figma and Protopie to create and test both low-fidelity wireframes and high-fidelity prototypes, iterating based on user feedback.

Figure 7. Flow Diagram: These images illustrate the Crispy App's user flow, encompassing user onboarding, personalization preferences, and the app's features

User Testing

We conducted thorough usability tests with representative users to evaluate the effectiveness of the interface. Feedback from these sessions helped us identify usability issues, refine interactions, and improve the overall user experience.

Figure 8. Heatmap visualization of user interactions on Explorer screen (left) and Grid Search screen (right), highlighting areas of high engagement and attention

Iteration

We refined the design continuously based on user testing and stake holder feedback. By developing multiple prototypes, we quickly identified pain points and made necessary adjustments, enabling us to test, learn, and improve in real time.

Figure 9. Design Iteration Comparison: Side-by-side visualization of Crispy screen design before and after redesign, highlighting improvements in user interface

High Fidelity Mockups

For the high-fidelity mockups, we focused on refining the visual design, ensuring consistency in layout, typography, and color scheme. These mockups were meticulously crafted to reflect the finalized user interface, incorporating all the feedback from previous iterations.

Figure 10. Production-Ready Design: High-fidelity mockups of the app's main screen, illustrating the finalized layout, typography, and visual elements.

Product Launch

We created a landing page to capture early user signups and build anticipation for the product launch. This allowed us to engage potential users, gather feedback, and generate interest ahead of the iOS app release. The landing page also served as a key tool for growing Crispy's waitlist and building momentum for the official launch.

Figure 11. Pre-Launch Landing Page Design: Visual representation of the Crispy app waitlist landing page, created to collect user sign-ups prior to product release. Preview Crispy's Landing Page design here.

Methodology

A Shift from Traditional UX to Lean UX

To streamline the redesign process for Crispy, we focused on rapid iteration and faster feedback loops. This approach fostered close collaboration between designers, developers, and stakeholders, enabling quick responses to user insights. By maintaining alignment with business goals, we ensured an efficient and cohesive development process.

Figure 11. Agile Design Process: Visual documentation of team meetings and design sprints, highlighting the iterative design refinement with stakeholders for both the design and development process

Design & Development Syncs

We worked closely with developers to ensure the final product met design and development syncs to deliver a high-quality iOS app.

Figure 12. Production Quality Check: Visual inspection of design and production versions of the Crispy app, ensuring fidelity to design specifications and quality expectations with the design and development team

Design Features

The main objective of the solution was to develop a user-friendly interface that promotes a seamless and enjoyable dining experience, in line with the project's primary aim of enhancing transparency and effectively addressing allergy concerns.

Gif animation of Crispy's User onboarding and signup/login screens

User Onboarding and Signup/Login

The onboarding process was redesigned to provide clear guidance and highlight key app features. This update ensured users understood the app's value from the start, enhancing engagement and reducing friction.

Animation of Crispy's "dish list" feature

Dish List and Collections

The “Dish List” feature allows users to save, categorize, and share their favorite dishes, tracking their past orders and creating custom collections. This feature fosters ongoing engagement and encourages meal discovery and sharing.

View Prototype

Crispy Main Search Screen Preview

Preview Crispy prototype here

Results

Metrics

Measureable Impact

Over 100 users signed up for the app waitlist within the first month before the iOS product launch.
88% of 25 users expressed a willingness to recommend Crispy.
85% of participants successfully completed tasks during user prototype testing with an average duration of 92 seconds.

Reflection

Prioritizing User Experience Over Features

During the redesign process, I shifted my mindset from concentrating solely on specific features to focusing on achieving the overall user experience and desired outcomes. By incorporating social elements like user reviews and the option to follow friends, we realized will significantly enhanced user engagement and fostered a vibrant community. Additionally, conducting a competitive analysis of apps like Beli and Bitesight helped us to refine our strategy, enabling us to differentiate Crispy while maintaining its unique identity in the market.

Next Steps

Strategic Growth

Crispy should prioritize expanding restaurant and delivery partnerships, introducing features based on user feedback, and leveraging data analytics to optimize the app. The focus should be on driving adoption among restaurants and users, while expanding into major U.S. cities to increase revenue.

Lesson Learned

Key Takeaways and Strategic Guidance

One of the most important lessons I've learned is the value of having a product roadmap and treating it as a dynamic, evolving document. Continuous user feedback has proven vital, highlighting the need for an iterative design approach centered on user needs. I also recognized the significance of strategic partnerships and the role of social features in enhancing engagement and fostering community. Moving forward, data-driven decision-making will be crucial for optimizing our growth and refining our strategies.

Thank You!

I trust you found as much delight in observing this project as I did in crafting it.

Next Projects

iPhone and desktop mockup devices for UX/UI Design project, showcasing Wagamama's customized Ramen ordering for take-out. Includes images of topping and protein selection process.

Case Study

Wagamama

Custom Ramen Order

UX and UI Design

Home page screenshots of KW Realtor marketing landing page, featuring real estate website design.

Case Study

Keller Williams Realty

Landing Page Design

UX and UI Design, Development