I began taking the interface designs off the screen and onto mobiles by uploading JPEG stills into android phones.
Feedback I received:
- The scale of buttons and navigation links
- The placement of buttons and navigation links
- The background colour choice and pallet for the UI
There were a few issues with the scale of buttons and navigation links, mainly that type sizes were too thin to be clearly visible. A majority of the clickable links within the app are featured as icons, in this sense, most of the typography is simply there to accompany the icons and are read and not clicked on. Understanding this, the type sizes remain small in point sizes but I have made alterations to feature a bolder weight for more legibility.
After overlaying the hexagonal navigation system over numerous pages of the app, I discovered that it could potentially be a very confusing browsing experience. The hexagonal navigation overlaps areas in the app that had hexagons featured within the interface (such as the Filter buttons). In this sense it did not allow a contrasting distinguishing between the navigation buttons and the rest of the elements.
I attempted to create a greater contrast by adding a ‘fade-out’ overlay over the rest of the app when the navigation has been pulled down. But felt it was adding an additional element and not necessarily resolving the problem.
I have now modified the design with a drop down navigation that features a dark grey colour that would contrast from the majority of the UI elements that are in orange. The amount of navigation links has also been chunked down to three links: Filters, NFC, and Settings. The rest of the app features have been organized under these three main links and are accessible in the form of buttons or gestures (e.g. The series of pages for editing filters is done by holding and pressing down on the filter icons in the FILTERS page).
3. Colour choice
- White background is too harsh on the eyes and can be irritating when using the app at night
- The orange used for the elements are too vivid and contrasting against the white, further reinforcing the harshness to the eyes
- Suggestions to break the amount of white up
Based on the feedback received, I decided to revise the colour pallet to a more muted, neutral pallet. A soft beige replaces the white background, while a dark grey and de-saturated orange replace the original orange pallet. It allows for a softer contrast between the background and UI elements and is a little easier on the eyes in terms of brightness and visibility.
I began developing the template for a FilterBee pamphlet. I found from my own experience that nearly all the apps on my phone have been discovered not through the app store, but through hearing about it, whether through a referral by a friend, or an advertisement (e.g. Cineplex advertises their interactive TimePlay app that allows people to use their phones as a controller for large screen games and trivia). Or through seeing people use the app, (e.g. seeing someone checking out at Starbucks by scanning the barcode displayed in the Starbucks app).
In this sense, I wanted to approach the promotion of FilterBee through a print medium that would give a physical presence to a virtual tool. The pamphlet would be found in places where you would actually use the filter (libraries, cafes, schools, workplaces, transit stations, etc). And by giving people a number of NFC tags to start, it can help draw exposure to the app as people begin sticking them on surfaces and places and use them. The tangible side of the App brings it back to reflecting on the comments it makes on physical spaces and barriers.
The pamphlet would be distributed to introduce the app to people and hosts multiple panels that feature:
- NFC tag stickers (pop-out and can be shared and stuck on surfaces)
- Introduction to the App and what it is advocating for
- Brief overview of features of the app (GPS tagging, NFC tags, Setting timers for filters, Setting daily and weekly filter revolved schedules)
- Illustrated iconographic instructions for how to use the NFC tags
- Pop-out NFC adhesive stickers (are arranged in a honey comb pattern as a way to play up the bee theme)
- Closing tab for the pamphlet has a small hole punched in to double as a hanging organizer when folded out for the NFC tags. Can post it on a bulletin board close to your desk, on your fridge, etc. Helps maximize exposure by promoting the sharing of the tags (kind of like perforated tags at the bottom of public flyers) – post in institutions like offices and schools.
- Six panels front and back, roomy enough to host a lot of information, yet folds into a nice compact size.