Case Study:
Saatva Mobile App - iOS Design
Project Overview
Challenge
Saatva has proved itself a competitor in the mattress industry with a luxury product and unbeatable services such as mattress delivery, removal and trial period.
However, the responsive website doesn’t include a task-based user experience for customers who have already done their research. It entails information and an educational experience for those who are are the beginning funnel stages of purchase.
Objectives
- Design a mobile app that gives customers the ability to purchase when they are ready, receive notifications for sales, and have their account information all in one place.
- Develop a strategy that allows for users to have all the information at their fingertips in an organized, minimalist design that is easy to navigate.
- Increase mattress purchases for users that have already done their research and decided they want to purchase Saatva but want to do so one their own timeline.
- Extend coherent branding for the Saatva that aligns with the values of current and potential customers.
Project Scope
Tools
Team
Product Design Process
Define the Scope
First, the overall architecture and content for the Saatva app were drawn out in an organized fashion. This set the course for the design process and user experience discovery. After that, business goals were set to justify the project inception. This beginning discovery phase included:- Design of app for task-based Saatva customers
- Increase in conversions for mattress purchases
- Digital marketing strategy expansion for mobile user experience
- Vastly expand brand awareness for Saatva in the digital landscape
- Be the first of our competitors to develop a robust app user experience
Discover User Needs
Since the user personas were already pre-defined, there was no need to reinvent the wheel. Instead, I zeroed in on the user experience journey as if I was already a customer using the app. There were different phases in determining user needs including:- Empathizing with the users in their search for the perfect mattress for a good night’s sleep
- Mapping out userflow journeys that illustrated each step in the process of using the app
- Figuring out each of the questions that resonate with the user and they are going along using the app
- Answering those questions and coming up with a solution to their problem
Design the User Experience & Product
After the scope and user experience has been clearly defined, then comes time to draw out the first iterations of what the visuals will look like. These early designs are what save Saatva time, money and resources in the long run. This important stage includes:- Lo-fidelity wireframes and sketches that determines general content needs for the app
- Medium-fidelity mockups for refinement and added UX copy for the overall look
- Branding and style guides that define the color, typography and aesthetic for each of the components
- Hi-fidelity mockups that give a clear illustration of what the app will look like in the final phases
Develop Product Prototype
The protoyping phase was when the static designs became animated and breathed life into the app for the first time. This was a simulated user experience that mimicked how the app would function during the onboarding and beginning phases of the shopping experience. This final phase unveils how the Saatva customer will decide on which product that is suited for them. The final Saatva app updates on sales, promotions and other mobile features that interests them on a personal level.1. Define the Scope
Determine User Needs
After discussing common problems and issues with the customer service department and interviewing user testers on pain points, the following needs were determined to improved the user experience on the Saatva app:
- Inability to track delivery progress
- No wishlist feature to save products later intended for purchase
- Account dashboard lacks information hierarchy and isn’t easy to navigate
- Product images are not as clear and consistent as they could be
Develop a Sitemap (Information Architecture)
The sitemap provides a visual representation of what the information architecture (IA) will look like after the content is organized. With the sitemap, I sorted out the content in the Saatva app to help users navigate systematically to avoid them getting lost or confused. A sitemap helps me visualize the relationship between the app content and hierarchy.
2. Discover User Needs
Empathy - Develop a Userflow Journey
This is the phase where we imagine that we are the users using this app and literally put ourselves in their shoes. Using userflows, the diagrams each display how a user takes their path when moving through the product.
The following scenarios were developed based on the user’s movement mapping out each step and each thought or concern they had along the way:
- Scenario #1 – User wants to buy a mattress from Saatva but isn’t ready to pull the trigger quite yet because they are still researching other competitors
- Scenario #2 – User already decided that they want a Saatva mattress, but is waiting for the right time
- Scenario #3 – User has already purchased a mattress but is interested in purchasing a headboard or matching bedroom furniture (or other Saatva products)
3. Design the Proudct
Wireframes to Branding
My process of design from wireframes to branding is not always linear, but a quantum progression. As I begin to draw out what the app is supposed to look like, sometimes there are ideas for how a more hi-fidelity component should appear. Then, I go back to a different artboard and start drawing out the creative for the branding.
However, the wireframes, mockups and UI styling all gets compartmentalized and prototyped according to each stage of the user experience.
Wireframes (Lo-Fidelity)
After some research, I made hand-drawn out sketches or basic flat designs that make ideas more tangible. These are the beginning phases to get a bigger picture of the functionality of the app. After that, the hand-drawn sketches turn into digital lo-fidelity mockups.
Lo-fidelity mockups can be used to perform user testing and can always be backtracked for functionality replicates. At this stage, there is a lot of potential trial and error making it easy to edit and revise the user experience.
Med-Fidelity Mockups
After there is more consensus on how the user experience is to be designed, then I can add more content such as copy, graphics and components to the med-fidelity mockup.
Branding & Style Guides
There was already a branding style guide in place by the marketing department at Saatva, but there were a few aspects that needed to be added to make it approved by the App Store.
The branding was an iteration on the pre-established aesthetic, but with added colors and typography that accounted for semantics and refinement of components to the Saatva app itself.
The UI Kit was a continuation of the branding utilizing the same logo, color scheme and moodboard as the Saatva brand ecommerce but with some newly designed components.
Hi-Fidelity Mockups
Hi-fidelity mockups were created just as we were just about to head to the finish line. This creates excitement and offers visual balance to the application.
Saatva iOS App Prototype
Case Study: Saatva Mobile App
iOS Design
Project Overview
Challenge
Saatva has proved itself a competitor in the mattress industry with a luxury product and unbeatable services such as mattress delivery, removal and trial period.
However, the responsive website doesn’t include a task-based user experience for customers who have already done their research. It entails information and an educational experience for those who are are the beginning funnel stages of purchase.
Objectives
- Design a mobile app that gives customers the ability to purchase when they are ready, receive notifications for sales, and have their account information all in one place.
- Develop a strategy that allows for users to have all the information at their fingertips in an organized, minimalist design that is easy to navigate.
- Increase mattress purchases for users that have already done their research and decided they want to purchase Saatva but want to do so one their own timeline.
- Extend coherent branding for the Saatva that aligns with the values of current and potential customers.
Project Scope
App design,
user experience research, branding
Tools
Figma, Photoshop
Team
Self-directed, with feedback from peers
Product Design Process
Define the Scope
First, the overall architecture and content for the Saatva app were drawn out in an organized fashion. This set the course for the design process and user experience discovery. After that, business goals were set to justify the project inception. This beginning discovery phase included:- Design of app for task-based Saatva customers
- Increase in conversions for mattress purchases
- Digital marketing strategy expansion for mobile user experience
- Vastly expand brand awareness for Saatva in the digital landscape
- Be the first of our competitors to develop a robust app user experience
Discover User Needs
Since the user personas were already pre-defined, there was no need to reinvent the wheel. Instead, I zeroed in on the user experience journey as if I was already a customer using the app. There were different phases in determining user needs including:- Empathizing with the users in their search for the perfect mattress for a good night’s sleep
- Mapping out userflow journeys that illustrated each step in the process of using the app
- Figuring out each of the questions that resonate with the user and they are going along using the app
- Answering those questions and coming up with a solution to their problem
Design the User Experience & Product
After the scope and user experience has been clearly defined, then comes time to draw out the first iterations of what the visuals will look like. These early designs are what save Saatva time, money and resources in the long run. These steps include:- Lo-fidelity wireframes and sketches that determines general content needs for the app
- Medium-fidelity mockups for refinement and added UX copy for the overall look
- Branding and style guides that define the color, typography and aesthetic for each of the components
- Hi-fidelity mockups that give a clear illustration of what the app will look like in the final phases
Develop Product Prototype
The protoyping phase was when the static designs became animated and breathed life into the app for the first time. This was a simulated user experience that mimicked how the app would function during the onboarding and beginning phases of the shopping experience.This final phase unveils how the Saatva customer will decide on which product that is suited for them. The final Saatva app updates on sales, promotions and other mobile features that interests them on a personal level.
1. Define the Scope
Determine User Needs
After discussing common problems and issues with the customer service department and interviewing user testers on pain points, the following needs were determined to improved the user experience on the Saatva app:
- Inability to track delivery progress
- No wishlist feature to save products later intended for purchase
- Account dashboard lacks information hierarchy and isn’t easy to navigate
- Product images are not as clear and consistent as they could be
Develop a Sitemap (Information Architecture)
The sitemap provides a visual representation of what the information architecture (IA) will look like after the content is organized.
With the sitemap, I sorted out the content in the Saatva app to help users navigate systematically to avoid them getting lost or confused. A sitemap helps me visualize the relationship between the app content and hierarchy.
2. Discover User Needs
Empathy - Develop a Userflow Journey
This is the phase where we imagine that we are the users using this app and literally put ourselves in their shoes. Using userflows, the diagrams each display how a user takes their path when moving through the product.
- Scenario #1 – User wants to buy a mattress from Saatva but isn’t ready to pull the trigger quite yet because they are still researching other competitors
- Scenario #2 – User already decided that they want a Saatva mattress, but is waiting for the right time
- Scenario #3 – User has already purchased a mattress but is interested in purchasing a headboard or matching bedroom furniture (or other Saatva products)
3. Design the Product
Wireframes to Branding
My process of design from wireframes to branding is not always linear, but a quantum progression. As I begin to draw out what the app is supposed to look like, sometimes there are ideas for how a more hi-fidelity component should appear. Then, I go back to a different artboard and start drawing out the creative for the branding.
Wireframes (Lo-Fidelity)
After some research, I made hand-drawn out sketches or basic flat designs that make ideas more tangible. These are the beginning phases to get a bigger picture of the functionality of the app. After that, the hand-drawn sketches turn into digital lo-fidelity mockups.
Lo-fidelity mockups can be used to perform user testing and can always be backtracked for functionality replicates. At this stage, there is a lot of potential trial and error making it easy to edit and revise the user experience.
Med-Fidelity Mockups
After there is more consensus on how the user experience is to be designed, then I can add more content such as copy, graphics and components to the med-fidelity mockup.
Branding & Style Guides
There was already a branding style guide in place by the marketing department at Saatva, but there were a few aspects that needed to be added to make it approved by the App Store.
The branding was an iteration on the pre-established aesthetic, but with added colors and typography that accounted for semantics and refinement of components to the Saatva app itself.
The UI Kit was a continuation of the branding utilizing the same logo, color scheme and moodboard as the Saatva brand ecommerce but with some newly designed components.
Hi-Fidelity Mockups
Hi-fidelity mockups were created just as we were just about to head to the finish line. This creates excitement and offers visual balance to the application.
Saatva iOS App Prototype
Case Study: Saatva Mobile App iOS Design
Project Overview
Challenge
Saatva has proved itself a competitor in the mattress industry with a luxury product and unbeatable services such as mattress delivery, removal and trial period.
However, the responsive website doesn’t include a task-based user experience for customers who have already done their research. It entails information and an educational experience for those who are are the beginning funnel stages of purchase.
Objectives
- Design a mobile app that gives customers the ability to purchase when they are ready, receive notifications for sales, and have their account information all in one place.
- Develop a strategy that allows for users to have all the information at their fingertips in an organized, minimalist design that is easy to navigate.
- Increase mattress purchases for users that have already done their research and decided they want to purchase Saatva but want to do so one their own timeline.
- Extend coherent branding for the Saatva that aligns with the values of current and potential customers.
Project Scope
App design, user experience research, branding,
Tools
Figma, Adobe Photoshop
Team
Self-directed, with feedback from peers
Product Design Process
Define the Scope
This beginning discovery phase includes:- Summary of project and its primary objectives
- Definition of business goal metrics (KPIs)
- Budget for digital production and advertising
- Product deliverables for website and digital project
- Potential constraints and challenges to project progression
Discover Content Needs
Finding out content needs includes:- Listing information architecture and visualizing user site map
- Simulate a userflow journey within a digital product
- Research competitors and discover their strengths and weaknesses
- Define the design hierarchy of what goes in what order
- Develop user personas of a specific target audience and demographic
Develop Product Prototypes
This important stage includes:- Lo-fidelity wireframes and sketches to determine general content layout
- Medium-fidelity prototypes to refine and establish overall look
- Hi-fidelity mockups that simulate real-time user experience
Design the Product
This stage includes:- Branding guidelines including logo, typography, and color schemes
- High-fidelity mockups that simulate real-time user experience
- Finishing touches and polishing up the aesthetic
1. Define the Scope
After discussing common problems and issues with the customer service department and interviewing user testers on pain points, the following needs were determined to improved the user experience on the Saatva app:
- Inability to track delivery progress
- No wishlist feature to save products later intended for purchase
- Account dashboard lacks information hierarchy and isn’t easy to navigate
- Product images are not as clear and consistent as they could be
2. Discover User Needs
Empathy - Develop a Userflow Journey
The following scenarios were developed based on the user’s movement mapping out each step and each thought or concern they had along the way:
- Scenario #1 – User wants to buy a mattress from Saatva but isn’t ready to pull the trigger quite yet because they are still researching other competitors
- Scenario #2 – User already decided that they want a Saatva mattress, but is waiting for the right time
- Scenario #3 – User has already purchased a mattress but is interested in purchasing a headboard or matching bedroom furniture (or other Saatva products)
3. Design the Product
Wireframes to Branding
My process of design from wireframes to branding is not always linear, but a quantum progression. As I begin to draw out what the app is supposed to look like, sometimes there are ideas for how a more hi-fidelity component should appear. Then, I go back to a different artboard and start drawing out the creative for the branding.
However, the wireframes, mockups and UI styling all gets compartmentalized and prototyped according to each stage of the user experience.
Wireframes (Lo-Fidelity)
Lo-fidelity mockups can be used to perform user testing and can always be backtracked for functionality replicates. At this stage, there is a lot of potential trial and error making it easy to edit and revise the user experience.
Med-Fidelity Mockups
After there is more consensus on how the user experience is to be designed, then I can add more content such as copy, graphics and components to the med-fidelity mockup.
Branding, Style Guides and UI Kit
The branding and UI Kit was an iteration on the pre-established aesthetic, but with added colors and typography that accounted for semantics and refinement of components to the Saatva app itself.
Hi-Fidelity Mockups
Hi-fidelity mockups were created just as we were just about to head to the finish line. This creates excitement and offers visual balance to the application.