|Class||Design Thinking II (UX200)|
World Council on City Data
|Status||Presented to Client|
|Roles / Responsibilities||User Experience Design
User Interface Design
|Full Report||Download PDF|
Initially our client presented us their concern of ‘scalability’ for managing and presenting the large data sets provided by the WCCD. Through diligent research and user validation we came to the conclusion that we would focus on the redesign of the website to ensure more effective usability by simplifying the appearance of the data to make it more engaging to work with, while removing certain barriers of entry from the current offering.
We began by conducting research through literature regarding best practices when designing sites for data visualization with large data sets. We also completed competitive analysis’ in order to analyze other well-designed websites with a focus on data visualization to capture the strengths and weaknesses of other websites of this nature. Following this, we conducted ideation workshops to generate as many ideas as we could. We conducted phases of individual and team idea generating, which were followed by heat mapping and selecting best elements of multiple designs to help guide us to one idea to be prototyped.
For ideation, our team conducted a four step sketch consisting of gathering notes, gathering ideas [WCCD Figure 1.2], tweaking those ideas with the “Crazy 8s” [WCCD Figure 1.3], then doing a solution sketch [WCCD Figure 1.4]. Each member reviewed our previously done competitive analysis and research material (including websites similar to WCCDs and other big data visualization sites) in our notes before moving on to generating ideas. For twenty minutes during idea generation each member individually wrote down ideas incorporating those key points from our research findings, in the form of graphs, diagrams, or any other potential solutions that came to mind during the exercise they thought would be valuable to represent visually with a wireframe.
During our thirty minute solution sketch, we each drew our best ideas in the form of a storyboard consisting of 3 panels. After taping all of our finished solutions up on a board (similar to an “art museum”), we conducted a heat map where we placed dot stickers beside the parts of each solution sketch that we liked and wrote any questions or concerns on a sticky note that was then placed under the sketch.
Moving on, we went through a speed critique where we discussed each solution sketch to decide what should be included in the storyboard and prototype. We took the important parts from our solution sketches and weaved them into a storyboard [WCCD Figures 2.1-2.6], imagining how the user would find the website and then what it would look like for them when going through it. This helped us to identify gaps and priorities moving into our prototyping phase.
Some of the things we wanted to address in our first prototyping exercise was the ability to save filters for continued use at a later time, view more data at once while selecting the filters with which to view the visualization (Figure 3.3), as well as a more engaging onboarding experience (Figure 3.2). We built out a web of over 50 artboards to make sure that our users felt as though the prototype was fully functional (pay no attention to the Sketch file behind the curtain, Figure 3.1).
A key priority was the need to incorporate richer, more accessible filter access. We drew out a number of solutions as to how that might work, eventually looking to maintain some familiarity and context of the current site by sorting the data into the subcategories laid out by ISO 37120; although our first draft of this selection process was a bit rudimentary, it served it’s functional purpose to be tested. As we considered how to sort this data, density was on all of our minds, and although we could do research and make assumptions about the level of density users would feel comfortable with, there was ultimately only one way to find out, and so off we went to test our prototype!
After the completion of low to high-fidelity prototype, we were able to begin user testing. Our methods of usability testing were interviews, contextual inquiries and A/B testing. We completed our user testing with five users; three Laurier Digital Media and Journalism students and two Laurier Faculty members. Due to the constraint of access to end users such as government and city planners, we found users that were closely linked to our end users in that they regularly use data visualization websites for school and work.
Our initial plan for our solution involved adjusting the scatter-plot layout of the data as presented in the current site visualization. We heard overwhelmingly from the users that the way the current data was visualized was actually “refreshing,” despite it’s somewhat clear usability issues, and we elected in our final prototype to focus more on adjusting the usability issues we found through testing as opposed to the actual data visualizations. We recommended looking into the data visualizations in more depth in a further sprint.
We adjusted our onboarding experience based on our testing feedback, trimming the fat off of our initial prototype and taking into account the needs and wants of our users.
I would personally like to thank Focus21 and the World Council for City Data for being gracious partners, and for affording our group the opportunity to work on a project that challenged us as students and designers in new and exciting ways.
Our group would also like to thank Seul Lee, Filip Jadczak, and Abby Goodrum for their continued guidance and support throughout the duration of the project, as well as our testers from the Digital Media and Journalism program at Laurier Brantford for being kind enough to let us test our ideas on them.
We wish Focus21 and the WCCD all the best moving forward with the project!