Redesigned screens being displayed in various device screen sizes

Redesigning a Responsive Web App

Client: NetOne Talent
An online employment recruiting agency

Project Overview:

NetOne Talent empowers individuals to take control of their careers by providing a direct engagement gateway with clients. I was tasked with redesigning their existing web application to support recruitment processes—including identifying, attracting, screening, interviewing, selecting, hiring, and onboarding employees—across desktop, mobile, and tablet platforms.

My Role: Lead UX/UI Designer

Deliverables: Competitive Audit, Secondary Research, Information Architecture, Wireframes, Mock Ups and Prototypes

Project Specs: Figma, Adobe CC

Duration: 6 months

Lo-fi sketches during the initial re-design phase

key challenges

  • Data Management and Overload: Extensive data and the absence of foundational design artifacts like process flow maps or blueprints complicated the redesign. This lack of tools demanded a best-practice-driven approach under tight constraints.

  • Lack of User Feedback: The absence of direct user feedback forced reliance on secondary research and intuition to inform design decisions, which increased the risk of misalignment with user needs.

Strategy + Implementation:

  • Adopted a hierarchical content strategy and used wireframing to effectively organize interface elements, ensuring critical information was highlighted and readily accessible.

  • Implemented visual hierarchy and data chunking strategies to improve user experience and optimize data visualization. Key design elements included careful use of spacing, font sizes, and color to direct user attention and reduce cognitive load.

  • Utilized Figma’s Auto Layout for dynamic content scaling, enhancing adaptability across different screen sizes and streamlining the design process.

Data Management:

Demo wireframe to organize crucial data
Demo wireframe to organize crucial data
Demo wireframe to organize crucial data

Dynamic Content Scaling and Responsiveness with Figma's Auto Layout

Figma’s Auto Layout, especially nested layouts, was crucial for creating responsive designs and streamlining presentations to stakeholders and developers.

Complex User Flows:

  • Developed new process flow diagrams and blueprints to simplify the design process and anticipate navigational challenges.

  • Engaged deeply with business processes through comprehensive stakeholder interviews, aligning each design decision strategically with business objectives.

Grid view of candidates on a tablet screen

  • Employed established UX best practices and progressive disclosure techniques to create a user-friendly interface that adapts to limited mobile space and user attention spans.

  • Strategically used tabs, carousels, modals, popovers, expandable sections, and multi-step forms to gradually reveal information, maintaining a clean and minimal interface.

Navigating Without User Feedback:

List view of candidates on a tablet screen

Reflection

This project was a profound learning experience, highlighting the importance of adaptive design thinking and strategic planning. The redesign not only enhanced the application’s functionality and user satisfaction but also provided invaluable insights into managing large-scale UX projects under significant constraints. The experience underscored the necessity of flexibility in design practices and the potential of thoughtful UX strategy to overcome substantial challenges.