Increase the availability of Hellena’s healthcare app with a landing page

BRIEF

Hellena needs a landing page for its website to serve the main information about the company’s service to public, including its mobile app as the platform for users to consult and purchase prescription medicine from doctors worldwide.

‍

GOALS

Increase the number of new users, including:

• Experience the core advantages offered by Hellena.
• View a diverse selection of doctors from various specialties.
• Download and make use of the Hellena mobile app.

‍

PROBLEM STATEMENTS

Hellena provides access to its services through a mobile app, but there is limited information available to users outside of the app.

1. The lack of a website for the company makes it difficult for potential users to learn about Hellena before committing to downloading the app.
2. This can result in a challenge for new users who are comparing Hellena to other platforms or services and might struggle to find sufficient information.

‍

MY TASK

1. Understand the client’s needs
2. Map the information contents
3. Sketch and design the low & mid-fidelity wireframes in Figma
4. Sketch and design the illustration in ProCreate & Figma
5. Ask for feedback and do revisions
6. Implement the design to Webflow

‍

EARLY IDEATION

Find References

Start with listing out some keywords for this project, which are: landing page, consultation, doctor, worldwide, and download app.

Using these keywords, I searched for references on dribbble and official healthcare websites with max. 3 references.

‍

List Out Information Contents

Based on the problem statement and goals, we acknowledged that this landing page:

‍

SKETCH DESIGN

Wireframes

Based on the two references mentioned above, I created wireframes on FigJam to reflect the information contents.

After comparing the two references, we chose "Landing Page 1" as the preferred wireframe design for the landing page.

1. In Section 1 (purple), users can experience a more seamless reading and viewing experience on "Landing Page 1," as it presents the call-to-action (CTA) and hero image in a 1:1 proportion, in comparison to "Landing Page 2.”
2. In Section 3 (green), it would be more visually appealing to present the healthcare information in three columns, as it will give the impression of having more resources than "Landing Page 2".
3. In Section 4 (orange), utilizing a single image will make it easier for users to read the call-to-action (CTA) and create a more balanced appearance, avoiding the overuse of images on the landing page.

‍

Logo

The idea behind the design of Hellena's logo was to symbolize the company's focus on the healthcare sector. To accomplish this, we decided to incorporate medical equipment into the logo. Given the name "Hellena," we saw an opportunity to utilize the initial "H" to depict a stethoscope, fitting perfectly with the company's focus on health.

‍

Furthermore, hopsital logos were created and meant to be included on the landing page to help establish the brand and convey trust and credibility to potential users and clients in the healthcare industry.

‍

Illustration

Next, we continued with the creation of illustrations. The illustrations were first sketched on ProCreate and then further developed and colored on Figma. Why incorporate illustrations?

• Illustrations aid in establishing a unique consistent visual style.
• Illustrations help to convey abstract concepts & demonstrating functionality, particularly on a hypothetical project such as Hellena.

The illustrations for this landing page served two key purposes:

• Hero Image
  We incorporated a design element from the above references, showcasing the navigation of a mobile app using one hand and demonstrating the abstract concepts with medical equipment (stethoscope, globe, medicine) to help clarify Hellena for users.
  While working on the illustration, developing color palettes was important. After experimenting with green, gray, blue, and yellow, blue and yellow were selected as the color scheme. Blue has strong associations with trust, professionalism, and stability, while yellow represents energy and optimism, harmonizing with blue to create a cohesive and attractive color scheme.

‍

‍

• Creating characters

‍

FEEDBACK & REVISION

Part 1

After developing the wireframes and illustrations to prototype, I sought feedback through comments and held a virtual discussion with a friend who has 1 year of design experience in product design.

With feedback collected, updates were made and listed in the table below.

‍

To improve the user experience, a section outlining the process for consulting with doctors was suggested for inclusion on the landing page. This section should be prominently placed below the hero section for quick visibility and understanding of Hellena's operation, which designed as below:

‍

At last, to further enhance the website experience, it was suggested to design the "Doctor" and "Help" pages, adding an additional dimension to the website beyond just the landing page.

‍

Part 2

Here, one more feedback and revision session hold with purpose to check any other thing that this landing page could be improved before reaching the final design.

Lead user to download the app

To encourage the use of Hellena's mobile app, the landing page could feature a list of available doctors, with the full list only accessible through the app.

‍

Classification for Ease of Use

To improve the user experience in finding the desired articles, a classification system has been implemented. This system allows users to filter articles using chips that cover categories such as life, fitness, sleep, food, and mind.

‍

FINAL DESIGN

Here is the landing page design for Hellena

‍

Follow the suggestion to add additional dimension beyond just the landing page,

‍

DEVELOPING IN WEBFLOW

The landing page prototype has been developed into a responsive website using Webflow, and I was pleasantly surprised by the great experience I had while using the platform for the first time.

Feel free to have a look at the landing page here: Hellena - Responsive Landing Page

‍

FINAL THOUGHTS

I got the hypothetical project brief from a BuildWith Angga (BWA) class with the goal of designing a landing page.

Throughout the process, I was beyond thrilled to encounter many new elements, which led me to learn how to draw people in ProCreate, design illustrations in Figma, and build a responsive website on Webflow (note: my portfolio website was also built on Webflow - big fan of McGuire Brannon).

With these newfound skills, I didn't expect this project to surpass my expectations, but I truly learned a lot and am eager to continue learning in this vast field.