Kickoff
‍

First I started out by asking the co-founder some initial key questions about the product and the users.
‍
Secondly, I reviewed the application's prototype in Figma to get some great ideas to work on.
‍
It was clear that the goals we wanted to accomplish was to present what the brand was about and how the products work with the goal of increasing the app users.
‍

Design Process

Project Management

After setting up the design process, I divided the whole project into 3 phases:
‍
‍Initial Phase: Research & Ideation
‍Creating Phase: Prototype & Test
‍Final Phase: Visual Design & Handoff
‍
I used Trello for the tasks for each phase of the project and set deadline for each to make sure the final design is ready to handoff in two weeks.
Every day I had a team discussion with the co-founder where we went over the process and she gave me her suggestions on designs and her inputs on the ideas. The co-founder and I followed an agile project management framework for the project which helped me in iterating and testing the ideas faster since I only had two weeks to finish it.
‍

Research

Competitive Analysis

In order to construct a comprehensive design, I researched about the prominent competitors' websites. After looking at the three major competitors, I learned that the look and feel of such websites are different in Pakistan compared to US so I came up with a mood statement to match the taste of Pakistani users.

I found out that most of the main competitors show their statistics using data visualizations on the home page to gain the trust of new users. They also use strong graphical images and bold headings. Their overall design is clean and colorful.

Major takeaway

• Promoting the benefits of the product to both user groups in different pages
• Booking appointment directly on the website
• Easy and fast user flow

Expected Mood Statement

• The users feel excited when they interacts with the website.
• The users learn about the product and how it can help them.
• The users are encouraged to see what’s coming up next and will be willing to spend more time on the website.

UX Audit on Current Design

‍
Since I had no experience with the existing website, I started with identifying key problems in the current design with my fresh eyes and I did a UX audit to understand the pain points. I found areas of improvement in the live experience of the site, and listed my findings as the following:
‍

• Design a stronger hero and a slogan that matches it
• Change the typography, colors and icons
• Keep the benefits of the app, testimonial and product mockups
• Move booking an online consultation section to a different page
• Redesign the What Is PatientFIRST section
• Improve CTAs
• Use flow diagramming for a better layout
• Present the app's benefits for physicians as well as patients in another page

The original Website

Flow Diagram

Information Architecture

Improvements on IA

• To make the human interaction more immersive with the website, I experimented with the hierarchy of the home page to give a cleaner transition to the sections and better visibility to the content.  
• Booking appointment and benefits for patients were specific information for patient users so they were moved to the
  patients page.
• One problem with the current design was that it couldn't gain the trust of new users. To solve this I decided to have a stat section that shows the number of users, where they are located on a map, and the organizations that recognized the company to build credibility and trust.
• Another way to increase the conversion rate was using creative hero images and slogan on every page to remind the users about the benefits of the app. Every page started with a hero section.

Site Map

Wireframes

The next step in the process was to move the pages to Figma to explore possible design alternatives and create a high fidelity wireframe that shows how the content hierarchy would be displayed. The general idea for the design was to have a story and answer the following questions — What we are, who we are, what our product does, how it can help you.
‍

Hero Section

The most challenging part was the hero section on the home page. I wanted to create a positive first impression. For the hero image, I chose a high-quality glowing photo of a phone and stethoscope for branding. I put the photo in the background of the slogan that immediately tells the user what PatientFIRST is. I kept the purple themed color for all pages but darkened it a little bit to match the glowing vibe of the hero section.

Key Highlights

1. Tried to have more impact with fewer words
2. Easy scanning by using images and icons/texts side by side
3. Coherent layout— every page was visually different from each other but still felt a part of the whole
4. Added two new pages to let the patient users choose a physician and request for appointments directly on the website

Usability Test

Refinements based on Usability Testing

1. Adding buttons under the physician/patient icons
2. Creating tags for the physician's specialities
3. Date and time on the left, form on the right side
4. Customized reviews for each physician
5. Adding where the physician is to the list of physicians

Takeaways

Being the only designer on the project, working on PatientFIRST was incredibly rewarding. I got to experiment with some of my creative writing and graphic design skills to create creative content and visuals.
The primary difficulty I had while designing was creating a product without interacting with users prior to design. I had to trust the existing user findings and depend on the co-founder's ideas. I feel that although there may be a better solution out there, I designed an experience that works well for most users, and it definitely made the co-founder happy.

What did I learn?

• Don't sacrifice the quality of work in a fast-paced project.
• The taste of users vary in different countries.
• A design that is exclusively to meet the business' goals may fail. Never forget the users.
• Constant communication is very important especially in a time sensitive project.