INFORMATION ARCHITECTURE
Creating site maps to reflect the correlation of 500+ web applications on Figma.
CLIENT:
Major Fintech Bank (NDA)
MY ROLE:
Experience Designer
Project Focus & Role Impact
Team
Experience Director (2), Experience Designers (3)Tools Used
Figma, Sketch, JIRAWe were commissioned to use Figma to represent how 500+ web modules mapped to each other in three separate web applications. This required displaying how different users see different combinations of navigation bars, landing pages, and modules. Additionally, there are different entry points to the same web pages. I partnered with an Experience Director and an Experience Designer. After research, we determined that site-mapping is the best methodology to represent the flow of these modules and their processing pages. I owned the site mapping for about 250+ web applications. Our site maps helped our client understand the flow and interaction of the modules.
Timeline: 1 month1. Define the Scope
Though there are many module, navigation bars, and landing pages across these three departments, we determined that a lot of the user flows and the modules are similar. So, we used the main landing pages of the navigation as the basis of the different entry points of the site map.
Examples of two different web applications user flows that have similar modules.Additionally, we needed to differentiate between the sign-in state of the sites vs. the logged off state of the sites. We named these states “Authenticated” (signed-in) and “Non-authenticated” (logged off).
2. Create Hierarchical Lists
We then listed out the modules. The hierarchy we chose was: Nav → Landing Page → Module.
A portion of the Authenticated Nav-Module navigation.Once listed, we combed through the documentation of the modules to find references of hyperlinks connected to different modules. These modules were the processing pages of the main modules on the landing pages.
A portion of the Authenticated Nav-Module navigation with the processing pages listed.Through this process that we noticed that there were multiple entry points to get to the same modules in the site. My teammate had the great idea to represent this with mini color-coded module flows.
Mapping the entry points revealed multiple routes to get to the same processing page. 3. Map Out the Sites
Once we listed the modules, we mapped them out. The mini module flows came in handy to track the numerous entry points that some of the modules had. Those with at least two entry points we separated using color blocks.
Example of one of the site maps.4. Improve the Readability
After completing the sitemaps, I wondered if there was a method we could use to improve the readability of the sitemaps. Through this, one teammate had the idea of making mini site-maps out of our mini module flows.
Examples of three of three breakout flows that show multiple entry points.We took the modules that have multiple entry points and represented those entry points as mini site-maps.
Conclusion
We gave these site maps to our client. If I had more time, I would’ve liked to improve upon the site map by swapping the module blocks for lo-fi wireframes of each page. Showing a visual representation would help with identifying the specific module. Additionally, I like to link the modules to their respective Figma module documentation. Linking the modules would help a user quickly view module documentation, and it would allow for the site map to be interactive as well as informative.