Navigation re-design

Responsibility: UX & Service design

Company: Piclo

Goals

• Improve navigation intuitiveness by addressing core areas of ambiguity

• Decease volume of helpdesk support and user confusion

Methods

Research, concept and usability testing, wireframes, Interactive prototype

Challenges

Shifting business goals, tight deadlines and simultaneous team restructure

  • Piclo recently launched a new product, Piclo Max, and part of the project was to redesign the navigation system which was borrowed from the existing product called Flex. 

    During the process I was tasked with addressing the confusion and inefficiencies, of the navigation system, reported by both internal and external users. 

    The primary goal was to create a user-friendly, intuitive navigation system that enhanced the overall user experience and met the expectations of our user base and business goals to include more markets in future. All while meeting tight deadlines and considering technical restrictions.

  • As the UX/Service designer leading the project, I was responsible for overseeing the entire design process, from research and ideation, to prototyping and implementation. My role involved collaboration with stakeholders and developers to ensure that the new navigation system aligned with user needs, project and business goals. 

    Our team was undergoing a restructure simultaneously with the design-to-development handover in addition to moving faster than the normal pace. As a result I was also tasked with ensuring smooth context switching for everyone and quickly bringing up to speed newly added members.

  • The existing navigation system was widely criticised for being difficult to navigate. Users frequently reported that it was confusing and that items were not located where they expected them to be. This feedback came from various sources, including user feedback, support tickets, product insights and direct interviews with both internal staff and external users.

  • Piclo's mission is to decarbonise the world's grids. We develop software solutions that make our energy networks smarter, flexible and more sustainable. Piclo Max, our market access platform, enables flex sellers (such as EV and battery owners) to access all electricity markets from one place.

Old navigation system

New navigation system

Research

Conducted desk research to gather existing product insights from internal and external users. 

Objectives:

  • Analysed the specific pain points and areas of confusion within the current navigation system.

  • Gathered feedback early on, from a wide range of users to inform the redesign process.

    Findings:

  • Users struggled to find key features and information, leading to frustration and decreased productivity often resorting to asking customer support help.

  • The current system lacked logical grouping and clear labelling, contributing to the overall confusion.

Analysed the navigation system to find opportunities for improvement

User insights

Ideation

Brainstorming:
Held a few brainstorming sessions with key stakeholders to generate ideas for the new navigation system. Used design thinking workshops to explore potential solutions and gather input from a diverse group of participants.

Concepts:

  • Developed a few navigation models, including hierarchical and mega menu structures in the time available.

  • Created low-fidelity wireframes to visualise different navigation layouts and gather early feedback.

Ideating with team

Design process

Wireframes: Presented initial wireframes and sketches to stakeholders for technical and general feedback.

Prototypes: Developed high-fidelity prototypes of the new navigation system, incorporating feedback from initial tests. Iteratively refined the prototypes based on continuous user testing and feedback sessions.

Design Iterations: Made several iterations to improve labelling, grouping, and overall navigation flow. Ensured the design was scalable and accessible across different devices and platforms.

Early concept for stakeholder feedback

Broken down work in ticket-sized chunks to help the team with prioritisation

Usability testing

Implementation

Development:

  • Worked closely with developers to ensure the design was implemented accurately and efficiently. 

  • Created detailed specs to help with smooth handover and a place for developers to use as the source of truth and ask questions.

Detailed specs for developers

Accessibility contrast check

Results and impact

User feedback

Metrics: Significant improvement in user engagement, satisfaction and navigation efficiency.

User Feedback: Positive feedback from both internal and external users, praising the new system's intuitiveness and ease of use.

Business Impact: Enhanced overall user experience, leading to increased engagement and productivity.

Lessons learned

Challenges:

Addressed technical constraints and ensured the new navigation system was seamlessly integrated into the existing platform by breaking down the work into ticket-sized implementations and by prioritising steps with the team. Managed change resistance by providing clear communication and support throughout the team’s transition. 

Takeaways:

  • Importance of continuous user and stakeholder feedback and iterative design to create a successful navigation system.

  • Value of cross-functional teams collaboration in addressing complex design challenges.
Optimised registration >
< Previous

Back to top ↑