Working at Decision Theatre Network
My Journey as a UI/UX Design assistant at DT!
Overview
I worked as a UX/UI Design assistant at Decision Theatre Network. Decision Theater is an enterprise at Arizona State University that provides data visualization solutions that better understand complex issues faced by society. Check out DT here!
Responsibilities at DT
While working at Decision Theatre, I had the opportunity to contribute to a range of projects, including CuRVE, Helio, and NexView.
Interaction Design
Conceptualized and created prototypes and wireframe mockups, focusing on improving the usability, and functionality
Data Visualization
Demonstrated data interpretation and visualization skills by creating a data visualization map and charts.
Accessibility Guidelines
Conducted thorough UI testing and accessibility guideline checks to validate design choices and optimize user interactions
What is CuRVE?
The CuRVE is an interactive visualization-based tool that displays the potential local impacts of Colorado River shortages for individual water systems, agricultural districts, tribal communities, and industries across multiple years.
CuRVE currently includes impacts of the Colorado River shortage on Central and Western Arizona water users.
Mission
Redesign the tool by updating the data points while producing an interactive visualization tool to improve user and client satisfaction.
Tools
-
Adobe XD
-
Miro
-
Pen and Paper
My Role
-
UI/UX Design assistant
-
UX Research
Team
-
2 UX/UI
Designers -
1 Graphic Designer
-
Product Manager
Client Interactions
Throughout this project, we engaged in a series of Zoom sessions, client consultations, stakeholder meetings, and presentations. At each milestone, the designs underwent thorough evaluation and were presented to the Kyl Water Centre client for validation and approval.
These interactions provided invaluable insights, enriching our comprehension of our client's needs and driving continuous improvement of the product.
Moodboarding
The initial phase of redesigning the tool was to find inspiration and develop a mood board. We delved into extensive research exploring dashboard and landing page ideas. We collaboratively researched the design layout for setting the look and feel of the tool.
Wireframing
Further, we decided on the look and feel of the entire tool. We designed wireframes with different design styles to see what would be functional, usable, and visually appealing.
Iterations
So, we further brainstormed some more ideas on their sections of the tool such as adding new icons, and charts to visualize the data in a more presentable manner, refining pie chart legends, and creating new components.
Below, I inculcated donut charts, pie charts, stacked columns, and bar charts for the composition of data provided by the clients. Some more information on this can be found here.
Another interesting chart I worked on was a Tile Map. This map depicts Central Arizona Colorado River Water Users. The meticulous process of mapping each Arizona city, although time-consuming, proved to be a rewarding experience. Through a combination of HTML, CSS, and JavaScript coding on CodePen, I was able to design the map.
Validating
After multiple iterations, and meetings with clients, UX team members, and developers we were at the next step - validation. I began with using the tool on various browsers and reporting bugs or issues I faced while using the tool.
Comparing each element with the prototypes we had designed to ensure that the product worked seamlessly. A few of the bugs I found were issues with UI elements in the Chrome browser and created tickets for the same. The developers and UX team always worked in sync which helped resolve such minor UI bugs with ease.
Final Designs
The ultimate designs were created with a dual focus: addressing user needs and aligning with the client's requirements. Our primary goal was to enhance the product's usability and functionality. In pursuit of this objective, we introduced various data visualizations to represent many data points crucial to our stakeholders. Read the news article here to know more.
Live Website
For a closer look at the project's impact, you can go over the live website below!
Learnings
01
Data Visualization Techniques
Exploring diverse data visualization techniques equipped me with a deeper understanding of how to effectively represent complex data.
03
Collaborative Sessions
Collaborative research sessions with team members and clients helped shape design decisions and ensure the final product aligned with user and client expectations.
02
Technical Skills
Working on HTML, CSS, and JavaScript empowered me to translate design concepts into functional prototypes
04
User-centric Design
Throughout the project, we remained committed to user-centric design, a principle that remains at the core of my UX philosophy.
This project was not only a chance to enhance my skills but also a reminder of the ever-evolving nature of UX design. It reinforced the importance of constant learning and adaptability in this dynamic field.