KriyaBio — Fostering the Digital Presence of a Pharmaceutical Start-up
KriyaBio is a pharmaceutical start-up based in Switzerland. The company offers an innovative drug delivery solution that is built around its patent. They are looking to give their first steps in carving their online presence not only to reach out to investors and potential partners but also to stand out from their competition.
Timeline: 4 weeks | Role: UX/UI Designer| Client: KriyaBio
Software: Adobe Illustrator, Adobe XD
Together with Frederico Dias, my colleague as an Ironhack Alumnus as well, we undertook this project with excitement since it seemed to have so much potential and good-will from the get go. It was one of those things that started with a chat in an airplane.
📓 BRIEFING
We started this project by having a meeting with its CEO — Sakthikumar Ragupathy — to not only explore all the expansion possibilities for Kriyabio but also obtain as much knowledge and understanding of their business as possible. It is important for me and Frederico to feel and know the industry, their audience and respective services so that the final deliverable matches expectations of who sought us. It’s an approach we like to take, know our clients and establish a connection that motivates us to work.
The goal of the pharmaceutical start-up was very clear — create an online presence and develop its branding in a way that shouts and speaks the values of its team members — innovative, daring and business oriented. Therefore, if the for of a How Might We question, we always had it present in our minds:
How Might We communicate Kriyabio’s values — innovative, daring and business oriented — through a logo and website?
🔎 BENCHMARKING ANAYSIS
#Link to Benchmarking Analysis
Like usual, and this is a practice that I personally like to spend some time on, we carried out a benchmarking analysis of the companies that were operating in the same industry as Kriyabio. Sakthikumar made sure to provide us with a list of the companies he had already set his eyes on.
This analysis was divided in two different segments — the competitive benchmarking which consisted of a closer look to the competitors’ website and overall feel and appeal whilst the strategic benchmarking looked into catching inspiration from companies that communicate similar values such as Kriyabio’s.
ℹ️ INFORMATION ARCHITECTURE
From the moment we took on the project, Kriyabio had already established quite concretely the information that they wanted to have displayed in the website — Homepage, Technology, Company, News & Contact. We did not question that but wondered what kind of tasks a regular visitor would take on when visiting the website. So we put our minds to work and cleared up along with the company the following points:
- The Purpose: the website is meant to be a direct link between the start-up and potential investors; therefore, the content that should be displayed is merely informative as in “hello, we are this start-up and want to chat with you”. Thus, we also needed a clear Call For Action.
- The Message: the goal of the website is to provide with enough information about the technology, explain its added value and why it is relevant. It should communicate the values of the team in a simple and straightforward way.
Content
The content of the website had as well been given to us beforehand. That in itself, was one of the challenge in the scope of Information Architecture — Kriyabio had already developed a a lot of content during their project development, so how could we make it fit in the site map that had been set? Some of the content can be categorised as it follows:
- Technology Features
- Commercial Advantages
- Advantages
- Company Leadership
- How Does it Work.
- etc.
Card Sorting
In order to better organise the content within the website, a card sorting test was carried out. What we did was to pinpoint the 5 categories that had been previously defined and create several cards to testers.
The results of that test can be found in table below Popular Placement Matrix showing how our testers organised their cards. In total, 13 participants took the test.
Site Map
With the results coming from the Card Sorting, we created the following Site Map. Not all the cards that were placed had a majority agreement as some of them were relatively even distributed — case in point for Advantages, How Does It Work and Commercial Benefits.
I summoned my inner entrepreneurial spirit and put myself in the shoes of an investor — as an investor, what do I want to read first thing; what is the hook that will make me stay in a start-ups website? For that reason, Commercial Benefits were brought in to the Homepage as the main attention grabber. Then, the Technological Advantages and How Does It Work ended up under Technology as additional and more in-detail information.
🏗️ PROTOTYPING & TESTING
Now that we had defined the site map, it was time to finally put the work in creating a prototype. We started by designing an easy 5 screen prototype with the goals set for:
- Testing the display of information
- Starting to frame the visual appeal of the website
- Testing the call for action messages spread in the website
The homepage includes an introductory video upon request by Kriyabio plus a clear message about what the companies does.
On the navigation bar, a clear Contact Us call for action is displayed, one that is spread all over the website.
Also in the Homepage, the commercial benefits of the technology are in display as a hook and attention grabber. In case investors are interested, they are guided to the Technology page upon pressing Find Out More.
The Company page included a series of tiles with the team members of the start-up and scientific advisory board. The learnings after testing were that in this page, there wasn’t a call for action anywhere, which could be more encouraging and inviting to whoever visited that section.
🎨 BRANDING
Kriyabio needs to develop its branding in a way that shows they are daring, innovative and it permits the company to stand out from the rest.
As we’ve seen during our benchmarking phase, similar companies have little to no difference from one another: similar colours and quite a conservative tone. Hence, there is an opportunity for Kriyabio to be different, yet, maintaining its purpose of pushing a new technology in the pharmaceutical industry.
Colours
Initially, we had suggested colours that would completely stand out from the rest of the competition — shades of indigo and purpose. The other option was to opt for green.
After presenting several options, KriyaBio believe that green would suit them better as a representation of their knowledge, innovation pedigree and science oriented business.
Typography
The applied font in logo and website is Nexa — Bold and Light which should represent the innovative aspect that Kriyabio brings to the industry. It is modern, elegant and business oriented.
RESULTS
The final deliverable included both the desktop and mobile version of KriyaBio’s website.
🖥️ Desktop
The Technology Page was designed in a way that contains enough and vital information but it doesn’t carry too much weight visually. So we created tiles with a Hoover option, when the mouse passes the tiles, it revels more information.
The company page also suffered a few changes from the mid fidelity version. We noticed that a Call for Action was missing so we added one more button “Get In Touch” next to the pictures of the team members. The easiness to contact them should always be there.
Finally, in the News Page, a “tool bar” was placed to make it easy to navigate through old and new articles and events.
For the mobile version, a few tweaks were made. The goal of those tweaks was to assure that the user of the mobile version of the website understands that he/she needs to click on the tiles for further information.
🔑 LEARNINGS
This project brought a lot of learnings for us, specially when it comes to client management. Something that we attempted to do was to keep KriyaBio involved in the whole process, constantly asking for input and providing with feedback. This was specially true for the mid fidelity of the website, in which we always got the green light. Upon showing the high fidelity, that’s when the “tweaks and changes” never stopped, especially when it came to details regarding text and position of elements. We need to to be ready for these type of situations and assure the company that the company has really thought about things through so that we can all be as efficient as possible.
All in all, it was a great experience that not only adds to the skills acquired but also fostered my team work spirit.
Thank you so much for reading! :)
