nouSystems Case Study
Overview
Role: UI/UX Intern
Date: May 2024 - August 2024
Skills: UX/UI, Web Design, Data Visualization UI, Wireframing, Prototyping, Adobe Xd
Summary: I worked on a data analytics platform for analysts to efficiently record, manage, and visualize complex data. I designed functions for creating node diagrams and comprehensive workspace views to enhance data analysis and project management.
*To maintain security and confidentiality, sensitive information has been left out, and certain design elements have been blurred.
Some of my key achievements:
Improved the visual hierarchy of complex data, implementing modern designs and layouts.
Collaborated with developers to ensure design feasibility and implementation.
Identified potential competitors in our market and research and analyzed their products/Human computer interaction (HCI).
Established a design kit to help maintain consistency in the look and feel across different products.
Understanding the Problem
During a user interview with a data analyst, I got a closer look at the pain points of the users:
Findability Issues
Users struggled to locate things due to either too many or too few constraints, poor organization, and unclear visual cues.
Poor Feedback
The system didn’t always give users clear feedback on their actions, leaving them unsure if what they did was correct.
Visual Hierarchy Issues
The design didn’t always guide users to the right content or through workflows effectively, leading to confusion.
Overall, the design wasn’t guiding users smoothly. It broke their focus, making their work more difficult than it needed to be. Addressing these pain points would significantly improve their productivity and experience.
My Design Approach
To create an effective and user-friendly design, I followed a structured process that included research, sketching, prototyping, and collaboration:
Conducted design research and gathered inspiration from competitor platforms and design systems.
Created low-fidelity sketches to explore layout ideas and workflows.
Developed wireframes in Adobe XD to refine the interface and test interactions.
Designed high-fidelity prototypes, focusing on visual hierarchy, spacing, and usability.
Iterated on designs through collaboration with other designers and developers.
Redesigning the Workspace Dashboard
The primary goal of this task was to redesign the workspace dashboard, focusing on the UI layout to make it easier for analysts to navigate, customize their workspace, and add widgets.
UI Layout
In my wireframes, I focused on organizing the workspace into clear sections with distinct vertical spaces. I consolidated the heading and side navigation, reducing clutter and improving usability.
The original design had a separate header for profile and notification buttons. I explored different layouts for the workspace dashboard's side navigation and header to consolidate the two and reduce whitespace.
Modal Forms and Drop-down Menus
I designed modal forms and drop-down menus for dashboard features like adding widgets and creating node diagrams. Each form followed a clean layout with familiar steps, making it easy for users to navigate and complete tasks seamlessly.
High-fidelity prototypes of modal forms for widgets and diagrams
High-fidelity prototypes of drop-down menus for widgets and diagrams
Crafting Tools for Graph-Making
I worked extensively on designing graph-making tools, including features for adding, comparing, and viewing complex node diagrams, ensuring they were intuitive and effective for users.
Research for Inspiration
To begin, I researched platforms like Tableau and Flourish to draw inspiration from their graph styles and user-friendly interface layouts.
Flourish
Interactive: Allows users to interact with nodes and connections.
Customizable: Offers detailed options for node shapes, colors, and connections.
Templates: Provides pre-built templates for quick and professional results.
Low-fidelity sketches
With inspiration in mind, I sketched low-fidelity wireframes to explore various design directions for the node diagram tools and layouts. This helped me visualize potential structures and features before creating detailed designs.
Node Diagram Designs
I designed node diagrams with varying levels of complexity, allowing users to visualize and interact with both simple and intricate data structures.
Comparing Node Diagrams Workflow
I developed a workflow that enables users to select and compare diagrams, displaying both their layouts and specific details side by side in graph and table formats.
Node Diagram Zoom-In View
Style Guide
I created a design system for one of the platforms, drawing inspiration from the cyan and purple tones of the logo. I ensured consistency across both light and dark modes, maintaining a cohesive visual identity.
Reflection
During my 12-week internship, I collaborated closely with designers and developers, gaining valuable insights into visual design and complex data systems. Working with a smaller team, I had a lot more leverage in shaping the design and vision. I learned the importance of close collaboration, and how small design tweaks can significantly improve user experience. Transitioning from my background in art and non-profits to defense work was both challenging and rewarding, offering a new perspective on UI/UX and deepening my passion for creating impactful, user-focused designs.