About Urbanicum

Have you ever gone outside, seen a mushroom or some herbs on the sidewalk, and asked yourself, "I wonder what this is..."?

Urbanicum is a quick and easy way to simply use your phone and scan a mushroom, a plant, berries, or whatever you may find outside that gets you curious. Do you sometimes wonder if, in your urban environment, between all the concrete and streetlights, there may be some potentially useful flora or fungi that's not "just useless weed"?

Just think of dandelions: Is it just a pesky weed? Or... do its roots have healing potential, due to their antioxidants?!

Urbanicum will inspire you to find out about the secrets of your city jungle and help you on your journey to see past the distracting lights and concrete and become a self-sufficient, knowledgeable city herb witch or druid!

read more Figma prototype

Thesis

Our Final Project was to focus on at least one of the 17 Sustainability Goals of the UN. Climate change, environmentalism and sustainability are important subjects, but they prove to be a challenge when trying to apply them in your day-to-day life. City dwellers tend to face the predicament of being too detached from the beauty of nature and what it has to offer. We decided to make it our focus to "revive" knowledge of what might be lost to the modern people, especially in urban environments.

Goal

We want to offer a digital solution to gain knowledge about local fauna and fungi and their potential, especially in larger cities. With a large focus on collection and gamification aspects, we want to strengthen the bond between nature and the modern-day city dweller in a fun and playful way.

SuperCode's City Witches

So who are we? We are the creators of the project "Urbanicum". We were a Team of 4 students at the educational institution called SuperCode, stationed in Düsseldorf Germany. Each of us had a prominent role in our graduation project. But all of us did equal amounts of creative work.

Design Thinking

To approach the project, we used the common UX Method called "Design Thinking". The general structure of the Design Thinking method is agile and can be reinterpreted for each project's needs. For Urbanicum we used the following structure:

  • 1. Understand
  • 2. Observe
  • 3. Definie
  • 4. Ideate
  • 5. Information Architecture and Story Telling

Walt Disney Method

We did our research on apps that offer certain features we had in mind. After understanding the problem and creating our personas, we conducted our field research interviews to get a general idea of what our potential users might like. The Walt Disney Method is a great way to approach the Ideation phase. Using three steps to get to a solid MVP:

  • Dreamer
    Brainstorming, whatever comes to mind: Quantity over quality. Even the craziest idea could have some potential to work with and spawn new ideas. This is called "Divergent Thinking".
  • Realist
    This is where we cluster the dreamer's ideas and try to create some solid features and characteristics that could realistically lead to a successful outcome. Quality over Quantity = "Convergent Thinking".
  • Critic
    The part where we take a closer look at our ideas to spot potential flaws. What would be too time-consuming, and what can we take away to end up with a fully functional MVP?

Stylescape

We started by creating mood boards with images, illustrations, elements, colors and fonts that we felt could capture the general look and feel of our app. This process was very useful to me personally. It helped me visualize the end goal and activate my creative flow. It was my favourite part of the whole process!

The final result is a beautiful mix of all our efforts.

LoFi-Wireframes

By referring to our user stories, we created task flows that helped us create a very low-fidelity prototype that later helped us see how the app should behave and where the User Experience can be optimized. Everyone in the course got a good first impression of our presentation.

Components & Design System

Given that I already had solid knowledge of using Figma and experience with "atomic design," I made it my task to create the component set. Additionally, I created interactive animations, such as the search filters and hover/active/focus effects.

The "Almanac" is the feature I focused on, and it's one of our core features of Urbanicum. The user can choose to search via text, tags, or categories for the different flora and fungi in the database of the app.

Final Design

see Figma prototype