Feature: Filtering of multiple data files
User Story: As a prospectivity modeler, I want to filter data files by various metadata such as data type, date created, and keyword so that I can easily narrow search results for the specific data file I'm looking for
Wireframe for a Geospatial Data Application
Designed a high-fidelity wireframe to show the vision of a new internal application for a large mining company
Delivered the minimum viable design for an internal collaboration tool
A global mining company needed to upgrade their geospatial data application to help their scientists and data engineers make data-driven decisions and decrease the time required to uncover valuable insights.
Responsibilities / Team: UI Design Lead (myself) and a UX Lead
Timeline: 3-4 weeks
Client Stakeholder: VP of Engineering
Target Audience: Data Engineers
Foundational Research
Prior to the start of this project, there was a design thinking workshop that was conducted and many reference materials that outlined the vision and goals for the client's geospatial data interface of the future.
For the first few days, I reviewed these materials and drew a few conclusions that helped us shape our approach:
Aligned on the primary persona who would use the data application, their objectives, and pain points
Documented attributes of the desired future state
Documented important features highlighted in a video by the Chief Geologist on her vision of how this interface would look and function
By reviewing previous documentation and validating information with the project team, I could begin generating designs that were relevant and specific to the original goals.
I created several wireframe iterations, from paper to high-fidelity digital
Paper Wireframes
Based on the most critical tasks for the primary persona identified in the foundational research, I sketched several paper wireframes to rapidly generate many potential ideas.
Step-by-step process:
Converted each feature to a user story to articulate how each feature would benefit our primary persona
Created 3-5 sketches for each user story
Reviewed sketches with UX Lead and identified the best designs to move forward to create digital mockups
The goal of our digital wireframes was to demonstrate the user experience, rather than the visual design (colors, fonts, iconography, etc)
Digital Wireframe Iterations
After sketching wireframes on paper, I leveraged Figma to create low to medium fidelity digital wireframes to present in weekly UX readout sessions with the client. Over the course of 3 weeks, I created 7 distinct iterations that added new features and incorprated feedback, subsequently.
Step-by-step process:
Quickly learned how to work efficiently on Figma by creating reusable design components
Created wireframes for several features, before constructing a cohesive narrative to present in UX readouts with clients
Incorporated feedback from each UX readout by building on features and augmenting expeience to be responsive to user needs
Client Feedback Sessions
Every week, we hosted two formal feedback sessions (one internal, and one with the client team) to gather feedback that we incorporated into each iteration of our wireframe
For each readout, we outlined a specific objective, agenda, and areas where we were looking for feedback or input
UX Readouts with the clients were critical as they helped us better understand the data engineers' needs and ways of working.
For example, we discovered that bias is involved in the cleaning and filtering of data files by quality teams; and so, it's important for engineers to access the trail of all edits and versions for each data file
We incorporated this specific piece of feedback by adding a feature that communicated the version number and date of each unique file
Final Wireframe and Impact
The final wireframe was a non-clickable, annotated storyline that covered features and prototyped experiences for the MVP and future vision of the internal tool. Eventually, the UX work led to the development of a fully functional MVP.
The client team socialized the final wireframe with other key stakeholders to garner buy-in for the project and a shared understanding for their database interface of the future
The development team leveraged the final wireframe to understand the various features and experiences to make the internal tool easy-to-use for data engineers
Iterating and incorporating several rounds of client feedback into the final design provided assurances to the project manager that the design was relevant and addressed critical pain points
-
A few screens from the final annotated wireframe, which was focused on communicating key functional features of the tool rather than visual elements
-
A few screens from the final annotated wireframe, which was focused on communicating key functional features of the tool rather than visual elements
-
A few screens from the final annotated wireframe, which was focused on communicating key functional features of the tool rather than visual elements
At the end of the project, I requested feedback from key stakeholders
Project Supervisor
"Thank you so much for all the hard work on delivering the vision and wireframe. As you already know, the client loved it and already feeling like they are getting a huge value out of this. Great job! We would love to work with you again."
Project Manager
"Ankur did a fantastic job on the project. He had great ideas and inputs for the wireframes. Ankur was able to deliver in a very fast-paced and aggressive timeline. He collaborated very well with the team and was very confident speaking directly with the director level client team."
UX Lead
"I am consistently impressed with his dedication to thoroughly understand the design process and come up with creative solutions to meet the client requirements. He is always asking great questions whenever he needs additional guidance, is quick to implement feedback, and turns high-quality work with minimal supervision."
What I learned from this project
Building a responsive design: Given the need to adapt and frequently change the design, I needed to build flexibility into my working components to save time and effort. I learned a lot from seeking advice from my UX lead and YouTube tutorials on how to rapidly generate new designs on Figma.
Importance of collecting feedback: Great design is all about listening to your users and/or key stakeholders and involving them in the development of the solution. Through this project, I learned that it was crucial for us to present something to the client every week to keep them informed and aware of our progress, and provide them the opportunity to guide us in the right direction and provide insight into their priorities.
Refining details later on a fast-paced timeline: For projects with an aggressive timeline, I learned that its important to understand the tradeoff between detailed, "pixel-perfect" designs and "good enough" designs. For this particular project, it was more important for us to cover a wide variety of features and show different types of experiences; and so, my UX lead reminded me to stop designing a particular feature once I was able to demonstrate its basic functionality and intended experience.