Website Redesign
Redesigning the mobile and desktop versions of Netrin's website.
ROLE
DURATION
COMPANY
TEAM
DELIVERABLES
TOOLS
OVERVIEW
UI Designer
4 Weeks
Research Development Lead, Graphic Designer, Developer and myself
High fidelity prototype, UI Kit
Adobe XD, Photoshop, Figma
Netrin is a wearable fitness company that quantifies your body's physiological and motion parameters using a chest wearable and mobile app. While their current user base included athletes, coaches, and other sports persons who use the product to enhance their performance, Netrin aimed to expand its user base to include individuals, corporate and beauty segments.
My role here was to redesign the existing website to include these new business goals, after careful analysis of their potential user base and competitors.
PROBLEMS:
SOLUTIONS:
-
The previous website lacked a consistent UI design that neither did justice to the company's vision nor to the market trends.
-
The website was specifically designed for sportspersons as the target audience, it didn't accommodate for individuals, corporate or beauty segments.
-
There weren't enough visuals of the very product and its use cases.
-
There was a lack of clarity and visual hierarchy in the information presented
-
Redesigned the new design layout, colors, fonts, overall spacing, and user flow
-
Ensured that the new UI was trendy, versatile enough to suit varied audiences, and in line with the company's vision.
-
Handpicked and helped edit visuals that visually represented the product in its multiple uses and for varied users.
-
Established a clear hierarchy of information displayed.
DESIGN PROCESS
Coloured circles indicate my areas of involvement in the entire process.
RESEARCH
To start with, I conducted a UI audit of the existing website. Considering that the product was quite new, the website had been basic and functional, with not as much thought to the visual design. The following were my key observations:
-
Lacked a consistent UI across all the pages.
-
Designed both in content and visuals only for sportspersons as target users.
-
While a lot is mentioned about the science, there weren't enough visuals and scenarios of the actual product itself and it's use cases.
-
Lack of clarity and visual hierarchy in the information presented.
-
Colour schemes and design did not feel in sync with the company's vision as a performance and fitness tracker.
I then created User personas of the variety of projected target users - athletes, trainers, individuals corporates, and beauty segments. These personas helped me understand and acknowledge the varied needs, goals, and preferences of different categories of users. It helped me start the design with the forethought that the website must look, speak and feel versatile enough to accommodate the needs of both athletes and aestheticians.
I also did a competitive analysis of other wearable-based fitness applications in the market like Firstbeat, Suunto, Humon, etc. This gave me an idea of existing conventions and market trends in the UI of websites such healthcare and fitness apps. It helped me understand how they created a UI that appealed both to core athletes as well as corporates and buauticians.
DEFINE
Post-research, I was able to define the key UI requirements for the new website:
-
Have a consistent UI style.
-
Establish a clear and distinct visual hierarchy.
-
Use fonts and colors that are professional, trendy, sporty as well as easily scannable.
-
Ensure that the UI style is tasteful and versatile enough to suit varied categories of users like the corporate segment, beauty segment, sports segment, etc.
-
Edit/Create images that speak of the product and its use cases for each of these user categories.
Due to time constraints, we couldn't ideate or explore various UI styles. Based on our exprience and knowledge, we immediately started with a high fidelity mock up that we thought was most practical and efficient at that point of time.
FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE ·
FINAL PROTOTYPE
A clean UI with a clear visual hierarchy
We used the sans serif font Monserrat to give a consistent and professional look, with a focus on legibility and scannability. The UI is interspersed with highlights of lime green that resonates with the Conqur product, in its active and sporty spirit.
Carefully handpicked and edited visuals to suit various user categories
By curating content and selecting images that depict the product being used in various scenarios, like swimming, sleeping, yoga sessions, athletic training, etc.; we tried making Netrin look appealing for various user bases. We also ensured that we were mindful to avoid biases like gender, race, age, etc.
MY OBSERVATIONS
-
It was a great experience to empathize and view a product through multiple lenses - reimagining its use cases for various backgrounds of people.
-
I learned how to work with the developer to create an effective and scalable website prototype, getting a taste of the practical constraints that come with coding.
-
It was also insightful to look beyond a singular product and design for a company's vision and mission.