PROJECT REPORT:
Revitalizing a website design for a modern brand and streamlined information architecture experience.
ABSTRACT
The project was driven by the necessity to migrate content from an existing series of Life Sciences websites to an enhanced and unified website experience. Throughout the integration of a revitalized, modern brand, the site now exudes a more professional and impactful identity within the Life Sciences industry. Additionally, the objective was to establish an efficient and user-friendly site structure that facilitates seamless navigation of the company’s extensive product and service information.
About the Company.
This life sciences investment company (referred to as “LSC” in this project report) is a renowned industry leader which operates in the realms of genomics, cryogenic storage, automation, and informatics. LSC is committed to accelerating the market entry of groundbreaking breakthroughs and transformative therapies for life sciences organizations worldwide.
*Note: due to proprietary information, images have been replaced with similar instances, and any identifying content has been replaced with lorem ipsum text
Goals & Pain Points.
Primary Goals:
-
Improve Information and Site Architecture
-
Apply a new rebranded print-based identity to a digital platform
-
Migrate content from multiple sites and subdomains
-
Highlight case studies, research and development, and thought leadership
-
Language translations
Pain Points:
-
Because of the high information volume, the current mega menu design is overwhelming and difficult to navigate
-
Services and Products are differentiated from each other, but the distinction is unclear
-
Inconsistent branding experience across multiple sites and subdomains
-
Outdated brand identity with miscellaneous applications of the new print-based identity
Project Challenges.
Due to the extensive number of pages and inconsistent category designs across subdomains, the implementation of page template types became crucial for expediting improvements. Additionally, since the designs initially utilized lorem ipsum placeholder text during content migration, meticulous attention to detail was necessary to anticipate and address potential character count and content discrepancies. This was prominently highlighted when passing designs off to the development team - as content was still being strategized during the entire process.
The transition of LSC's new brand, primarily designed for print applications, posed certain challenges for the functional website design. Some elements, such as off-set text styles, required customized coding for each language and instance, potentially impacting on-screen character display depending on the count. Furthermore, the color palettes employed were not compliant with ADA accessibility standards.
Approach / Methodologies.
UX Improvements:
Traditionally, our company does not often estimate for user testing, and this project fits within that traditionality. Due to this lack of first-hand information and testing, I approached from a “best practices” methodology. Gleaning insight from audience and user behavior audits into the site, as well as combing through LSC’s own repository of analytics, we were able to create a more succinct site design.
Improved information was imperative to enhance the overall information cognition. Managing multiple sites with overlapping content, themes, and frameworks posed a challenge, requiring the consolidation of page types to a manageable number. Additionally, to mitigate cognitive overload, it was crucial to incorporate non-text elements that alleviate the burden on verbal cognition.
User Interface Design:
LSC’s print rebrand (not previously introduced into the digital setting) carried a few notable aesthetic requirements:
-
fluid line assets symbolic of the connectedness of LSC’s life science product and services working together,
-
Limited, muted color palette with reduced color variations
-
A block sectioning/grid approach to layout design
LSC sought to showcase its own leadership by highlighting case studies, research and development, and thought leadership. The website's overall design aimed to evoke a sense of research and scientific expertise. This was achieved through text styles inspired by research journals, emphasizing precise element and layout alignments to enhance the grid-like structure, and drawing attention to dynamic and fluid photography.
Special emphasis was placed on Product Detail pages, which contained extensive content. The priority was to enable users to find information easily and quickly. To address the issue of lengthy paragraphs, the content was divided into two columns: the heading on the left and the rest of the information on the right. This division allowed for effective grouping of information and created an "outline" appearance, enabling users to quickly navigate through available categories without distractions from the content within each section.
Wireframes.
Low-fidelity
High-fidelity
Deliverables.
LINKS
Icons:
-
Science by DTDesign from <a href="https://thenounproject.com/browse/icons/term/science/" target="_blank" title="Science Icons">Noun Project</a>
-
Science by Made by Made from <a href="https://thenounproject.com/browse/icons/term/science/" target="_blank" title="Science Icons">Noun Project</a>
-
Science by Imron Sadewo from <a href="https://thenounproject.com/browse/icons/term/science/" target="_blank" title="Science Icons">Noun Project</a>
-
element by Manthana Tharapornsakulwong from <a href="https://thenounproject.com/browse/icons/term/element/" target="_blank" title="element Icons">Noun Project</a>
Images:
-
Photo by <a href="https://unsplash.com/@joelfilip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joel Filipe</a> on <a href="https://unsplash.com/photos/FURFqaPGs3U?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/fr/@scottwebb?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Scott Webb</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/@nci?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">National Cancer Institute</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/@thisisengineering?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">ThisisEngineering RAEng</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/es/@yassine_khalfalli?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Yassine Khalfalli</a> on <a href="https://unsplash.com/photos/_c70Nhh6p44?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/@nci?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">National Cancer Institute</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/@joelfilip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joel Filipe</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
-
Photo by <a href="https://unsplash.com/@drew_hays?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Drew Hays</a> on <a href="https://unsplash.com/collections/HS2PZ4mVbWo/biology?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>