Designing the UI

Now that all of the different electronic components in Medicrate are working, I now have the enormous task ahead of me of designing the products UI and making all of the functions in product operational. This will involve a significant amount of planning and problem solving to ensure that the coding process goes as smoothly as possible. I have tackled large coding projects in the past but none of them have been nearly as ambitious as the code required for this project.

My first step in designing the user interface for Medicrate was thinking about different user scenarios and exploring how people would interact with the product. I then wrote down some very rough examples of:

-          How the user would refill the medication tray

-          What happens when it’s time to dispense for medication

-          How the user would use the portable medication tray

I also went through each step in the interaction like a button being pressed or a buzzer sounding. After this I then wrote down all of the background processes that were essential to the operating of the product, these included:

-          Calendar and clock functionality

-          Security functionality

-          Variables to keep track of medication stats

Menu flow chart-Initial Flowmap.png

This gave me some very basic notes on the different process which would be needed to make Medicrate operational. From this I started to develop some more detailed flow maps showing the different screens and functions that I would need to include in my code. My first version of this can be seen to the right and is more of a general idea of the different screens that will be needed for each function or status in the product. Although I could make a more basic version of the menu system without all of the different settings, it is important to me to create as fully thought out a product as possible. So, I intend on developing a fully functional menu system within the product with different variables which can be altered by the user.

After creating this basic plan of what functions and setting I needed to include in the product. I next moved on to develop an extremely detailed flow map showing all of the different menu options, functions and interactions. I took my time creating this, as I wanted the UI in the product to be as intuitive and well thought out as possible. The result of this can be seen here:

Orange boxes represent an option that can be altered by the user

Pink boxes represent a function

Green boxes show what options a user can choose from

Purple boxes show an electronic component being activated

Blue boxes show the console processes

Menu flow chart-Menu System.png
Menu flow chart-Functions.png



My next steps in continuing the development of Medicrate will be starting the code and using the flow maps as guidance. To find out more about this and the rest of my design process then keep up to date with my blog posts.