Helio Sleep

Stop losing sleep over snoring and sleep apnea

Image alt tag

About Helio Sleep

Helio Sleep is an online provider of sleep apnea tests and other devices to improve sleep in customers. Helio Sleep is a small company serving in Washington and Texas and looking to expand its service to more states. The company is also looking to add more products in the future to help those diagnosed with sleep apnea and other sleeping disorders.

Problem

  • The layout of products and information makes it difficult to showcase the products.

  • Users do not have enough information on products to make the appropriate decision.

  • The checkout process includes many flaws that make it difficult for their users to order products.

Solution

  • Conduct a Heuristic Evaluation to determine some of the flaws and strengths of the current design.

  • Improve the product landing page by  redesigning the layout

  • Include more accurate and helpful information regarding the different products.

  • Redesign the checkout process to improve instructions and clarity.

Process

Heuristic Evaluation
Discovery
Ideation
Wireframing
Hi-fidelity
Prototype
Developer handoff

Role

UX/UI Designer in a team of 4

Project Details

Project Duration: 4 weeks

Platform

Desktop
Tablet
Mobile

Tools

User Testing
Figma

1. Discovery

1.1 Heuristic Evaluation

As a team, we did a Heuristic evaluation of their current website. I was in charge of evaluating the tablet versions of their website and found many flaws that did not seem present on other platforms. Vice versa, other platforms found flaws that were not an issue in tablets. This made it very clear that we needed to design for desktop, tablet, and mobile as the different versions of the website had different problems.

Helio Sleep

Lofta Product Page

1.2 Competitive Analysis

Lofta is another online store that sells sleep apnea tests and devices to customers. By looking at their website, their products have clear information and checkout process. This is helpful to know and understand the eCommerce of sleeping devices and how they function.

2. Ideation
Helio Sleep

Desktop Product Page

2.1 Products Page Low Fidelity Wireframe

My role for the low fidelity wireframes was designing the product page for Helio Sleep. During this process, I made sure to include space for future products to avoid any spacing problems in the future.

Decision:

  • Include a short description of the item

  • Provide pictures to help users easily recognize the product

  • Include concise pricing in the preview of the devices

  • Create a filter category so that it can help users sort through more products

Helio Sleep

Desktop Product Description Page

2.2 Product Description Low Fidelity Wireframe

Additionally to creating the main product page, I also design a page that included the description of the devices. This page would further go into detail about the Night Owl Sleep Apnea Test.

Decision:

  • Present information in an organized design to avoid confusion between products

  • Show and describe product features, steps, requirements, and reviews

  • Provide a path to complete the checkout process so that it is clear and effective.

  • Include pictures to help them understand how it works

  • Add a reviews section so that other users can get feedback from other costumers

2.3 Translating Design to Mobile

To make sure the same design translated into Mobile, I made sure that the card sizes, font, and other components were the same size across devices Although some items had to be rearranged, it still preserved its core function and size.

3. Design

3.1 Style Guide

To ensure consistency across the different devices and screens, the team developed a style guide to match the current Helio Sleep Website. This made it easier for the team to design colors, fonts, and sizing for components.

3.2 High Fidelity Wireframes

With the style guide set, the team started working on designing the final UI for the screens. We used the orange color sparingly to make sure that it wasn't too harsh for the users. We also decided to use blue for the main CTA actions and majors descriptions.

4. Prototype

4.1 Prototype

Using Figma we developed a prototype of the Helio Sleep website while focusing on the product ordering process. I made sure to clean up any small spacing, color, misspellings, functionality, and user error before testing with any users. We internally tested to make sure that the prototype did not cause users to get stuck on a screen. Finally, we made sure that the checkout flow was easy and a straightforward process for the user.

Helio Sleep Desktop Prototype

Helio Sleep Mobile Prototype

4.2 User Testing Plan


Objective

Conduct an unmoderated study through User Testing to see if users are finding everything clearly and how we could potentially design it better to help the user. The goal is to successfully learn about the NightOwl Home Sleep Apnea Test and purchase it.

Questions

  1. Find the NightOwl Home Sleep Apnea Test and purchase it.

  2. Was it hard to find the product?

  3. Did the layout have the information needed for you to buy the product?

  4. Did the website give the requirements needed for the product?

  5. The website was easy to maneuver through

  6. Was it easy to choose the product?

  7. Was it easy to add it to the cart?

  8. Was it easy to follow the checkout process?

  9. Are there any ideas or thoughts you might have that you think we might find valuable?

4.3 User Testing Results


Results

The user testing results showed that all participants were able to successfully complete the ordering process. Additionally, all participants also found all the information very easy to read and find. Overall, the design worked well for the users.

4.4 Developer Handoff

Once our design proved to be successful, we began to annotate the notes needed for the developers. The team made sure that all the interactions in the design were described as how they should react on the website. Sizes for pictures and spacing were also added to the designs so that developers have an accurate reference of sizes. Lastly, we also included HEX codes for the colors of items as they change states.

5. Reflection

5.1 Looking Back

This design made me take into consideration the needs of the user in an e-commerce setting. Users need to be able to understand products quickly and throughout in order to make a decision while purchasing. Additionally, the steps required to purchase a product online need to be straightforward and concise. This will lead to less users getting lost or confused while shopping online

5.2 Looking Ahead

Using the knowledge of designing for e-commerce, will give me a better perspective into how to make better decisions in other problems. Understanding what the user needs in order to make a decision while shopping is very important. This research will lead to better design to make their shopping experience more enjy