Back
Ono Academic College - Website redesign
Website Redesign
Ono Academic College's Website Redesign
Elevating Academic Web Presence for the Mobile Era
In a Nutshell
Ono Academic College embarked on a comprehensive website redesign, adopting a mobile-first approach to cater to modern education standards and student browsing habits. The three-month project aimed to enhance aesthetics, optimize mobile experience, streamline navigation, and implement adaptable web templates for efficient content management. This transformation elevated the college's online presence, significantly improved user engagement, and attracted prospective students.
While it’s a commercial website, it was addressed as a full product, with multiple types of users (students, staff and applicants), goals and features.
The Company
Ono Academic College, a distinguished institution, has long been committed to providing top-tier education and fostering a dynamic learning environment. Recognizing the evolving digital landscape, the college sought to modernize its online presence to better serve its community. This strategic move aimed to further embody its commitment to accessibility, innovation, and comprehensive academic support.
My Role
As a Product Designer, I spearheaded the redesign, collaborating closely with the design team, external development team, and college administration. My responsibilities encompassed the entire design process, from research and conceptualization to prototyping, user testing, and final implementation. Leveraging my UI/UX expertise, I focused on creating a seamless, intuitive, and visually appealing experience for diverse users.
The challenges
Ono Academic College's website had become outdated and failed to meet the expectations of a modern audience.
‍It lacked:
Mobile Friendliness
The website wasn't optimized for mobile browsing, the dominant medium for today's students. This hindered accessibility and hampered engagement with this crucial demographic.
Modern Aesthetics
The outdated interface no longer reflected the college's esteemed academic reputation, failing to effectively showcase its offerings and campus life.
Intuitive Navigation
The complex navigation system created a frustrating experience for users, hindering their ability to find the information they needed.
Streamlined Content Management
The existing platform posed challenges for the college in managing and updating content efficiently.
This confluence of issues significantly hindered attracting students, engaging current students, and showcasing Ono's excellence online. Addressing these challenges became the core of the redesign, aiming to create a modern, user-centric platform that serves as a visually appealing window for the college while streamlining user experience and content management.
Research and Insights
A comprehensive research approach gathered user behavior, competitive benchmarks, and stakeholder goals:
1
User Behavior Analysis: Analytics tools revealed mobile dominance in browsing habits. We identified pain points in the user journey and areas for mobile optimization.
2
Competitive Analysis: Examining other academic institutions' websites provided benchmarks and effective design elements for user engagement.
3
Stakeholder Interviews: Engaging with faculty and administration offered insights into institutional objectives and expectations for the platform.
4
User Interviews: Dialogues with current students ensured the redesign focused on real user needs, enhancing practicality and relevance.
5
Surveys and Feedback: Feedback from a broader student segment ensured inclusivity and user-friendliness.
This holistic approach provided a well-rounded understanding of our users and their needs, guiding our design strategy.
Strategic Approach
Using research insights, we designed a mobile-first strategy. This shifted the website's content and navigation structure, ensuring an intuitive experience for smartphone and tablet users.
*
Mobile-First Design Philosophy: Recognizing the predominant use of mobile devices among our target audience, we prioritized the mobile experience in our design process. This meant rethinking navigation, content layout, and interaction patterns to ensure they were optimized for smaller screens and touch-based interactions.
*
User-Centric Navigation: Simplifying the website's navigation was paramount. We aimed to create a more intuitive structure that made finding information effortless, reducing the number of steps users needed to take to reach their desired content.
*
Comprehensive Content Strategy: Beyond aesthetics, the content itself needed to be accessible and engaging. We worked on creating adaptable web templates that allowed for easy management and updating of content, ensuring that the website could serve as a dynamic resource for current and prospective students.
*
Iterative Design and Testing: Prototyping became a core part of our strategy, allowing us to quickly visualize ideas and refine them based on user feedback. By adopting an iterative process, we ensured that the final design was both effective in meeting user needs and aligned with the college's goals.
*
Collaborative Development: Recognizing the importance of seamless collaboration between the design team, IT department, and college administration, we established clear communication channels and regular check-ins. This ensured that all stakeholders were aligned and could contribute to the project's success.
This strategic approach was designed to address the core challenges identified in our research, focusing on creating a digital presence that was not only visually appealing but also highly functional and user-friendly. By prioritizing mobile optimization and user experience, we aimed to create a platform that effectively showcased Ono Academic College's strengths and attracted prospective students.
Design & Implementation
The implementation of our strategic approach materialized into a transformative design that overhauled the user experience of the Ono Academic College website. With a focus on mobile-first design principles, we reimagined the website to be visually engaging and functionally robust across all platforms. The redesign involved several key screens, each critical to the user's digital journey:
The redesign involved several key screens, each critical to the user's digital journey:
Home page
Mobile: Collapsible menu and swipeable elements for quick access to essential information.
‍Desktop: Broader view showcasing more content while maintaining clean navigation.
About the Campus Page
Mobile: Swipe-friendly layout for easy scrolling through images and text, and links to Google Maps.
‍Desktop: Grid layout with larger visuals and interactive maps in-site.
Lecture Staff Page
Mobile: Easy scrolling through staff profiles with key information.
‍Desktop: Grid layout for comprehensive overview and faculty expertise details on hover.
Event Page
Mobile: Focused view  on the main event details with expandable event details for limited screen space.
‍Desktop: More extensive timetable view and detailed event previews on hover.
404 Page
Both Mobile and Desktop: Simple, clear, and user-friendly design with brand consistency, guiding users back to active pages without frustration.
Design Details
Beyond the overall layout and navigation improvements, several specific design decisions contributed to the success of the redesign:
*
Visual Hierarchy: Employing clear visual hierarchy through contrasting colors, typography, and white space helped prioritize important information and guide users through the content.
*
Microinteractions: Subtle animations and transitions on elements like buttons and menus enhanced user engagement and provided feedback on user interactions.
*
Accessibility: The website adhered to WCAG 2.0 accessibility guidelines, ensuring usability for individuals with disabilities. This included features like alternative text for images, proper color contrast, and keyboard navigation support.
*
Responsive Images: Images were optimized to adapt to different screen sizes and resolutions, delivering a visually consistent experience across devices.
*
Iconography: Consistent and easily recognizable icons were used throughout the website to represent various functionalities and sections, improving intuitiveness.
Impact
The launch of Ono Academic College's redesigned website marked a significant milestone in the institution's digital strategy. The impact was multifaceted, with measurable improvements across various user engagement metrics:
User Engagement
Post-launch, there was a significant increase in user engagement, with a 31% rise in website metrics. The new design successfully captured and retained visitors' attention.
Mobile Usage
Mobile-first approach led to a 67% improvement in mobile user Usage, reflecting design responsiveness and understanding of user behavior.
Student Interest
The redesigned website positively impacted student recruitment, as 37% of applicants reported that it influenced their decision to explore the college further. This represented a significant increase of 21 points compared to the pre-redesign period.
Administrative Efficiency
The website's improved functionality and the introduction of adaptable web templates increased website related administrative efficiency by 18%. College staff were able to perform actions through the website more quickly and effectively.
The redesigned website truly became a cornerstone of Ono Academic College's online presence, reflecting the institution's high academic standards and modern approach to education. With a user-centered design that resonated with both prospective and current students, the project's success went beyond aesthetics, creating a platform that was intuitive, informative, and inspiring.
Lessons Learned
The successful redesign of Ono Academic College's website provided several valuable insights that can be applied to future projects. Here are three key lessons learned:
1
The Primacy of User-Centric Design: Prioritizing user understanding through engagement (interviews, surveys, feedback loops) yielded critical insights that shaped the final design, highlighting the significance of user-centricity in creating functional and resonant digital solutions.
2
The Efficacy of a Mobile-First Strategy: The project prioritized designing for mobile devices first, ensuring essential elements were prioritized, resulting in a cleaner and more focused design across all devices. The significant enhancement in mobile user experience post-launch confirmed the success of this mobile-first approach.
3
The Value of Cross-Disciplinary Collaboration: Collaboration among diverse teams led to a successful product with a comprehensive design. Regular communication and a shared vision were vital for problem-solving and incorporating insights.
These lessons underscore the dynamic nature of design and the continuous learning that it entails. With each project, the opportunity to refine methodologies, embrace new technologies, and understand user needs more deeply is invaluable for personal growth and professional development in the field of product design.
Thank you!
Thank you for taking the time to delve into this case study! 🫡
Back to all case studies