myDWIHN Mobile Application
AgreeYa Solutions - UI/UX Designer
Summary:
This project sparked my interest immediately after it was presented to me. It feels like healthcare becomes increasingly more inaccessible day by day (especially mental health), so it was nice to see that I would be a part of pioneering that change. Increasing ease of access to medical help for people is always good and if the application is built properly, it can help a large amount of people very easily.
In essence, the Detroit Wayne Integrated Health Network (DWIHN) wanted to create an app that aggregated all of their services so that they were easier to access for all. This included: an event calendar, a directory, and health screenings, among many other services. One thing they made clear was that we should create an app that is intuitive so those in need don't struggle to use it while attempting to access help.
Introductory Meeting
The introductory call for this project was concise and to the point. They introduced the project briefly and then opened up the floor for questions. We then decided to get started on laying out the features of the application & finding a way to prioritize them. This ended up being a bit tricky as DWIHN wanted to include a lot of features. We decided to proceed by speaking directly with the client & users about the features. This allowed us to get a better understanding of what they wanted to highlight in the application as well as what features were crucial.
Requirements Gathering
After the brief introductory call, we proceeded towards the requirements gathering stage. We intended to open up a conversation about the application that would guide our stakeholders towards providing more detail & direction for the designs.
One of my main roles was to make sure the UX interactions were exactly how the client imagined them to be. Something that I’ve learned over time is that establishing these interactions in the beginning can help prevent miscommunication in the future, really helps prevent scope creep
I was also in charge of asking additional questions to make sure that we had all the necessary specifications for the application. For example, the provider directory was a feature that we entirely had to redesign, as the old design was outdated and hard to use. I made sure to ask guided questions about the user journey & database so that we would be able to design a provider directory that was both functional and easy to use.
Initial Designs
Starting the initial design phase of this application was different than usual, as this was a point in time where my team wanted to shift the way we saw applications. One of the struggles that we had with other projects was that we kept redesigning elements that are generally fairly standard across different applications (especially on iOS). This included but was not limited to: the sign-in page, the settings page, and any calendars pages. To fight against redesigning the wheel, we decided to create a “master” design from which we could pick and choose pages that would make sense for whatever application we’re building. I was the lead designer in charge of creating this “master” design so I made sure to create an application that would be robust and adaptable to various branding styles.
Using this “master” design, my team was expected to create a basic design flow that would help illustrate our vision for the application as well as highlight some of the features that we wanted more discussion on. I thought this task would be extremely difficult at first, but the way that I had set up the “master” design allowed for flexibility, so it was not as challenging as it seemed. At this stage, my responsibilities were adapting a few of the pages to match accurate app information and designing the pages that were specific to the application (like the provider directory).
Iterative Design Process
Since there were a lot of pages and there was a time crunch, we made sure to work iteratively in waves with the client. This meant that instead of waiting for the weekly meeting to showcase a design to the client, we made sure to have at least 1-2 extra meetings during the week to make sure that both sides were communicated properly. As we would finish pages, we would alternate between tagging the client in Figma & having direct meetings with them so that we could move at a faster pace. Something that was important during this time was to ensure that anything we presented to the client was a focused design and all the details were ironed out, so that we would not be wasting anyone’s time. We also made sure to have a two-way conversation with the client so that we could have a compromise between design standards and business needs. This allowed for the application to accomplish everything it needed to, without causing the user to become confused or overwhelmed while using it.
Another crucial part of the iterative process was ensuring that we created designs that would stand ground in both light and dark mode. To ensure this, I made sure to focus on readability and contrast of all text/buttons on the pages. One difficulty I ran into while designing was that in certain cases, pages with a lot of white space worked in light mode but not in dark mode. I had to tighten up aspects of the design so that users had a good experience regardless of their theme settings.
At the end of this process, we reviewed the designs again with the client and users to ensure that the application was usable and had all the information they needed. Some feedback that we got from this was that certain pages of the application were hard to get out of, as it wasn’t immediately clear how the user could go back to the previous page or proceed to the next one. This was a very good observation as that would definitely be something that would make users unsure of using this app in the future. Our team also noticed that although the application would be servicing those may require immediate help, the application had a learning curve for learning how to access instant help. We made sure to add a button on the home page that would take users directly to some resources if they required assistance ASAP. I believe that this feature is very powerful as it will definitely help users if they are in a panicked state and are having trouble using their phone. They just need to click the big button on the home page and they’ll be able to access resources in 1 click.
Developer Handoff
After we were happy with the designs, we started to get the project ready for developers. As for other projects, this meant stringing together use case scenarios in the prototype mode as well as ensuring that it was easy to view the developer tools in Figma for every element we used. This process required restructuring a few of the pages, but in the end it resulted in something living that the developers could use to create the application.
UPDATE 1/11/2023 — The Application has officially released on iOS and Android, the links can be found below:
