INTRODUCTION

What is Nuanic?

Nuanic is a mind health technology company that creates wearable biosensors and software designed to detect, prevent, and treat chronic stress by monitoring electrodermal activity (EDA). It enables real-time, lab-grade measurement of stress and autonomic nervous system responses in everyday settings. Nuanic's mission is to increase human resilience and compassion, especially for those facing the pressures of modern life​​​.

My role

I was consulted for the Nuanic website redesign, where I was responsible for transforming the site into a more UX- and CX-friendly device-agnostic experience.

My role encompassed the entire design process, from concept development and wireframing to UI and implementation. I collaborated closely with the team to cover the identified business needs.

Scope

The scope of the project was set to be a complete redesign of the Nuanic website, focusing on improving the user journey and applying brand visuals. This included updating the website’s structure, creating a cohesive design language that aligns with Nuanic's brand book, and ensuring that the site effectively communicates the value of Nuanic’s products and services to its target audience.

The time frame for the project was 2 weeks from initiation to completion. Due to time- and budget limitations, the redesign was made in the web platform that was already currently in use.

Deliverables

One main project deliverable was determined:

Website Redesign

WEBSITE REDESIGN

Preview

Content

These are the pages and sections that were designed and implemented.

✅ In scope

➕ Addition

✅ Home (redesigned)

✅ Product

✅ About Us

✅ Contact

➕ For Businesses

➕ For Researchers

➕ Navbar

➕ Footer

➕ Media Resources

Project Considerations

These are the identified qualities and considerations that were identified and/or requested by the client:

Brand Cohesion

The previous landing page had issues regarding consistency towards the brand identity. This was identified in the beginning of the project and extra care was put into following principles in the brand book.

Platform Limitations

Since the project had to be made in Squarespace, there were various technical limitations within the platform. The typical users of the platform are mainly small companies without design experience. Hence, there were times where the lack of customization functionality and version management put a spoke in the wheels of the project. This resulted in a simplification of both function and aesthetics.

Content & Digital Assets

Since we didn't have much lead time margins for content production (and there weren't any designer resources available in the organization), I had to make due with content production within the time disposable. I configured a custom GPT, driven by relevant knowledge files and used it for generating placeholder text, that would be revised and edited towards the end of the project.

Method

The first thing I did was to read about the company and their products. I also analyzed and evaluated the existing company landing page. During these activities I continuously made notes and wrote down questions that I wanted to bring up during the project initiation meeting.

Here’s some examples of the kind of general questions I brought up (excluding specific ones addressing details of the company’s products and website).

What do you like about the current website?

What problems would you like to address with the new website?

Can you explain the customer segments you have identified and approximate how large each group is?

How does the sales process work today? How would you like to develop it going forward?

Can you break down the product offerings you have?

What have you identified as the primary goals for the website?

How do you want the user to feel when they enter your website?

We also addressed project specifics such as time allocations, priorities, scheduling recurring meetings, access to platforms and tools for communication and project administration etc.

These dialogues I see as essential to get a feel for the project and which direction it should go.

I was then able to start planning my tasks and activities, starting with drafting a website structure that aim to address what I’ve learned from previous dialogues. The idea was that this would act as an initial conversation point regarding the specifics of the website. We would thereupon perform some iterations and adjustments to the structures to accommodate for the client’s needs and wants.

One of the structure proposals including notes for discussion points and blue arrows indicating navigational structure.

The client was positive about the structure from the get-go, which actually had its downsides since we ended up having to revisit some structure details later on either way. My conclusion is that it was likely hard to grasp for the client what each section would contain and look like more specifically.

Thus, normally, this is the stage where utilizing wireframes would have been a great solution as it would provide some visual reference for the client to understand the concepts conveyed. As a strategical decision, the limitations in time had instead made us prioritize iterating directly in the web builder. This would reduce the risk of the client ending up only with wireframes as reference, rather than the actual implemented web pages. In hindsight, it was a good decision to omit the wireframing stage and instead focus on an iterative implementation process.

The iterative process would be exponentially longer and more complex using a wireframe feedback workflow on top of the implementation process. Blue = both, red = iterating directly in web builder.

I think that if the feedback process would have been more rigorous, we would have lost considerable time and effort developing solutions and structures that we later might scrap either way. But since we had such a tight loop, I think this proved functional and time-efficient.

Working with the structure was extra important, since the website at the time was only a landing page and without any form of navigation. Deciding on a structure was also necessary in order to implement a navigation bar in the site.

Here's an example of the designed navigation menu on a tablet device.

One valuable resource in the project was a short list of notes and comments on the landing page, written by the company’s lead generation partner. In my opinion they had important insights, so I implemented their feedback and suggestions throughout the course of the project.

