Introduction

The Diffuser Mobile App is a comprehensive application designed to enhance the experience for users. It allows users to control their diffuser devices, explore various essential scents and create personalized schedules. This case study focuses on the UI design process for the Diffuser Mobile App.

User research

Before diving into the UI design, a thorough user research phase was conducted to understand the target audience, their preferences, and pain points. The research revealed the following key insights:

• Users seek a visually appealing and intuitive interface that simplifies the diffuser control process.

• Users desire easy access to essential oil information, including benefits, usage, and safety guidelines.

• Users value personalized experiences and the ability to create custom schedules for their diffusers.

Design goals

Based on the user research findings, I established the following goals for the UI design:

• Create a visually engaging and modern interface.

• Ensure ease of use and intuitive navigation for seamless control of the diffuser device.

• Enable users to personalize their experience through customizable schedules and presets.

Wireframing and prototyping

I began by creating paper wireframes to establish the overall app structure and layout. These wireframes helped visualize the hierarchy of screens and interactions. Once the wireframes were reviewed and refined, I moved on to creating the low-fidelity prototypes using interactive design tools. The prototypes aimed to simulate the app's functionality and gather user feedback.

Interface components

The UI design incorporated various interface components to provide an intuitive and delightful user experience:

• Home Screen: The home screen presented essential controls to activate, disactivate and add a new diffuser. It also displayed the current sensitivity of each diffuser and provided quick access to personalized schedules.

• Shop: The shop page contains all the available diffusers for sale as well as all the company's products (e.g. scents). It also includes available offers, and products that will be available soon. Finally, there is a list of bestsellers products. From this page, the user can add the products that interest him to his basket in order to make a purchase, as well as promote a product through a link

• Schedules: The schedules section allowed users to create and manage personalized diffuser schedules based on their preferences. Users could set specific times, days, and intensity for each diffuser.

• Settings: The settings screen provided options to customize app preferences and access help resources.

Visual design

The visual design phase focused on creating a visually appealing interface while maintaining a balance between aesthetics and usability. I developed a style guide that defined the color scheme, typography, and visual elements consistent with the brand image of the diffuser product line. The design aims at simplicity in combination with small details

Iterative design and testing

Throughout the design process, I conducted iterative testing and incorporated user feedback. Usability tests helped identify pain points, navigation issues, and areas for improvement. The feedback loop ensured that the final UI design was intuitive, user-friendly, and aligned with user expectations.

Mockups

The mockups consist of two different themes, light and dark.

Light theme

Dark theme