Abhishek Patrabansha
Vyomite Website — Case Study
Vyomite is a small startup that provides web services. I redesigned their existing website to create a modern, cohesive, and user-friendly interface that reflects the brand, simplifies navigation, and increases engagement with prospective clients.
This project followed my practice cloning sites to build web-design skills; during my internship I redesigned Vyomite’s existing website to give it a more modern, cohesive look.
Role
UI/UX Designer (Intern). Solo design with quick feedback from peers.
Tools
Figma, basic icon set.
Duration
Vyomite (Personal Company) / 3 months
Problem Statement
The homepage didn’t clearly show what Vyomite does and the primary contact action was buried below the fold. As a result, visitors struggled to find services and had to follow a long path to contact, reducing engagement and lead potential.
- Scroll Cue Visibility: Tested and refined visual cues to help users notice more content below the homepage fold.
- Homepage Animation Selection: Chose an animation that enhanced visuals without distracting from core content.
- Feedback clarity: Feedback from reviewers/mentors was often unclear, requiring additional discussion and interpretation to fully understand and apply suggested changes.
Goals
This redesign sharpens Vyomite’s brand presence and levels up the browsing experience for prospective clients.
- Create a modern, professional design that reflects the brand.
- Maintain a consistent visual style and easy-to-navigate layout.
- Boost engagement by making the site appealing and accessible for potential clients.
Design Process
To guide the redesign, I followed a structured process to ensure the design was modern, cohesive, and user-friendly. Although formal surveys or interviews were not conducted, my research included:
- Research & Inspiration: Collected samples of modern website designs to explore trends and gather ideas.
- Wireframing / Low-Fidelity Design: Created basic layouts to organize content and structure the site effectively.
- Design System: Developed consistent typography, color schemes, and UI components to maintain visual cohesion.
- High-Fidelity Design & Prototype: Applied the design system to create the actual website mockups and interactive prototype.
- Testing: Reviewed the design for usability, visual consistency, and overall user experience before final implementation.
Key Takeaways
- Collecting design references early helped define a clear visual direction.
- Establishing a design system improved consistency and sped up the high-fidelity design phase.
- Considering screen flow and user flow ensured the site was easy to navigate and aligned with user expectations.
- Testing the prototype confirmed the final design was intuitive, visually appealing, and aligned with the brand.
Research & Analysis
Collected and studied modern website examples to recognize key design patterns, usability principles, and creative techniques influencing current digital aesthetics.
Concepts, Sketching, Wireframes
During this phase, I explored different layout ideas and visual structures to find the best way to present the company’s services and information clearly. I started with low-fidelity wireframes to organize content and establish the site’s flow. These early sketches helped me experiment with navigation paths and screen flow before moving to detailed design.
This stage was crucial for identifying opportunities to improve usability and ensure a consistent, intuitive user experience. It laid the foundation for building a cohesive design system and high-fidelity prototype.
User Flow
Toward the end of the project, I learned about user flow and applied it to key sections. I ensured that:
- [Fig 1] Uploaded files or entered content remain saved if the user goes back to edit other information, preventing loss of work.
- [Fig 2] Conditional scenarios were accounted for, such as showing available jobs if any exist, or displaying a contact form if no positions are open.
These considerations made the website more flexible, intuitive, and user-friendly, allowing visitors to navigate and complete tasks without frustration.
[Fig 1]
[Fig 2]
Visual Design
The next plan of action was to create colour palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.
StyleGuide
Primary Colors
Gray Colors
Secondary Colors
Typography
Aa
Avenir Next
Heading 2
Avenir Next
32 px
Heading 3
Avenir Next
24 px
Body
Avenir Next
16 px
Caption
Avenir Next
14 px
Home Page Overview
A focused homepage with a clear value statement and prominent CTAs, followed by a concise services grid, client testimonials, and featured projects to help visitors evaluate work and contact quickly.
- Hero: Bold purple hero with a concise headline, short subhead, and two CTAs.
- Our Services: Bold purple hero with a concise headline, short subhead, and two CTAs.
- Testimonials: Bold purple hero with a concise headline, short subhead, and two CTAs.
- Featured Projects: Bold purple hero with a concise headline, short subhead, and two CTAs.
Work Page Overview
A focused homepage with a clear value statement and prominent CTAs, followed by a concise services grid, client testimonials, and featured projects to help visitors evaluate work and contact quickly.
Service Page Overview
A focused homepage with a clear value statement and prominent CTAs, followed by a concise services grid, client testimonials, and featured projects to help visitors evaluate work and contact quickly.
About Page Overview
A focused homepage with a clear value statement and prominent CTAs, followed by a concise services grid, client testimonials, and featured projects to help visitors evaluate work and contact quickly.
Blog Page Overview
A focused homepage with a clear value statement and prominent CTAs, followed by a concise services grid, client testimonials, and featured projects to help visitors evaluate work and contact quickly.
Prototype
Interactive Prototype
I created an interactive prototype to demonstrate the website’s user flow and visual consistency. It showcases key interactions like exploring services and contacting the company, helping test usability and gather feedback before development.
Test: Validation, Usability, Feedback
The validation was conducted through an iterative process, and adjustments were made based on mentor feedback to ensure the website’s usability, visual consistency, and content clarity.
Key Insights & Adjustments:
- Navigation & Layout: Simplified page structure and menu flow for easier navigation.
- Visual Consistency: Standardized typography, colors, and spacing across all sections.
- Interactive Elements: Refined buttons and interactions for smoother user engagement.
A final validation was conducted after completing all pages to ensure the website met the intended goals: a modern, cohesive design that reflects the brand and enhances the user experience.
Conclusion
Through careful refinement of visual cues and animations, the website achieved a cohesive and engaging design, improving navigation and user experience while staying true to the brand. This experience reinforced the importance of attention to detail, user guidance, and iterative design for future projects.