From there on we had a smooth process consisting of recurring meetings where we decided on which pages to prioritize working on, me adjusting and updating the group listing the changes and giving access to a password protected live page. Then, I received feedback on the changes and current state of the pages. Meanwhile waiting for feedback I worked in parallel with the other pages, components, content etc.

An example of how the iterative Slack updates looked like.

When having drafted the first version of the Home page we drew the conclusion that it was too far from the visual identity of the brand. The client shared their brand book with me and we decided to, instead of filling in the blanks of what was missing in the brand book, work with what was specified within it exclusively. This was a crucial insight to not steer away from the Nuanic brand and to maintain consistency throughout. It was important that we caught this realization early in the project, so that we saved time and resources.

I think the first version looks pretty good visually, but it’s not sufficiently on brand. Notice the use of transparent elements, inclusion of human faces and expressions, bright colors and attention-grabbing imagery. The brand should instead be less humanizing and friendly and instead put an emphasis on the details of the human skin, clinical measurements and use dark colors to a larger extent.

First iteration of the Home page, that came to see many changes and adjustments.

When we initiated the project, we excluded the implementation of two functionalities: web store and customer login. The reasoning behind it was mainly for the sake of not having a planned sales pipeline for supporting integrated purchasing capabilities directly on the website. And regarding the login features, we made the conclusion that there will very likely be a need for tying that together with the data export webapp product, hence it was not ready for implementation, and it probably won’t be done in Squarespace.

Functionality for setting up a web store inside of Squarespace.

Having just mentioned the sales pipeline, this was something I spent some time on trying to understand better. A company website is such an important part of the CX and needs to be aligned with the actual customer flow and conversion process. We had a meeting discussing it and I shared a flowchart to evaluate whether I understood the process correctly and their thoughts on the process.

Product offerings flowchart. Note that this is not the actual process.

Following conversations regarding the sales process, I proposed the integration of a Calendly embed to improve CX and conversion rate. This was easily implemented, albeit without on-brand formatting, due to the client being on a free plan.

Calendly embed widget.

Regarding the communication within the project; it was managed through Slack and meetings. This proved to be both efficient and fast.

Slack conversation example snippets.

The original landing page was built a while back and using some unconventional methods to circumvent the limitations of the platform. Therefore, it was sometimes difficult to make edits to the stylings, in particular typography, color, forms and buttons. These aspects are adjusted site-wide, meaning that changes cascade throughout every page, including live ones. I had to exercise caution to not cause any problems in the published site that was live. Had the project constraints allowed, it would have been much easier to create and configure a new site and link to the domain, instead of working in the active one.

Left: Highly limited button configuration options. Right: How typography is configured individually depending on context; there's no options for duplicating or bulk-editing styles.

Instead of having to use Lorem ipsum text for the designs or spending too much time on content creation, I created and configured a custom GPT trained on relevant reference information about the company and its product specifications. I used the assistant to create the placeholder content for the website that were missing copy. Upon finishing up the project I put in extra reminders for the client to review information validity.

Chat interface for custom-configurated GPT.

We continued working on implementing the new pages one at a time, adjusting for errors and issues as we went along. Before tying up the project, I reviewed mobile and tablet responsivity, configured details in terms of typography, color and other element standard formatting. We had a handover meeting, made final adjustments and pushed the new site live. I also included some general instructions, comments and advice going forward.

CHALLENGES AND LEARNINGS

LEARNINGS

🛠️ Technical limitations. The biggest challenges in the project were associated with the technical limitations of the web builder. Having a simple and intuitive tool is a benefit for many use cases, especially for entrepreneurs and non-designers. However, with a clear understanding of how I wanted the layout and interactivity to work specifically, I often found myself in situations where I had to circumvent platform functions to achieve what we wanted.

📸 Lack of content. It was also difficult to work with a content bank for text, images, and videos. This meant I had to be really quick at working with media editing and putting together the content required to fill out the sections and pages. This was what held back the end result to the largest degree, since simply replacing images, backgrounds, and illustrations with updated product photos (studio and lifestyle shots) and mockups would provide the user with a much more enjoyable and educational experience. We already know the crucial importance of image and video content, and this project was a reminder of that.

📑 Working with a brand book. Something I had the opportunity to practice a lot in this project was designing with the use of a fragmented brand book. The brand book was really clear on some parts but very lacking in others, which sometimes meant it was hard to tie things together when there were loose ends in the design documentation.

To improve future projects, I will work to employ a more systematic approach when applying the specifics of a brand book or style guide. This means cross-referencing information and using checklists when reviewing and creating new designs. Hopefully, this can help me identify what is missing earlier in the project.

🎉 A successful project. In general, the client was happy with how the project turned out. I think a contributing factor to the project's success was having efficient and responsive communication. Short feedback loops and good update documentation on my part played its role in ensuring that expectations were met throughout the course of the project.