Hooli Software is a company that build Web Application to Mobile Application across all platforms and devices.
Role
Product Designer – User Research, Visual Design, Interaction and Prototype
Tool Kit
Adobe XD, Adobe Illustrator and Adobe Photoshop
The Problem
Hooli Software is a start up company and they didn’t have a website, which created a significant gap in its online presence. Without a central platform to showcase their products and services, they struggled to communicate their brand identity and engage potential customers. This lack of an online presence made it difficult for users to find information or understand what the company offered. As a result, Hooli was missing out on opportunities to establish credibility and build trust with its audience. Additionally, without a website, they lacked a structured way to drive leads and conversions, limiting their growth potential. The absence of a digital platform made it clear that Hooli needed a modern, user-friendly website to improve visibility, engagement, and overall business success.
The Solution
To bridge Hooli Software’s digital gap and support their growth goals, I designed a modern, user-friendly website that clearly communicates their brand, showcases their offerings, and builds trust with potential clients.
The final solution includes:
• A clean, professional homepage that introduces Hooli’s identity and highlights key services • Dedicated pages for products and services to help users easily understand what the company offers • Clear call-to-actions (CTAs) strategically placed to guide users toward inquiries, demos, or contact forms • A responsive, mobile-friendly layout to ensure a seamless experience across devices •Simple navigation and visual hierarchy to make the site easy to explore, even for first-time visitors
This design not only establishes Hooli’s online presence but also functions as a lead-generation tool and credibility anchor—enabling the company to attract new opportunities, drive conversions, and position itself as a legitimate player in the software space.
The Process
Site Map
Components
Developing the Designs
Establishing the Core Layout Instead of starting with low-fidelity wireframes, I jumped straight into drafting the basic layout to quickly visualize the structure and flow. This allowed me to define key content areas and screen hierarchy early on.
Refining with Visual Elements Once the layout was in place, I began incorporating typography, colors, and spacing to align with the visual direction. I adjusted components as I designed, letting usability and clarity guide the visual evolution.
Component Creation & Reusability As the design progressed, I identified repeating UI patterns and built reusable components to maintain consistency and speed up the process. This included buttons, cards, form fields, and icon placements.
Interactive Prototype & Feedback I built a clickable prototype to present user journeys and interactions more clearly. This prototype was used for gathering feedback and making real-time refinements to flows and structure.
Final Design Polish After several iterations and feedback rounds, I finalized the mockups with detailed attention to alignment, responsiveness, and micro interactions—ensuring both clarity and functionality before handing off to development.
1. Designing with Flexibility Matters Jumping straight into layout drafts helped me move fast—but I learned the importance of leaving room for scalable structure as more content and logic emerged.
2. Early Developer Collaboration Pays Off Staying closely aligned with devs during design helped minimize miscommunication and made the handoff smoother, especially for edge cases and interaction states.
3. Systems Thinking Improves Speed & Consistency Building components early allowed me to iterate faster and ensured a consistent UI across screens, especially as the project grew.
4. Clarity Over Complexity I was reminded that simple, clean solutions often provide the best user experience—especially when designing for users who interact with the product daily.
5. Always Validate with Users (or Stakeholders) Feedback loops (even informal ones) were crucial in refining flows that looked good on-screen but needed tweaks once tested in real scenarios.
