VANNGUARD
A CENTRE OF ECOLOGICAL KNOWLEDGE
A space dedicated to those who seek to better the environment
Project Type: User Research, Brand Creation, Graphic Design
Role: UX/UI Designer & Research, Brand Designer
Industry: Environmental and Sustainability, Education
Introduction
Problem Statement
Norwegian adults (aged 25-50 years) are feeling overwhelmed when tackling the task of reducing their own household water consumption because they don’t think their actions have any meaningful effect, due to lack of relevant information, awareness and accessible tools to make them more aware. If this problem were to be solved, it would have a positive impact on them by creating healthy water habits through raising awareness and educating them, as well as a sense of pride and consciousness.
Proposed Solution
Vannguard: a social media platform available on mobile, with a focus on water conservation and environmental preservation. In this platform, users can share insight on environmental-related matters they have knowledge on, discuss new findings, and ask questions about inpending issues that others can respond to.
The final goal here to have the platform be a beacon of knowledge for those who would like to know more about this topic. Here, they can go to to be filled in with the latests news and discussions, while having insightful discussions with like-minded individuals.
Information Architecture
Before even starting on anything visual such as sketches or wireframes, a graphic was made to better structure all the possible features that will be made, and how they all connect with one another. This is the information architecture:
Solution Sketches
Following the information architecture, sketches were made to try and create some initial ideas of how the app would eventually shape up to look like structure-wise. The looked like this:
Wireframes
High-Fidelity Wireframes
The first version of the application was made after the initial wireframes, including a boarding page, login process, and the bulk of the app’s main features. The logo was mades as well, a shield and water to reflect the app’s goals.
I think when it comes to overall structure, I am satisfied with this results, but there are a lot of minor details that I think could use adjustments. The next step after the creation of these wireframes will be to put them through usability testing with users in order to find out pain points and potential improvements to the app.
Usability Testing
Upon completing the wireframes, I performed usability testing on individuals with ages ranging from 25-40, in order to check if the app’s layout was intuitive, as well as if they had any complementary feedback that could help with the improvement of the app.
Problems Arise
The majority of the data gathered within this case study was qualitative, asking questions that could point the project in the right direction. Here are the primary problems that were consistantly brought up by the respondants:
“Hard to tell what’s the header and footer”
“Landing page feels empty, like something is missing”
“App feels flat to look at, not much depth”
“The page where you register is boring”
One of the concerns brought my those who the usability test was run on, was that the entire app felt very flat and 2D due to the lack of depth in the pages. From this, I will make sure to add depth using some off-white colors for the background and play around with the footer and header to make them more prominent.
With this feedback in mind, I will add some flare and graphic to the landing page so it is a little more inviting and dynamic, rather than just having text. On a second look, I do definitely agree with these participants, the initial registering page lacks personality. So that will be another improvement for the final wireframe.
Project Development
Logo Creation
The logo designed for the application has a shield surrounding the water droplet, as a way to represent the protection of water and nature conservation A name was officially chosen for the app as well, that being Vannguard, a play on the word vanguard meaning “a group of people leading the way in new developments or ideas”, and vann being water in nowergian, the target group for this case study.
New Wireframes
With the first usability test done, and all the feedback gathered, I created a new set of high-fidelity wireframes with a more refined landing page, rehashed depth for the entire app, adjustments to the footer and header and other minor tweaks.
What is the future of Vannguard?
Usability Test
Doing yet another round of usability testing with a focus on more quantitative data would be interesting. Giving users tasks to fulfill within the wireframe and seeing if those features are actually easily accissible and understandable for new users.
Specific Changes
If I were to work on this app for longer, I would definitely be inclined to try and make the feed more social media-like, with a post on top of another per scroll. Having an officialized section for news from concrete sources is also a very enticing idea for the project.
Learning Outcomes
While creating overcomplicated designs should always be avoided, focusing too much on maintaining overall app simplicity can also be a negative. Adding detail, depth, and personality to a certain degree is needed for an app to stand out and be engaging.
READ NEXT
