CARB-X
CARB-X
To re-design CARB-X's brand and website to make it more user friendly, legible, and easier to navigate.
To re-design CARB-X's brand and website to make it more user friendly, legible, and easier to navigate.
How a redesign of brand/website identity and social media promotion is able to bring to light the initiative of global non profit medical research partnership, CARB-X in a way that caters to the specific demographic of the company, while simultaneously meeting their business goals.
Team
Neharika Sidda (Solo Project)
Role
User research & synthesis, UX writer, Client-facing presentation
Timeline
January - March 2023
Deliverable(s)
Website & Social Media Re-Design Mockups & Protoypes
The Problem
The Problem
CARB-X’s website identity lacked credibility as it was hard to distinguish the purpose of the site. Much of the website’s content was inadequately communicated and unstructured, in-part due to poor brand identity and lack of clear navigation pathways.
CARB-X’s website identity lacked credibility as it was hard to distinguish the purpose of the site. Much of the website’s content was inadequately communicated and unstructured, in-part due to poor brand identity and lack of clear navigation pathways.
The Solution
The Solution
Re-think CARB-X’s brand identity with the design of branding materials & social media platforms, while developing a user-friendly website that will help potential users better understand CARB-X and ease navigation of content.
Re-think CARB-X’s brand identity with the design of branding materials & social media platforms, while developing a user-friendly website that will help potential users better understand CARB-X and ease navigation of content.
Define
To start ideating, we first took a look at existing UwH users.
Posts with mentions of what current users wanted/wanted to achieve through the platform gave us an idea of what some of the current and potential future user goals were and how they were trying to attain them.
Using this information we then shifted our focus on the goals and motivations of users, leading to our direction for user research.
The Outcome
Building a strong online presence for CARB-X by; creating a cohesive brand identity, evaluating social media platforms, and a full website redesign presented through high-fidelity mockups, developed through secondary research & user testing.
Building a strong online presence for CARB-X by; creating a cohesive brand identity, evaluating social media platforms, and a full website redesign presented through high-fidelity mockups, developed through secondary research & user testing.
User Research
We collected user research through a short survey with 4 multiple choice questions, inquiring about participants career and educational goals and what resources would help achieve them.
Key Insight: The following top three goals users wanted to achieve
Key Insight: How users believed they'd achieve these goals
Solution 2:
Solution 2: Gamified UX
User Personas
This user research helped in making four personas, to gain a better understanding of UwH’s current & potential future users.
Personas covered a wide range of people and included the following factors:
Solution 1:
Solution 1: Improved Onboarding
Solution 3:
Solution 3: Gain inspiration, share work, give & get feedback
Constraints
There is a plethora of user information and ways of refining this project that we could have looked further into as well as business opportunities to further elaborate on, the basis for most of our constraints relied on the limited timeframe we had to work with.
Accolades
This project was built in collaboration with client, UX was Here, a global UX platform founded by Matt Karakilic, during a hackathon-style design jam organised by Simon Fraser University, Eunoia UX 2024.
Out of 43 teams and nearly 200 participants in Eunoia 2024, 3 teams including my own, made it into the winning teams.
We had the chance to present our proposed solutions during Eunoia UX's closing ceremony in April 2024.
In three days my team and I managed to conduct user research & synthesis, UI concepts & designs for individual screens, working prototypes, and a client-facing presentation.
This experience was a challenging but rewarding opportunity to broaden our understanding of UX through business goals, and has helped me gain a better understanding of the different facets UX design holds.
About
CARB-X
Combating Antibiotic-Resistant Bacteria Biopharmaceutical Accelerator (CARB-X) is a non-profit global partnership trying to better research antibacterial resistance. CARB-X provides solutions for the diagnosis and treatment of fatal bacterial infections by easing the flow between research, innovation and implementation of products for clinical trials. With antibiotics in recent years becoming less effective due to microbial resistance, CARB-X plays a crucial role in furthering studies and research in this field. Funded by a global consortium of governments and foundations, CARB-X’s portfolio has rapidly become the world’s most scientifically diverse, early development pipeline of new antibiotics, vaccines, rapid diagnostics and other products.
CARB-X plays a vital role in furthering studies and research in the field of antibiotic resistance, my re-design's aim was to be very mindful of the target demographic of this site while also making it user-friendly for a wide range of potential users in order for CARB-X’s purpose to be clearly conveyed for those who may want to learn more about such an important initiative.
Ideation
To ideate, I began with looking through CARB-X's current website & compiling some commonly used keywords and themes that can go into re-imagining the brand's visual identity.
As a part of this re-design focused on configuring a visual identity, keywords such as 'pipeline', 'DNA', 'bacteria', 'biology', and 'world' stood out as they hold strong & well recognised imagery.
Research
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Brand
Identity
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Logo
Redesign
Logo design ideation sketches
Motion Graphics
Information
Architecture
CARB-X's biggest user problem was the lack of consitency & clarity throughout its pages and website content. By gathering these sections and organising the information, I was able to set the precedent for configuring the re-designed website's information architecture.
By going through the pages and creating rough wireframes & sitemaps, I put together a Google Doc with all the sections in the website that I was able to merge and configure a sitemap to begin designing the navigation bar.
The document also served as a central area to easily access all the site content which helped me section page content and gauge the amount of content each page would contain.
The result of these processes led to the sitemap below, which informed the organisation of information throughout the site and the design of the navigation bar:
Business
Goals
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Wireframes
To create the low-fidelity wireframes, my initial sketches were based off of my first-hand experience navigating the CARB-X website and through websites with similar infromation pathways, amount of content, and services.
I also found and incorporated specific features which helped serve CARB-X's information architecture, from websites of reference.
I created low & high fidelity wireframes for the following pages: 'Homepage', 'About', & 'News'. These designs informed the rest of my re-design and served as a point of consistency.
Low-fidelity
High-fidelity
Design
System
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Usability
Testing
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Competitive
Analysis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
User
Research
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
User
Persona
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code
Prototype
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hi-Fi
Wireframes
& Protoypes
figma wireframes
figma protoype
Social
Media
Analysis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Social
Media
Analysis
Using the map from exercise 02, the platforms I will be focusing on are Instagram, Twitter, and general advertising such as that seen on television. The following was collected to build an idea of what the social media format for my CARB-X will look like through organizations with similar dynamics and content.
Poster Concepts & Bus Station Mockup:
Covering the advertising format & visual language intended for television and general advertisement of CARB-X
Skytrain Advertising: Translink Transit Police, Vancouver Costal Health, & Douglas College
© 2024 Neharika Sidda | Made with ♡ in Vancouver, BC
© 2024 Neharika Sidda | Made with ♡ in Vancouver, BC