SITALAKSHMI
LAKSHMANAN
Website Redesign
Redesigning the mobile and desktop versions of Netrin's website.
ROLE:
UI Designer
DURATION:
4 Weeks
COMPANY:
Netrin Sports Technologies Pvt. Ltd.
TEAM:
Research Development Lead, Graphic Designer, Developer and myself
TOOLS:
Adobe XD, Photoshop, Figma
DELIVERABLES:
High fidelity prototype, UI Kit
OVERVIEW:
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 it's 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 the 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, created, and edited 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.
Key Observations:
- lacked a consistent UI throughout
- designed both in content and visuals only for sportspersons as target users
- while a lot was said abuot the science, there werer'nt enough visuals and scenarios of the product 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 smart performance and fitness tracker
-
I then created User personas of the wide 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 our exprience and knowledge, we immediately started off a on a high fidelity mock up that we thought was most practical and efficient at that point of time.
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.
Video Prototype
DESKTOP
