.png){kind=small}
WEBSITE BUILDING & REDESIGN
LEAD UIUX DESIGNER - TAN FANG HUI
FEB 2022 - MAR 2022
TOOLS USED - WORDPRESS ELEMENTOR, ADOBE XD, CANVA
NERVOTEC
02
CONTEXT
Redesign of Nervotec's website.
​
Nervotec is a digital health startup with a technology that can read health vital signs via a face scan. Nervotec adopts a B2B business model, partnering with companies in industries such as construction and insurance to enhance employee and end user health.
THE CHALLENGE
"How do you convey to prospects Nervotec's branding and offerings via their site?"
EMPATHIZE / DISCOVERY & DEFINING
RESEARCH
Due to time and resource constraints, I did not recruit business users for interviews or site usability testing.
From my secondary research findings, content prioritisation was imperative as users spend more viewing time in the top part of the page.
​
​
I conducted a competitive audit of websites similar to Nervotec to have a gauge and understand the current standards to design a better user experience and allow them to compete better.
​
​
​​
Key findings
​
Usability
​
+ Above the fold graphics and copy conveyed competitors' technologies succinctly so that users can understand their value proposition quickly
​
+ Attention-grabbing call to action buttons effectively placed to encourage users to take desired action
​
+ Competitors' websites had a modern and clean look and structure to allow users to scan and find information quickly
​
Branding
​
+ Competitors' websites employed colours, font, style, imagery consistent to their brand identity
+ Being in the medical technology industry, competitors established their credibilities well with supporting data
​
​
Competitors
01
+ Modern, visually appealing
+ Hero auto-play video succinctly conveyed their product capabilities
+ Social proof banners for credibility
+ Easy navigation, good IA
- Slightly wordy at times
binah.ai
02
+ Visually appealing with some 3D graphics
+ Important, unique value proposition within above the fold section
+ Social proof for credibility
+ Easy navigation, good IA
- Carousel banner may lose users' focus
Medable
03
+ Clever, personable welcome blurb
+ Informative hero video with captions
- Slightly wordy at times
- Slightly cluttered at times
MX Labs
04
+ Engaging hero graphics
+ Engaging social proof infographic
+ Easy navigation, good IA
+ Visual hierarchy in news section, easy to focus on recent important news
Datavant
DEVELOP
IDEATION
Information Architecture
After consolidating the site content, I prioritised, grouped and sketched out a revised information architecture with my iPad - a homepage with links to subsequent level 1 pages, and what those subpages would contain.
This was done with principles such as principle of growth and disclosure in mind.
Low-fi wireframes
I did quick iterations of the homepage design to quickly visualise ideas. It was fun as it challenged me to think out of the box, then later converge.
I came up with a proposed homepage design structure that was to allow business users to quickly and easily find and scan information, and lead those who were interested to find out more to the subpages.​
.png)
.png)
I showed the ideation process to Nervotec's CEO and product manager for discussion.
​
- Nervotec feedback that they were prioritising an MVP that would encourage business users to contact them directly for more information
​
- With Nervotec being a relatively new startup, we decided on a long-scroll homepage showcasing Nervotec's one main product offering and about Nervotec as a company.
​
- Nervotec agreed that FAQs and privacy policy were to be on separate pages to reduce the risk of losing the attention of business users.
​
​
​
​
​
Mid-fi designs
​
Subsequently, I created digital wireframes and a mid-fi prototype using Adobe XD based on feedback and research findings.
I prioritised the top part of the page, especially above the fold, for key user and business goals.
​
​
.png)
Due to budget constraints, I was also tasked to build Nervotec's website using Wordpress Elementor.
I had to learn quickly as it was my first time using a website builder and my first time using Elementor. With the time constraints, I designed and iterated in Elementor directly.
Every once a week, I would update the Nervotec team on my design progress and solicit feedback.
For example, the Nervotec team feedback their preference for more relatable images over modern 3D graphics.
.png)
Employing 3D graphics was to allow Nervotec's website to stand out from flat design and their competitors and to create a more engaging user experience, however the 3D graphics needed more work to relate more to Nervotec's technology. Due to time constraints, I took in Nervotec's feedback.
SOLUTION
​
I went for a clean, elegant, friendly and modern approach to accentuate Nervotec's vision and identity as a medtech startup.
​
I chose a sans-serif font Open Sans to be consistent with the typeface of their company logo, and for readability.
I used colours such as white and blue so that business users can easily draw the association of Nervotec being in the medical industry. To stand out from Nervotec's competitors and to highlight different sections of content, I employed gradients of light blue for the background.
.png)
Redesign was done to reduce users' cognitive load.
.png)
I crafted clear and compelling copy to convey Nervotec's offerings in an engaging way.
I structured Nervotec's 'About Us' section in a unique way to create visual interest and to draw attention to their unique value proposition.
I designed Nervotec's coverage section similar to a structure of a newspaper for a relatable touch.
.png)
.png)
One of the core sections was the contact form, where we prioritised the importance of the contact form fields, reduced them by 30% from 9 to 6 and arranged them in a sleek way.
I ensured every page was tablet and mobile responsive so that users could view content well on various screen sizes.
I also built a responsive landing page for Nervotec for Asia's flagship tech festival TECHXLR8ASIA organised by Informa tech and the Infocomm Media Development Authority of Singapore.
​
USER FEEDBACK
"The images have more personality and there's a consistent look and feel that aligns with the medical field."
LEARNINGS
First project as a UIUX designer!
​
To not expect perfection in the first draft and that it's important to iterate based on stakeholder feedback. Having an eye for UI design also takes practice.
​
I learnt more about front-end coding by using Elementor and custom CSS too.
NEXT STEPS
To conduct usability testing with Nervotec's prospects to determine any pain points and new areas of need