Phone application
The app was designed to be a digital planner to give the client an overview and structure of their weeks in order to reduce overstimulation. The app is then connected to the watch so that the user gets notifications throughout different periods during activities in the week so the user takes time to reflect on their wellbeing and give feedback at the time allowing the user to be more aware of their mental state and health.
Requirements
Main parts of the app
-
The app should have an agenda that the user can fill in with their activities
-
The agenda should be able to show the day, week, or month
-
The app should have a page that collects the feedback from the watch and displays it for the user to review
-
The app should have a page for tips on things to do to help reduce overstimulation
Features wanted by the client
-
The activities should be able to be color-coded to give an easier overview of their day/week/month
-
The app should be customizable in terms of the color theme of the app
-
The app should be compact for ease of use
During the first co-design session, the team discussed what the client would like to see within the app so that a requirements list could be made in order to focus the design process. In addition to discussing the features, wireframes were drawn with the client to help her to visualize what the features would look like and work. Furthermore, the design of the app was also discussed with the client to make sure the look of the app would also be to the client’s wishes.
First mock-up
After the first co-design session, there were a few key elements that needed to be added to the phone application. First of all, a digital version of the KrachtPlanner, then a review section to see how your day went, and lastly a settings section to add and edit activities and notifications from your calendar.
All of the requirements previously mentioned, were included in a rough mock-up. This was made to see how the interaction from the user was gonna go and what other things should be added. There were 5 frames made: a homepage, settings, review and a monthly and daily agenda.
In the settings frame, the user could pick a color for the activity or event and choose how often they wanted notifications. The agenda frame was based on a calendar app, where the user can see the month and click on a specific date to see their plan for the day. Lastly for the review frame, the user could visualize how their day went and at what time they started to feel overstimulated.
Final mock-up
The final app was designed off of the client's own agenda, the krachtplanner, which she had previously had made for her and her followers. This was done to make sure the transition from a physical planner to a digital planner isn’t too drastic for her.
After the second co-design session, the final tweaks were made. Additional functions were established and included in it. It was agreed that a weekly agenda needed to be created, as well as a to-do list section, and an event separated review of the day, that way the user could know exactly what they were doing that caused their overstimulation.
Instead of having just five original frames, there were multiple others added to enrichen the app design and overall usability. Little details like icons, a login and sing-up page and a search bar also complemented the app.
Planner website
The website was designed based off of the final mockup of the phone application and the original physical KrachtPlanner. The website has the same functions as the phone app, with the only difference being the layout of the agenda as the larger screen allows for a larger weekly layout. This was done such that the website follows the layout and style of the application closely so that there wouldn’t be any unnecessary confusion when having to switch between using the online application or the phone application making it easier for the user to do so.
The co-designer likes to use her laptop for planning but always has her phone with her. That is why we designed both the website and phone applications.
​
The design of the website can be found by Results -> Final design