Table Component.

The Challenge.

As my first project as UI lead on the design system team, I was tasked with coming up with a cohesive and consistant table design.

At the beginning of the project, the design system only had a simple table however it didn’t work for every user or business need.

I immediately identified that I needed to collate every need and expand on the existing design in order to add more versions with additional function and flexibility. Therefore there was a large research task required in order to ensure the new table design would work for all.

To tackle this, as the first phase in my UI design process, I embarked on a design discovery. The discovery phase involved researching the problem space and framing the problem(s) to be solved. At this stage I gathered evidence in order to decide on an initial design direction.

This didn’t involve testing any of my hypotheses or designing any solutions. It was a process to ensure I correctly identified where to start and what to focus on in the upcoming design phase.

Discovery steps

Here's a quick rundown of all the steps I completed to do a thorough UI discovery:

1. Kick Off Questions:

   These initial questions helped to formulate the key areas I needed to conduct research in. I worked with my researcher and tried to think about what I already knew, what I needed to find out and how I going to find that information out.
   
   These questions gave my research a goal and a conclusion once answered. This was then used as a base for my design phase.

2. Collating Shared Learnings:

   A big part of my discovery phase was engaging with the wider design community of Nationwide.
   
   By reaching out to the wider teams, I was able to learn what design challenges have already been solved and gain a view of the initial problem space. This provided a great starting point on which direction to take the new design.
   
   By asking for past learnings, I was able to gain a good idea of what is possible to solve, what the pitfalls were, and which teams I would need to engage with and update once I finished the design.
   
   I also ensured I engaged with the accessibility team at this stage. This ensured that I fully understood all accessibility considerations before beginning the design, ultimately ensuring it was accessible from its first iteration.

3. Communication Audit:

   I then did a communication audit and reviewed all relevant Nationwide marketing materials.
   
   By doing an audit I was able to pick up common patterns that our members will have become accustomed to in branch, at home, as well as online.

4. Literature Review:

   I completed a comprehensive investigation of all the current documents and guidance we had on tables and table design. This was both individual team guidance docs and design system component/pattern pages.
   
   The idea was to collect as much as I could, to form a view on the common consensus. Through this, I was able to identify what should stay and what should get updated through the new design.

5. Competitor Analysis:

   I took time to look at what our competitors were doing.
   
   By evaluating the strengths and weaknesses of the competition, I was able to identify if there were any common patterns to replicate or avoid.

6. Visual Audit:

   I looked at all the current implementations of the same or similar components within the Nationwide ecosystem.
   
   Here I picked up on shared learnings to see what to keep, combine or remove in my new design.
   
   This was focused on any design element, such as interaction modes, colour patterns or design layouts. I made sure to take my time to look across all projects, as well as the design system site and sandbox, to make sure the new design was fully considered.

7. Infinity Mapping:

   I created themes and grouped them into categories. This helped with identifying patterns and areas to focus on within the discovery research process.

8. Developer Check-In:

   Design and tech must work collaboratively in order to shape any new design. Therefore, once I identified what I was looking for, and how that could potentially be implemented, I booked an early check-in with the tech team.
   
   By reaching out to the team, I was able to understand the technical feasibility and complexity of the project. It was also a great opportunity to gain another perspective on the problem at hand.
   
   Questions from the check-in session were recorded and followed up in later sessions.

Off the back of the discovery process, I was able to confidently produce a range of new table designs. From simple reference tables to more functional comparison tables and total tables.