Project Concept

The Wood Buffalo Environmental Association(WBEA), is an independent air quality reporter located in Fort McMurray, Alberta. They have an app that allows members of the public to submit information about odour events that they experience in the region. All the information collected would need to go into a SQL database that is fully searchable by the WBEA for data analysis.

Goal is to redesign the existing app. Download it here

I am the UI/UX Designer on this project. My main responsibility is to redesign the existing app.
The team consists of myself, UX Designer, and Development. There wasn’t much interaction, as the project was small and no new features are added. The design needs a refresh only.
Since the project was small, there was a smaller budget. The existing app has few pages already so there’s only a few to redesign.
There is 10 hours to redesign. More time will be budgeted if needed.
More hours might be budgeted if review from stakeholders indicates more work needs to be done or new features need to be added.
The project is currently in design. There is an existing app already, and it will be updated as soon as the designs are completed and approved.

The home page was redesigned to give it a cleaner and more modern look while being accessible. The information in the panel was unreadable as there was the WBEA logo behind the text. This was updated to a white panel. The buttons throughout the application were also rounded.

The information on the menu was left aligned as it is easier to read for users and utilizes the space better. When the menu is centred, it ‘interrupts’ the users flow as there is no visual hierarchy. Users are also used to reading items on applications that are left aligned.

On the actual survey itself, I’ve used colour to organize information and make the design more interactive as well. The odour types colours were taken from a PDF that was provided by WBEA, and by applying the same colours to the mobile application, it provided consistency.

I was also able to use colour psychology to represent the weakness/strength of odours. This helps the user associate the intensity by visually making the scale lighter/darker from weak to strong. Colour aside, the panel on the original had insufficient padding outside the text, which was fixed in the new design.

The Activity section, same as the Odour type were both inaccessible as they were light colours on a light screen. By creating a darker panel, I was able to create some contrast which made the section more visible for the user.

The last section was grouped together to visibly separate it from the rest as these were inputs separate from the information above.