What is ani?
ANI is a corporate benefits platform designed to improve workforce wellness and engagement by expanding access to cultural spaces and building bridges between business communities and the arts
overview
overview
The ANI Corporate Benefits Platform was reimagined with the introduction of a new Human Resources Portal, aiming to significantly enhance employee engagement and streamline HR functionalities for B2C companies. Our team leveraged agile methodologies, aligned with the existing style guide, and crafted user-centric design solutions based on specific user stories.
Problem
The main issue was the lack of a dedicated Human Resources Portal on the ANI platform, complicating efficient management of employee benefits and cultural activities. Also, the outdated and complex login process led to low user engagement and accessibility problems.
solution
Our team designed an integrated HR portal and improved the login experience to enhance usability and accessibility. This solution specifically supports HR managers and employees, improving interaction with cultural benefits.
Role | team | tools | duration
Role: UX/UI Designer
Team Size: Five designers
Contribution : Focused on user flow design, high-fidelity wireframes, and leading the accessibility audit.
Tools
Figma for wireframing and prototyping
Adobe Photoshop and Illustrator for graphic design and asset creation
Duration/Timeline
January 2024 - April 2024
process
kickoff
kickoff
The project commenced with a comprehensive understanding of the client's requirements, focusing on creating a user-friendly HR portal that would centralize employee benefits and facilitate easier access to cultural events.
Client Questions / Answers
Initial discussions with the client revealed the need for:
A streamlined login process.
A robust HR portal that supports dynamic user interactions.
Enhanced accessibility features to accommodate a diverse workforce.
Research
Competitive Analysis: Examined leading HR platforms to identify features that successfully improve user engagement and functionality.
Heuristic Analysis: Evaluated the current ANI platform to pinpoint major usability challenges.
User Flows
The user flows for the ANI Corporate Benefits Platform were meticulously designed to ensure a seamless and intuitive user experience across several key functionalities. These flows were central to the redesign efforts, aiming to address specific user needs and streamline interactions within the platform.
wireframes
For the ANI Corporate Benefits Platform, our team focused on developing mid and high-fidelity wireframes that encapsulated the essential features and functionalities identified through our user flows. These wireframes were crucial for visualizing the proposed enhancements and served as a foundational step in our design process. We emphasized mid-fidelity wireframes to refine visual and functional aspects early on, ensuring a clearer representation of the end product.
As a user (corporate HR), I want to be able to create an account and log in
2. As a user I want to be able to access a dashboard upon log in to get a corporate account overview
3. As a user, I want to view user overviews.
4. As a user, I want to purchase additional individual licenses
5. As a user, I want to purchase company-level visits and tickets (broadway shows, etc.)
ui inspirations
For the design of the ANI Corporate Benefits Platform's HR portal, we drew inspiration from a variety of modern, user-centric interfaces renowned for their clarity and ease of use. Each of these interfaces brings a unique element that we wanted to embody in our own design:
Clean, well-organized layout
Strong focus on typography and whitespace
Vibrant, contrasting colors enhance visibility of key information and interactive elements
Easy navigation and quick access to various sections for users
Detailed analytics and health trackers provide immediate insights into business operations.Implemented similar features in our HR portal.Gives HR managers real-time data on employee engagement and program utilization.
UI Iterations
During the design process of the ANI Corporate Benefits Platform's HR portal, our team conducted multiple UI iterations, each designed to progressively refine the interface based on real-world application scenarios and stakeholder feedback.
1
This version emphasized a straightforward, clean interface focusing primarily on fundamental metrics such as membership numbers and visit counts. The design was minimalistic, aiming for clarity without extensive graphical elements, which suited users seeking simplicity and ease of navigation.
2
The interface was enhanced with advanced data visualizations, including pie charts for venue visit categories and detailed breakdowns of user activities. This graphically enriched design targeted dynamic interactions, catering to users who prefer a visually engaging and informative dashboard.
3
The selected design combined functionality and aesthetics, featuring a sophisticated layout with intuitive navigation and a balanced visual hierarchy. Enhancements included a refined analytics overview, prominent displays of total members and active accounts, and structured presentations of recent activities and satisfaction metrics.
hifis
hifis
Our high-fidelity wireframes for the ANI Corporate Benefits Platform's HR portal were meticulously developed to ensure that each design element perfectly aligned with the established style guide and effectively supported user needs. Here's an overview of the wireframes for each key section of the platform:
log in / sign up
Essential for user access, this page is designed with simplicity and security in mind. It features distinct areas for login and sign-up to accommodate both returning and new users. The layout includes streamlined forms, social media integration options for quick access, and clear, concise instructions to assist users in the process without confusion.
corporate portal page
The corporate dashboard on the ANI platform provides an effective overview of HR analytics. It welcomes users with a greeting and displays key metrics including total members, active accounts, and number of venue visits. A graph highlights overall visit satisfaction rated at 4.2 stars, and a bar chart visualizes visits to various venues. The dashboard also features user reviews for specific venues and lists upcoming cultural events with brief descriptions and images. The design prioritizes clarity and easy access to important data, using a color scheme that enhances readability and engages users.
user overviews
This dashboard from the ANI platform focuses on user overviews and analytics. It displays employee profiles for individuals showing their activity metrics. Below, the page provides an overview of key business metrics such as total licenses, total visits, total employees, and total events. There's also a section on recently purchased licenses by department using bar graphs. The design is clean and modern, aimed at providing quick insights and trends to help manage business operations effectively.
License Purchase Page
Dedicated to facilitating the operational needs of purchasing additional licenses, this page clearly categorizes available license options and includes detailed explanations of each tier. The design focuses on simplifying the purchase process through intuitive navigation and straightforward transactional elements.
Events Page
The ANI’s event page features a prominent display of an ongoing art installations, followed by a grid showcasing various events near the user. Each event is represented with a thumbnail image and a brief description, encouraging exploration. The layout is clean and user-friendly, providing easy navigation and quick access to details, enabling users to engage effortlessly with the content.
Event info page
This page provides comprehensive details about specific events, including schedules, venue information, and booking details. The design ensures that users have all the necessary information to participate, presented in a clear and engaging format. Additionally, it features an interactive map that helps users locate the event venue easily. This map is designed to interact seamlessly with the event details, enhancing user experience by providing visual and navigational assistance directly on the page.
prototype
We developed a fully interactive prototype using Figma, which allowed us to demonstrate the proposed functionalities and user flows of the HR portal to the client and stakeholders. This prototype accurately represented the user interface and interaction model of the portal, enabling the client to visually and interactively experience the design. By showcasing the prototype, we facilitated detailed discussions on design choices and functionality, gathering immediate feedback to make informed adjustments. This step was crucial for aligning the final product with the client's expectations and requirements before moving into the development phase.