top of page
Scene 10.jpg

VISUAL & UI DESIGNER

COMPANY

Netrin Sports 

Technologies Pvt. Ltd.

TEAM

R&D Lead, Graphic Designer, Developer, 

Myself

DURATION

4 weeks

TOOLS

Adobe XD, Photoshop

Netrin - Redesigning the company website

Netrin, a wearable fitness brand, leverages a chest device and mobile app to track physiological and motion data. Originally serving athletes and coaches to boost performance, Netrin evolved its product positioning and wanted to also cater to everyday users, businesses, and the beauty sector.

Objective

  • Redesign Netrin's website to better reflect the company's new vision - to appeal to a broader audience including individuals, corporate, and beauty segments.

  • Enhance product visibility through improved visuals, and ensure clear information delivery.

Outcome

  • Utilized personas and competitive analysis to define visual requirements for the new user segments.

  • Led the visual design, from directing the photos to be shot to wire-framing.  

  • Prototyped high-fidelity wireframes with a new and consistent UI, responsive in both mobile and web.

Research

To define a new visual direction, I first sought to quickly understand the athletic fitness tracking market and its varied user base. I set the following research objectives for myself:

​

  • Understand the new business goals and product positioning.

  • Assess the existing website for usability pain points and opportunities.

  • Empathize with and learn about each of the new user segments and their needs.

  • Identify relevant UI trends to keep apace with market leaders and competitors in the athletic fitness tracking market.

​

To achieve these objectives, a comprehensive and in-depth analysis was conducted using a varied mix of research methods, focusing on the product, users, and market.

UI Audit

The initial phase involved a thorough UI audit of Netrin's original website, which, given the product's novelty, was basic and functionally focused with limited attention to visual design. Key observations highlighted several areas for improvement

  1. Inconsistency in UI design across different pages.

  2. Content and visuals were tailored exclusively towards athletes, neglecting broader potential user bases.

  3. Despite detailed descriptions of the underlying science, there was a notable absence of visuals or scenarios demonstrating the product in action.

  4. The information presented lacked clarity and an effective visual hierarchy.

  5. The color schemes and overall design did not align with Netrin's identity as a cutting-edge performance and fitness tracker.

Personas

I crafted personas for each of the new user segments - athletes, trainers, individuals, corporates, and the beauty sector, highlighting their unique needs and preferences. This foundational work ensured the website's design would be versatile enough to serve a wide range of users, from performance-oriented athletes to aesthetics-focused beauticians.

​

Competitive Analysis

I conducted a competitive analysis of market-leading wearable fitness apps, such as Firstbeat, Suunto, and Humon. This analysis provided insight into current UI conventions and trends in health and fitness applications, revealing strategies for crafting a UI that resonates with both core athletes and professional audiences like corporates and beauticians.

​

Final Prototype

Facing time constraints, we bypassed the ideation phase and directly proceeded to create a high-fidelity mockup, leveraging our experience and knowledge to choose the most practical and efficient design approach available at that moment.

Clean UI with a clear and distinct visual hierarchy

The final prototype utilizes the sans serif font Montserrat to ensure consistency, professionalism, and ease of reading. The design incorporates lime green highlights, aligning with the product's active and sporty essence.

Handpicked visuals edited to suit various user seggments

By showcasing the product in various scenarios such as swimming, sleeping, yoga sessions, and athletic training, the aim was to make Netrin universally appealing. Efforts were made to ensure inclusivity and avoid visual biases related to gender, race, age, and other factors.

Reflection

  • Reflecting on this project, I valued the opportunity to empathize with and view the product through multiple lenses, reimagining its application across diverse user backgrounds.

  • Collaborating closely with a developer taught me the importance of creating an effective and scalable website prototype, offering practical insights into coding constraints.

  • Additionally, designing with a focus on the broader company vision and mission provided a deeper understanding of strategic brand alignment and product positioning.

bottom of page