Brief
The design brief was to launch a new medication reminder app designed for users with various medication schedules. The interface needed to be simple and easy to adopt so I utilized the Material 3 UI Kit to create a cohesive and visually appealing platform that users would feel comfortable with.
Wireframes
I began with a quick overview of the Material Design 3 design system and the main components and guidelines associated with it.
Then I began by sketching out some wireframes for some onboarding screens a user might encounter upon downloading the app. The key with the wireframes was to understand the user flow and navigation options someone might go through to reach the log in screen.
From there, I turned my atttention to the login and main screen. As with most apps today, I wanted to address the different log in user flows, like signing into an existing account and creating a new account. Upon login, I wanted the user to be able to see their daily medication schedule, so I drafted a quick wireframe with tabs so they could filter through the medications they'd taken and the ones they had left.
With these mostly solidified, I began to create the hi-fidelity wireframes.
Using the Material Design 3 components, I added all the buttons, and included some stock imagery to demonstrate the app. I added a progress indicator on the bottom so users would know where they were in the onboarding process.
I polished up the login screen as well, adding the appropriate buttons and imagery to round out the design, but then I figured there needed to be a way to sign in using other accounts. I made some space on the bottom to accommodate the various login options and added a simple divider to create some clarity between the two.
I spent the most time polishing the main screens, because I wanted to build out the functionality of the app. I filled in the All tab with some example medications and created and filled out the Taken and Left tabs. I also wanted to show how a user might enter in new medications, so I created a popup screen, indicated by the Floating Action Button on the bottom. Clicking the button would pull up the box seen on the rightmost screen and show the following text fields.