This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
What I Built
Your central hub for everything work – connect, collaborate, and get things done.
Git Hub : https://github.com/YasasRavi/Intranet_home_page (MIT License)
WEB : https://intranet-home-page.netlify.app/
Journey
My Development Process & Key Learnings
Building this intranet dashboard was an insightful journey, marked by iterative design and a strong focus on user experience. My process was driven by the goal of creating a truly useful and engaging internal platform.
The Process:
Initial Discovery & Requirements Gathering:
I began by considering the typical needs of a modern workforce – what information is critical? What actions are performed daily? This involved conceptualizing common intranet features like news feeds, task management, quick links, and team collaboration tools.
Example: "I started by sketching wireframes, imagining how different user roles (e.g., manager, general employee) would interact with the dashboard daily."
Information Architecture & Layout Design:
A significant phase was structuring the information logically. I aimed for a modular design, segmenting content into distinct, easily scannable cards. This was crucial for preventing information overload and ensuring intuitive navigation.
Example: "Deciding on the placement of 'Quick Actions' at the top, and 'My Tasks' immediately below, was a deliberate choice to prioritize immediate productivity tools."
Component-Based Development:
I adopted a component-based approach (e.g., using React/Vue/Angular if applicable). This allowed for reusable UI elements, speeding up development and ensuring consistency across the dashboard.
Example: "Developing each card (like 'Upcoming Events' or 'Well-being Corner') as a standalone component made the overall structure robust and scalable."
Iterative Refinement & UI/UX Focus:
The design wasn't a one-shot process. I continuously refined the UI, focusing on readability, visual hierarchy, and user flow. Color choices, typography, and icon usage were all considered to create a welcoming and professional aesthetic.
Example: "I spent considerable time fine-tuning the color palette and shadow effects to give the dashboard a modern, crisp feel without being distracting."
What I Learned:
Prioritizing Information is Key: Not all information is equally important at all times. The challenge was to highlight critical data without cluttering the interface. I learned to use visual cues (like bolding or distinct card designs) to guide the user's eye.
The Power of Modularity: Breaking down a complex interface into smaller, manageable components made development more efficient and the codebase easier to maintain and extend.
Balancing Aesthetics & Functionality: A good-looking interface is nothing without solid functionality. I learned to constantly check if design choices were enhancing usability rather than detracting from it.
Anticipating User Needs: Designing an effective intranet means putting yourself in the shoes of the diverse workforce that will use it. What do they really need to do their job better and feel more connected?
Choices I Am Particularly Proud Of:
The "Well-being Corner": I'm particularly proud of incorporating this section. In today's work environment, supporting employee well-being is crucial, and integrating these resources directly into the dashboard shows a thoughtful approach to a holistic employee experience. It's not just about tasks; it's about people.
The "Quick Actions" Section: This was designed to be highly intuitive and immediately actionable. It saves users valuable time by putting the most common functions (like starting a chat or scheduling a meeting) at their fingertips, significantly enhancing productivity.
The Clean and Scalable Layout: The dashboard feels uncluttered despite presenting a lot of information. This clean design makes it easy for users to find what they need, and the modular structure means new features can be added seamlessly in the future without disrupting the overall aesthetic or flow.
Frontend Developer : @yasas_ravihara_5e664c9498
UI UX Designer : @sashi_imesha_a64b2447c896
Code Licensing:
This project is open-sourced under the MIT License. Feel free to explore, fork, and adapt the code for your own purposes!
Top comments (0)