1. Data Analysis

• I started this project by reviewing all of the raw user survey data provided by a 3rd party to identify interesting insights for data visualization. Once all of the most interesting insights were discovered, I grouped them into themes.

• These themes would eventually become individual sections on the landing page that then fed into themed sub-pages with graphs and additional information. 

​

2. Low-fidelity Mockups

• The next step in my process was to ideate with another designer and then create low-fidelity mockups in Figma. During this process I focused more on pages, their layout, and components.

• I didn't focus too much on what specific graph or data set to use or worry too much about matching the existing look and feel at this point. The goal was to get ideas on paper so that we could present them to make sure we were on the right track.

​

3. Design Review & Feedback

• After the mockups were ready, we held a design review with our client to gain signoff on our approach and get feedback for iteration before moving forward into high-fidelity designs.

• This early feedback was valuable because it allowed us to iterate on lightweight mockups before investing a large amount of time on high-fidelity designs which are more difficult and time consuming to change later on.

​

4. Iteration and High-Fidelity Designs

• Next, I iterated on my designs and applied the feedback received during our design review to create high-fidelity mockups of our pages in Figma that matched the existing website style, look, and feel.

• I also spent more time looking at specific user survey data and identifying the type of graph that would best visualize each data set and matched the mockup accordingly.

• I also wrote all of the copy during this step for the landing page and sub-pages.

• I focused on designing the sub-pages. Although my fellow designer focused on the landing page, I actively influenced and contributed to the design of this as well. In the end all pages incorporated concepts and elements from my initial low-fidelity mockups.

​

5. Design signoff

• Once the high-fidelity mockups were ready we met once more for a final sign-off before we could move into implementation.

• There were  a few minor changes after this second review.

​​

6. Data Organization and formatting

• Before software development could continue, I organized and formatted all of the raw data sets.

• This helped make things easier for the software engineer to ingest during coding.

​

7. Implementation support

• For the rest of the project I shifted into a support capacity for software engineering, including a few small changes and design decisions throughout the process as implementation problems or questions arose.