Sketches
We began the UI design process by making six rough sketches. These initially were pencil on paper, but they have been copied digitally for this website as the features weren’t very clear on the sketches. These sketches acted as a medium to experiment with the placement of the menu and the home page layout.
We evaluated these sketches using the design principles laid out in the HCI lectures. Using these, we chose the best features from each to create the UI Figma.
Within these sketches, we primarily focused on implementing the Design Principles of Visibility, Feedback and Mapping.
The menu design of sketches 1, 4, 5 (and maybe 6) (all shown above) implement the principle of Feedback well, as the selected page is made clear from the state of the icons. However, they also suffer from Visibility and Affordance issues.
- In 5, the page icons open a labelled window placed on top of the home page, which can be closed using an x button, and in 4, a drop-down menu opens text buttons with the selected page button highlighted. These are good for feedback but require more taps to navigate away from the home page than a navigation bar. This is not ideal as it violates the Affordance principle: the home page is not the most critical or interactive page_ but these layouts present it as if it is the most important.
Sketches 2, 4 and 6 (above) maintain Simplicity and Visibility as they keep the number of features and the amount of text to a minimum. This makes it obvious what should be done on the home page - a Wellbeing Checkup (because at the time, we did not know that users should access the checkup through a notification).
- The menu placement on these pages is ordinary. Due to the pages' simplicity, it is evident that the buttons are page menu despite there not being a ‘Menu’ label.
- The menu design, however, in sketches 2 and 3 suffer from a lack of Visibility and Feedback, as the menu icons are identical and do not describe which page they correspond to. Therefore, regardless of which icon is selected, it is not clear which page is open. The icons in sketch 6 are much more descriptive. Consequently, we proceeded with simple menu placement: at the bottom of the page with descriptive icons.
-
Sketch 3 (above) does not contain this Simplicity or Visibility. The page is too cluttered to understand the purpose of this page. We did not proceed with any home page layout choices from sketch 3.
-
The slider in sketch 4 makes it very clear to the user that they should rate their well-being, so we kept the idea of a slider and the minimum number of features, text, and simple menu placement. However, we simplified it to a rating out of 10 as these were our Moscow requirements.
Some other design principles we kept in mind whilst evaluating these sketches include Mapping and Consistency. The menu design in sketch 3 suffers from a lack of Mapping as the circular buttons feature requires the user to remember which number in the slideshow maps to each page. The vague identical nature of the menu buttons makes this extremely difficult. In all these designs, the idea was to keep the menu identical on every page to maintain the Consistency principle.
At the top of this page is our final UI Figma, which implements the most successful parts of our sketches:
-
Horizontal Navigation Bar Menu at the bottom of the page (from sketch 2)
-
Descriptive menu icons (resembling sketch 6)
-
Highlighted icon for the selected page (from 2 and 3)
-
Using a slider to rate wellbeing (from sketch 4)
We distributed the UI Figma to potential users and received the feedback that the UI was not clustered, the buttons were clear, the colours were pleasing to look at and the pages were easy to navigate to.
Final UI Design
Design Changes
The design of the app has changed since making the UI Figma, technically and visually.
Once we had become more familiar with the requirements, we added a series of introduction pages to gather setup information and introduce the user to the app.
We also narrowed down the number of pages to 4:
- Wellbeing Diary
- Home
- Support Network
- Settings
We removed the Publish page in the Figma at the request of our project partner. The Checkup page is now accessed through a notification rather than from the navigation bar.
Colours
On both the website and the app, we confirmed that the colour schemed we used were colour blind accessible using the resource below [1].
The circled colours in the image above are the colours we chose for the map, which can be found here. They were chosen in order to appear different to people with deuteranopia, protanopia and tritanopia.
We only used four colours in the mobile app, the dark purple and blue that can be seen in the buttons below, a lighter purple background and grey headings. Blue and purple is not a sensitive colour combination for the three most common types of colour blindness.
References
(1) How to Use Color Blind Friendly Palettes to Make Your Charts Accessible