My Framer Site

Home

A modern website that brings traditional learning to life.

Vyasa Vidyalaya is a dynamic school in Chennai dedicated to fostering holistic development. With a focus on critical thinking, creativity, and academic excellence, the school provides a balanced curriculum that nurtures both scholastic and co-scholastic growth. The serene campus, state-of-the-art facilities, and personalized faculty attention create an environment where students excel in all areas, preparing them for future success. The school proudly showcases its students' achievements, creativity, and memorable moments.

Agency

Brandcode

Project type

Education / Website / Mobile View

View project

https://www.vyasavidyalaya.org/

Role

Ui / Ux Designer

Tools

Figma / Wix

Timeline

July - November 2024

My role & impact

I led the creation of a unique and modern website for Vyasa Vidyalaya, focusing on a clean, image-driven design that reflects the school's ethos. Research revealed that most education websites prioritize content over design, so I aimed to create something distinctive. I developed wireframes to ensure an intuitive user experience. Throughout the process, I maintained clear communication with the development team to ensure smooth execution and alignment with the project's vision.

Research

User Interviews

I conducted user interviews with potential website users through casual, day-to-day discussions. A selected few insights are showcased here.

Competitior Analysis

I worked on this competitor analysis to identify key takeaways and insights that we can adapt and implement in our website. By studying their strengths and areas for improvement, we can refine our approach to enhance user experience and improve navigation,

Takeaways

The website has a well-structured layout, making navigation easy and content accessible.

Key details are included to help parents make informed decisions.

The notice board is a useful addition to the homepage, keeping important updates easily accessible.

The pop-up for the upcoming event is a nice addition, keeping visitors informed immediately.

The homepage is neat and uncluttered, making navigation smooth and user-friendly.

Tags like "Trending" and "Fast Delivery" on products provide quick, useful information, helping users make faster purchase decisions.

Improvement area

Human images add warmth, but campus shots would better showcase the school environment.     Admissions CTA Could Be Stronger – The admissions process is clear, but more prominent CTAs could enhance user engagement.

The cursor animation feels optional and doesn’t contribute much to the experience.

Adding more real images of people and the school environment would enhance authenticity and engagement.’

Color consistency could be improved for a more cohesive visual experience.

Takeaways

Lifestyle images alongside product images helps customers visualize the

product in real life.

The "Watch & Buy" feature, with a video and specs, gives a quick product overview.

Displaying product recommendations as chips is a remarkable touch.

The homepage is neat and uncluttered, making navigation smooth and user-friendly.

Tags like "Trending" and "Fast Delivery" on products provide quick, useful information, helping users make faster purchase decisions.

Improvement area

CTAs should stand out more for better conversions.

Aboutus

Avenir (Regular / Semibold)

Avenir
(Regular / Semibold)

ABCDEFGHIJKLMNOQRSTUVWXYZ

abcdefghijkmnopqestuvwxyz

1234567890

Aa

Questrial (Regular)

ABCDEFGHIJKLMNOQRSTUVWXYZ

abcdefghijkmnopqestuvwxyz

1234567890

User Testing & Iterations

At first, I designed with a straightforward approach, but the client wanted the homepage to feel more playful while keeping the rest of the site formal. In the iteration, I introduced more CTAs to enhance engagement and guide users more effectively. I also avoided a rigid pattern in organizing the content, allowing for a more natural and engaging flow. Additionally, I used bold typography as a stylistic choice to add character and make certain sections stand out.

Key Learnings

Effective Collaboration

Good communication and teamwork were important for this project. Staying aligned with the client helped make design updates smooth and avoid confusion.

This was my first e-commerce
project, and I had to learn how
to incorporate features that build
trust and improve analytics in a
competitive market.

Navigating Shopify

Since Shopify was new to me,
getting familiar with its structure
and capabilities was a challenge. I explored its tools and functionalities, while implementing the required
features efficiently.

Refinement Process

After testing the initial design, I had to iterate a second option before it worked. Making changes based on feedback helped shape the final design

Since Shopify was new to me, getting familiar with its structure and capabilities was a challenge. I explored its tools and functionalities, while implementing the required features efficiently.

Iterative Improvements

I worked closely with the client,
ensuring clear communication
throughout the process. We followed
an iterative approach, making small
refinements at each stage

Balancing Visuals & Usability

The final design was both visually appealing and user-friendly. By maintaining this balance, the website effectively catered to user needs while strengthening the brand’s identity.

I worked closely with the client, ensuring clear
communication throughout the process. We followed an iterative approach, making small refinements at each stage.

My Other Works

Let's Connect

niviarul29@gmail.com

My Workshop

Let's Connect

niviarul29@gmail.com

My Workshop

Competitior Analysis

Takeaways

Improvement area

Takeaways

Improvement area

Avenir (Regular / Semibold)

Avenir (Regular / Semibold)

Aa

Aa

Questrial (Regular)

Questrial (Regular)

User Testing & Iterations

Key Learnings

Effective Collaboration

Good communication and teamwork were important for this project. Staying aligned with the client helped make design updates smooth and avoid confusion.

This was my first e-commerce project, and I had to learn how to incorporate features that build trust and improve analytics in a competitive market.

Navigating Shopify

Since Shopify was new to me, getting familiar with its structure and capabilities was a challenge. I explored its tools and functionalities, while implementing the required features efficiently.

Refinement Process

After testing the initial design, I had to iterate a second option before it worked. Making changes based on feedback helped shape the final design

Since Shopify was new to me, getting familiar with its structure and capabilities was a challenge. I explored its tools and functionalities, while implementing the required features efficiently.

Iterative Improvements

I worked closely with the client, ensuring clear communication throughout the process. We followed an iterative approach, making small refinements at each stage

Balancing Visuals & Usability

The final design was both visually appealing and user-friendly. By maintaining this balance, the website effectively catered to user needs while strengthening the brand’s identity.

I worked closely with the client, ensuring clear communication throughout the process. We followed an iterative approach, making small refinements at each stage.

My Other Works

Let's Connect

Let's Connect

Let's Connect

Let's Connect

Avenir
(Regular / Semibold)

This was my first e-commerce
project, and I had to learn how
to incorporate features that build
trust and improve analytics in a
competitive market.

Since Shopify was new to me,
getting familiar with its structure
and capabilities was a challenge. I explored its tools and functionalities, while implementing the required
features efficiently.

I worked closely with the client,
ensuring clear communication
throughout the process. We followed
an iterative approach, making small
refinements at each stage

I worked closely with the client, ensuring clear
communication throughout the process. We followed an iterative approach, making small refinements at each stage.