Redesign of a biotech company's webpage

COMPANY

Predicine

ROLE

UX Designer + Copywriter
(Freelance Project)

TIMELINE

2023 (4 weeks)

Predicine is a molecular insight company developing genomic profiling tests for cancer diagnostics and monitoring. I undertook small project of redesign of their covid testing landing page, wherein I dramatically simplified the user experience, focusing on core interactions, and simplified navigation.

I also redesigned a prototype of their product ‘Predicine Swift’ which is a web app that helps in Covid testing, and managing results.

Primary Goals of Redesign

  1. Create an experience that is consistent with their competitor apps.
  2. Have an impactful landing page and have a fluid experience while using Predicine swift.
  3. Be a great native web app. Take advantage of the platform, which means it is accessible everywhere, and to focus on easy interactions.
  4. Focus on finding things fast.
  5. Reduce the scroll length considerably.
  6. The app to load fast in spite of having heavy visuals/videos.
Old-Home-snapshot
Old-Home-snapshot-2
Old-Home

14000px
in height

Screenshots from the current website

Restructring the Information Architecture

After the analysis of the current website state, it became apparent that the website would benefit from restructuring. There were a lot of paths that were leading to the same destination. The task was to simplify the paths without a drastic change. The goal was to build an intuitive information hierarchy, improve the design and navigation throughout the website. 

IA_Old-1

Old IA

IA_New-1

Restructured IA

Layout and hierarchy

Once I had a clear understanding of the content that needed to be presented on the website, I began sketching and wireframing how this content could be arranged into distinct sections.

Sketches

I created rough sketches of each page and explored different layouts and visual hierarchies to determine the most effective way to present the information.

Sketches
Sketches-2

Anatomy

After confirming with the stakeholders, it was decided that the design should communicate the unique benefits and scope of the company’s speciality and services.


To communicate the reliability of the company to viewers, added two sections: testimonials from organizations, and a directory of the company's global network of clinic locations.

Anatomy

Wireframes

Next, I moved on to creating wireframes, which allowed me to refine the structure and layout of the website even further. I paid close attention to the user experience and ensured that the content was organized logically and efficiently, with clear visual cues to help guide the user through the site.

Throughout the process, I collaborated closely with the development team to ensure that the design was feasible and that any technical limitations were taken into account.

Wireframe-01
Wireframe-02-1

Visual Design

After 6 rounds of iterations, we landed on the final designs

We strategically developed design features on the homepage. Buttons on the homepage stand out from the primary brand colors to draw attention and match the company logo. The icons and faded background images also mimic the logo shape, delivering a cohesive feel. These design features are used throughout the website.

We communicated with the development team in parallel as they requested changes to the design due to current coding limitations.

This design provides users with a visually engaging experience while also reducing the need for excessive scrolling by 50%, resulting in an improved user experience, particularly on mobile devices.

Predicine-Home-01
Predicine-Home-02
Predicine-Home-05
Predicine-Home-03
Predicine-Home-04
Predicine-Home-06

Hero section

  • This would be the first part of the website where the latest offerings of the brand would be mentioned.
  • This can have a single image or a carousel of multiple, and each leads to a separate page by itself.
HERO-PREDICINE

Predicine Swift

Predicine's team's satisfaction with the designs resulted in another project, Predicine Swift, a web app that enables users to manage Covid test reports and passports for travel. I redesigned the basic screens to provide a user-friendly experience for navigating Predicine and using Predicine Swift.

predicine-swift-all

Reflections

This project is currently in experimentation and I wrapped the project up by helping with testing and QA. Overall, this project was fairly straightforward and I felt positively challenged and motivated throughout the whole process. While this design has not yet had the opportunity to get built, aspects of it have been folded into the existing website.