BRIEF
This initiative was brought into motion due to the need for an easier and more accessible online ordering system for government-provided data. In order to obtain data from this government agency, customers must manually fill out a form, which can prove difficult for those that are less savvy, or even those that don't know what kind of data to request. This website will allow them to more easily figure out what data they need, how to request it, and check their data order status.
MY ROLE
Lead UX Designer and Researcher- set up and host a weekly sync with product owners, conducted user interviews, analyzed data, delivered discovery findings presentations, created wireframes, consulted with product owners and users
TOOLS
Procreate, Pen and Paper, Adobe XD, Mural
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/00caa10f-a6c9-4271-b082-cc3fd63ae2be_rw_1920.png?h=5cdf7a8aac6e9ce4407d70eeb39a14c1)
RESEARCH: Discovery Phase
During this phase, I read through existing engineering library (current repository for data that customers tap into), and walked through the process myself. The current data request forms are difficult to find, and it would be hard for users that aren't familiar with the pathway to navigate to the forms. Additionally, I was provided with MVP requirements, which is extremely helpful now that my team and I are entering the design phase of this initiative.
During this phase, I also conducted interviews with the product owners and other stakeholders, in order to get a more robust idea of what was needed for this initiative. During these interviews, we touched on both the external (customer) experience, and the internal (EL staff) experience. In addition to the documents that I was provided, I was well armed with information going into the workshop that I created and conducted.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/0c1356f9-3d9f-49c9-9b8a-e9e087373675_rw_1920.png?h=a63c3111c688057af7f96353bebee5ac)
RESEARCH: Workshop
During this phase, I read through existing engineering library (current repository for data that customers tap into), and walked through the process myself. The current data request forms are difficult to find, and it would be hard for users that aren't familiar with the pathway to navigate to the forms. Additionally, I was provided with MVP requirements, which is extremely helpful now that my team and I are entering the design phase of this initiative.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/495be096-f5d5-4eef-b88b-3e0e52f0a164_rw_1920.png?h=d7bfa4e8398ec6bc0bb115fa4d68fd54)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/83e9ec41-65bb-43f4-b6d0-a10856a7fa95_rw_1920.png?h=54d9abc801649d0f86aa8870e10343ae)
RESEARCH: Discovery Keynote
It was also important to create example user persona's for this microsite, in order to illustrate and promote empathetic design thinking throughout the design process. With the creation of these personas, it allows the users (client designers, developers, project managers, etc.) to always keep an open and empathetic mind while creating and iterating. This gives the client team(s) a good starting point and example for the creation of their own personas.
(Personas were created based on an existing client product- an insurance app.)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/17f70705-f6ec-4f2d-a5e3-7205d9eafb05_rw_1920.png?h=247014412c6f38a33910b2d29fc0e4a0)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/d49f1772-af91-46a7-81ce-53eb7487e2ca_rw_1920.png?h=4c23d8247ada74084ddb3e6e08f408fb)
WIREFRAMING- Low Fidelity
Wireframing is an essential first step in translating ideas into functional designs. For this data ordering service, our main steps were defining user flows, sketching initial concepts, creating wireframes, and iterating and refining these ideas. For these steps, I worked closely with the designers that I manage to come up with a cohesive design that we all agreed would be best to move forward with, and push to high-fidelity designs.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/29c7841f-7cc9-4d1e-9fc0-c74f85b1cc10_rw_1920.png?h=5069c88f2fac561d1815ed5386d05a79)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/d8412926-d622-445c-8d7a-0e513c68ccd6_rw_1920.png?h=1f63bbdc27b89445cc9c57932e156c51)
From here, we met with other teams (such as architecture, communications, and business analysts) to make sure that our designs were up to date with current client branding and needs. After confirming that our designs are sound, we brought them to the Product Owners for their feedback and approval. It should be noted, that we met with other teams a few times throughout this step of the process, to make sure that everyone was kept in the loop and up to date.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/2123cae9-bb7c-4817-8bff-078c2a7ae763_rw_1920.png?h=8a0bf1baff0d2134b840ea2c0c394681)
Building on the wireframes, I developed high-fidelity designs that incorporate client branding, including typography, color schemes, and imagery. This phase focused on creating a realistic representation of the final product, with attention to detail and consistency.
Building on the client design library that we already created for previous applications, we crafted additional interactive elements such as buttons, forms, and navigation components to reflect the intended user experience. This involved designing states for different interactions (e.g., hover, active) and ensuring that these elements are both visually appealing and functional.
Using Adobe XD, I developed interactive prototypes that illustrate the final product’s behavior. These prototypes allowed stakeholders and product ownersfi to experience the flow and functionality of the design in a tangible way, providing valuable feedback on usability and interactions.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/c80ee7e4-f457-49e7-b80c-ca8f49a3308f_rw_1920.png?h=06fd4769d2e2359ade4db8aa943e5f01)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/24c97fa8-edb7-4bf4-a189-f354fbbca0c5_rw_1920.png?h=0a3ff447c304f3c3dc0cedb50b2e7f32)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/c0bee49c-443a-4c08-84e2-cc0160837b99_rw_1920.png?h=8231974aaea0a0b61ca939248fb89d3a)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/0dd53adc-837d-4d4f-8a73-a4b7c0fc7c75_rw_1920.png?h=78639ed606c10a8feb5a97026c9ab280)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/90c3d876-4414-489d-808e-7c32c53ddfc6_rw_3840.png?h=f95befcfcf02acedfcbe58385aa568d9)
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/5b41cbf6-b015-40d3-8de5-b1533e89cb16_rw_1920.png?h=56bfd5c640471029b0eff63d9031754f)
CONCLUDING THOUGHTS
At the heart of this project was a commitment to understanding users, anticipating their needs, and crafting experiences that fulfill their purpose. The goal in this Internal Viewer redesign was to bridge the gap between what previously existed and new features that significantly improve the user's experience. After gathering user feedback through multiple workshops upon completion of the final product, I'm proud to say that we touched on all of the issues mentioned by users that existed with the previous version, and added new functionality that they requested.
CHALLENGES
Some challenges for this design were finding users to interview from all user groups. This was eventually completed, but due to the nature of the Viewer, and how many agencies utilize it, we wanted to make sure we covered all of our bases when it came to functions of the Viewer. Another challenge that we ran into was simply the vast amount of data that needed to be considered when designing this site. To remedy this, we worked closely with backend developers in order to better understand the sources and types of data that would be utilized.
![](https://cdn.myportfolio.com/3bb3f47e-18db-483a-aa86-916581899f1d/94f50387-fefd-4616-94af-71bf2746f77b_rw_600.png?h=54a9606ad7b1904d2d6ba90931f91339)