Home

CircaGene

ux/ui client study

Project
overview

Client

CircaGene offers DNA test kits to gain insights into your health, life, and risks for hereditary diseases while focusing on customer privacy throughout the whole process.

Duration

4 Weeks

the challenge

This project will focus on rebranding and design of the eCommerce website for our client, CircaGene. The website will be reconstructed to increase brand awareness and trust, and clarify their unique selling proposition while emphasizing the conversion opportunity (ordering a DNA test kit).

My role

I was involved in the research, synthesis, ideation, prototyping and testing phases and, finally, preparing the deliverables handoff for the client.

tools

toolstoolstoolstoolstoolstoolstools

deliverables

  • Design guide
  • Annotated High-Fidelity wireframes and prototypes (Desktop & Mobile)
  • Logo design
  • Packaging design
  • Health report design

Team

  • Casian Pascu (UX/UI)
  • Lindsay Ambrose (UI)
  • Monika Bishwakarma (UI)

Project Approach

Old version
New Version
Quick summary
Our team used the Double Diamond Design Process for this project and always kept the clients involved and engaged in the process during the four weeks.
The first two weeks we focused on research to discover the pain points of the existing website, defining what additional knowledge we need, and synthesizing the data gathered; starting with usability tests of the existing website, competitive analysis, information architecture, and understanding the product.


The following weeks we had two rounds of iterations and testing after developing prototypes from low-mid fidelity (first round) to high fidelity (second round) screens. We explored divergent brand designs and we implemented the final brand design in the high-fidelity screens for the second round of testing. After the last tweaks and iterations, we successfully delivered the new designs to our client.
Client Testimonials
It was a pleasure to work with Casian Pascu. Casian is easygoing and witty. He has an excellent sense of UX/UI design that matches his communication and organizational skills. Casian is always quick to integrate feedbacks to ensure deliverables follow the client's vision. Casian's commitment to quality and perfection is the cornerstone to his success. He delivered in time what I needed and with very high quality, even surpassing my high expectations. I recommend Casian unequivocally; it was a great experience working with him!
I have worked with Casian for 4 weeks in my UI/UX web designs. In addition to superior design and technology skills, Casian brings a level of professionalism that is hard to match—he delivers peace of mind to my enquiries and recommendation. Casian has met every challenge faced on to create sharp, contemporary designs. I recommend him gladly.
François Paillier
CEO & Co-Founder of CIRCAGENE ltd.
Jackeline Palma
COO & Co-Founder of CIRCAGENE ltd.

Discover

Understanding the product

First, we needed to understand the existing product, and the best way to do that was through our client's knowledge. This way we found out of how their services work, how we can differentiate them to make it clear for the users, and how does the eCommerce website work along with their patented technology for data encryption.

Discover

Usability tests & Interviews

We interviewed ant tested the existing website with eight users (remote and in-person) and we found the following:
  • 100% of users did not trust the current site
  • Users did not understand the company or what it sold
  • Users found the checkout experience confusing & frustrating
  • Users could not differentiate between the services
  • Users did not understand the value or benefits of the services

Discover

Competitor research

At this stage, we focused on exploring six direct and five indirect competitors to find strengths, opportunities, and patterns. Some aspects that we considered are information architecture, type of content and visual elements included on their website, and tone of voice used.

define

Defining the problem

To define our problem, as a group we created a problem statement:

The user needs to understand what services CircaGene provides and compare and differentiate them to buy with trust, confidence, and ease as the current platform does not cater to their needs.

Information architecture

The competitive analysis helped with the type of content that we wanted to include on the website, to align with our goals.

We used card sorting for the creation of site map, hierarchies, categorizations and navigation. It was important to know what type of content the user wants to see on the website so they can trust the company and buy their services.

We gathered this information from our initial user interviews and kept refining it throughout the following iterations, starting with the most important pages on the website: home, about, and services.
website content

develop

Low-Fi Wireframes & Prototype

Having all the information needed to include in our design and a clear definition of our problem and understanding of the services offered, was enough to start designing our first low to mid-fidelity wireframes and build a prototype.

View prototype

User testing (round one)

We carried out nine user testing (remote and in-person) on our first round of prototype. We provided the user with a series of tasks to complete during the tests and post-test questions to follow up. We had a lot of success in this round, but also many opportunities for improvement on the content and design. Users were missing the following:
  • Brand transparency
  • Clearer information about the products
  • Testimonials/reviews from actual users
some of the successes from our participants in the first round

9
participants

100%
quick and easy checkout

88%
easy site navigation

70%
would trust with their genetic data

Visual exploration

We diverged and explored a series of moods for branding. We took this further and had 25 participants voting and sharing their feedback on our designs.

We presented the mood boards and logos to our clients to gather their feedback before showing them the results from our users. Our clients had a big decision to make moving forward - choosing a style that represents their values and at the same time inspires trust and transparency to the users.

Moving forward, we decided to help them make that decision by designing two style tiles from the most voted and better-received mood boards.

Style tiles & Logo

High-Fi Wireframes & Prototype

With the final logo and a chosen style, we were ready to iterate once more for the second version of wireframes and prototypes.

We implemented the feedback gathered from our users and our clients into the second version, along with more content.

View prototype

User testing (round two)

By this time the COVID-19 outbreak became pandemic and we started working remotely, but this didn't stop us from remote testing. We had 15 participants, from which 12 were moderated via Zoom and 3 were unmoderated via Lookback.io.

The new design was well received and we found some opportunities for improvement. Below you can find some stats of the successes. Overall we hand a 15% improvement on user trust in the company from the first round of tests.

15
participants

100%
understood the services and their benefits

85%
would trust with their genetic data

deliver

High-Fi Prototypes

Health report & DNA kit packaging

Conclusion

Final reflections & recommendations given

We've made huge progress in four weeks time, but this is how far we could take the product. I'm really proud and happy that we got through these intense weeks as a team.

This was a challenging product but we solved the problems that CircaGene was facing:

  • increasing brand awareness and trust by 85%
  • clarify their unique selling proposition while emphasizing the conversion opportunity
  • complete rebranding of their website

But we went beyond that and had done more:

  • increased brand transparency and credibility with lab information, industry-standard certifications, and privacy and security information
  • delineated the benefits of DNA testing and of each service available
  • leverage customer feedback and testimonials for brand credibility
  • redesign the test kit packaging and the health reports to align with the brand tone of voice
  • made the web design responsive for mobile screens

Future recommendations for the client:

  • Hire a science copywriter (users still want layman’s terms)
  • Create video content of customer's testimonials
  • Keep adding customer reviews from Trustpilot
  • Live chat function & toll-free helpline for users
  • Use the design system to implement brand identity across all platforms

Key learnings

In a project like this, I learned that I need to understand the product properly, test it and empathize with the user as soon as possible, to confirm initial assumptions and specify the goals and start with the right foot. Workshops with the clients are a good method to understand the product in the early stages, enable progress on a particular challenge, and keep the stakeholders involved and engaged all the way through the project.

I refined my knowledge of logos, documents, and web designs. I learned how to use tool never used before, like Lookback.io, and how to manage tasks and time better during a pandemic.