● UX / UI DESIGN

Rodel Simulator

Designing a city simulation based on Arizona

Rodel Simulator is a city building simulation that creates an accurate depiction of Arizona’s social and economic states, serving as a valuable tool for leaders in business, education, and government to make well informed decisions on proposed policies.

Role

UX Designer

Timeframe

March 2023 - Ongoing

Team 

Spencer Creer (Engineer Staff Lead)
Josh Chang (Industrial Design Lead)
Miggy Fajardo (UX/UI Designer)
Krutik Patel (3D Model)
Allen Lin (Front/Back End)
Grant Theisen (Data Science)
Brinlee Kid (Data Science)

Overview

The project is an on-going partnership project between Luminosity Lab at Arizona State University and the Rodel Foundation of Arizona. Its primary objective is to create an innovative tool that enhances decision-making and advance the progress in relation to proposed policies for the state of Arizona.

Luminosity Lab by nature is like an agency with in-house student designers, engineers, and researchers. This project is a multi collaborative effort amongst wide varying disciplines between design, data science, industrial design, and developers within our lab.

The designs was still in its early stages, so I had the opportunity to create new wireframes, prototypes, and build on existing features that would help potential users to create cities.

Table of Contents

01 Highlight

02 Context

03 Audit

04 Design Process

05 Takeaways

01 Highlight ⬎

SIMULATION MODALS

BEFORE / AFTER: GRID ITEM AND BUILD MODE

VIDEO DEMO / 23 APRIL 2023

02 Context ⬎

Project alignment

The current scope of the project focuses on a desktop first approach on visualizing the social and economic portions of school models and its data sets as well as redesigning portions of the current designs in the platform.

What's The Challenge?

"Arizona is steadily becoming one of the ten largest states and the complexities of building cities within the state are accelerating. Arizona will need a new kind of tool to understand the growth of diversity, economy, environment, and education system of the cities."

Our Solution!

My Role

I have a critical role as the UX designer in redesigning and integrating new key features within the sim (simulation). Specifically, the project will focus on the features like Build Mode, Layers, Budget Metrics, and School Grid Items — all assets a user needs to created well informed policy decisions.

03 AUDIT ⬎

State of the Platform

Prior to any iterative design work, I conducted a comprehensive audit of the simulation’s user experience and identified its current state to familiarize myself with its flow and feature set.

Information Architecture Audit

I created an information architecture flow of all of the different components and screens available on the existing web demo to get a better holistic understanding of the platform.

Later, I used it to reference which components needed deeper UX evaluation and inputted it into a usability matrix. Below, you can see the current flow of the simulation.

INFORMATION ARCHITECTURE

Observing Existing Designs

Having established the architecture flow, I gained a clearer understanding of the user's journey within the platform. The next step involved assessing the usability of the user interface and its visuals.

As I delved into our Figma file, I quickly realized that numerous designs on the platform did not align with what was in the Figma file. Syncing this inconsistency became my initial task before diving on the usability audit, which can be found below.

USABILITY MATRIX

Gathering My Insights

Aligning myself with the usability and experience of the platform was the first big step to understanding the scope of the product. Based on these discoveries, I gathered 3 main insights that will be used as reference in the iterative design process.

04 Design Process ⬎

Designs & Solutions

To kickstart the design process, I used the information I gathered early on in the audit to start creating my wireframes of the redesigns of the platform, leading to the final designs created for production for a demo

Consolidated Tool Bar

After establishing a proximity section of where components should reside in each side of the platform, ideas began to form better.

Components that already exist has an established consistent action patterns, therefore it makes sense to stick the consolidated tool bar in an area of the platform where most interactive actions happen—on the right side.

RIGHT HAND SIDE ICON + NAME TAG (V1)

LEFT-HAND SIDE ICON (V2)

BOTTOM PANEL WITH POPUP (V3)

FINAL PROXIMITY AREA ESTABLISHMENT

FINAL LAYOUT ESTABLISHED

Build Mode Wireframe

One of the biggest comment I made was its lack of different visual elements. Additionally, the modals was also lacking in step by step structure, making it confusing to differentiate which model I was building at any stage of the process.

I made changes that reflected my usability findings and summarized as such:

1. Clearer CTA in each modal
2. Visually communicate the grid item that the user is placing by emphasizing a 3D model display of it on the modal
3. Information needed for the user to input on the grid item has now been migrated to step 1 instead of last step to communicate its importance further up the process
4. Larger emphasis on the permanence of the action of the user
5. Excessive steps has now been broken down to 3 simple steps

STEP 1 MODALS

STEP 2 & STEP 3 MODALS

Build Mode Final Design

The build mode has been stripped to three simple steps that provides the users all of the content they need to quickly and efficiently setup and build models of their cities.

FINAL BUILD MODE MODALS

FINAL BUILD MODE: STEP 1

FINAL BUILD MODE: STEP 2

FINAL BUILD MODE: STEP 3

Command Center Wireframes

The Command Center in its first iteration was not a functional component. The content itself seemed to also be placeholder, so a large redesigning effort with an addition of the Budget feature was conducted on the Command Center.

One of the largest redesign effort was the addition of Budgets feature. It is where the user can allocate budgets to different industry categories and make quick funding adjustments.

Additionally, the initial command center with the 8 slider inputs has been categorized into industry specific tabs that matched the content of the inputs. The sliders was also replaced with number inputs to used to allow for more accurate adjustments to numbers that could affect the whole simulation.

COMMAND CENTER 2 STEP MODAL

COMMAND CENTER & CATEGORIZED TABS

Command Center/Grid Item Final Design

Within the command center, the newly built budget feature now allows users to allocate certain amounts of budgets into specific industries within the simulation. Additionally, the previous sliders in the command center has been consolidated in tab components that matches each content input.

FINAL COMMAND CENTER MODALS

COMMAND CENTER MODAL IN CONTEXT

GRID ITEM IN CONTEXT

Dashboard Redesign

The previous dashboard had two purposes:

1. Enable users to create a simulation of their preference with selectable timesteps that represents distinct time intervals in years and a customizable simulation name.
2. It facilitated the ability to view the progress of multiple previously generated simulations, offering users insights into their historical simulation sets. However, this screen was not consistent from the rest of the simulation in terms of visual and usability.

DASHBOARD CARD MODE 

DASHBOARD LIST VIEW

Dashboard Final Design

The dashboard has been redesigned to not only represent a more consistent design to the rest of the platform, but to also provide an easier way for users to navigate through their different simulations
once their library of simulation begins to add up.

Additionally, as we slowly prepare our platform for demo use, we added sign-up pages to allow us to capture the information of users which are the information used to assign contents on the dashboard.

FINAL DASHBOARD CARD VIEW

FINAL DASHBOARD LIST VIEW

SIGN UP PAGE DESIGN

04 Takeaways ⬎

Reflection & Impact

The last 6 months has been influential in my UX career. Many of the designs were iterated and shipped at lightning speeds, on top of handling many other Luminosity Lab related projects. Overall I learned new processes and efficient ways to make my impact on design as they were produced and shipped