Sarah - Nowora

User Problem

When people get diagnosed with food allergies they are often overwhelmed with grocery shopping. Also in later years when they have checked a product already five times before they will still review the ingredients list for its compatibility. This leads to an enourmous amount of time and unsecurity being spent in supermarkets.

Goal

Providing people who suffer from food allergies with a digital solution which helps them check which products they are able to eat

Role

All (Adobe XD, Illustrator, InDesign, AfterEffects, Wix, Facebook Ads Manager, Canva)

Specification

This user problem was discovered by my colleague Hannah who was working on a project on healthy diets with parents and their children. By interviewing parents it got clear that the problem lies not in getting children to eat healthy, but if they suffer from food allergies to understand what they are able to eat. Here, the parents would have wished for more support.

Due to this insight Hannah decided to work on the idea even after the project had ended and searched for fellow students with an interest to join her. She found Konstantin, Max and me.

Left to right: Max Malinowski, Konstantin Schopper, Hannah Habermeier and Sarah Sommerschuh

Since February 2021 until June 2022 we had been working on Nowora and becoming a StartUp. Due to personal changes and having issues with finding and getting access to a secure and save dataset regarding food allergies, we had to decide to stop the project. Even though it was sad seeing it end, we learned a lot and gained many entrepreneurial insights.

Logo

In one of our first team meetings we had a naming workshop. Our final name was decided on Nowora. We came up with this by building the sentence

"No worries for people suffering from food allergies"

which is the ultimate goal we want to achieve.

After that, we needed a logo. We kept hold of the fact that we wanted a conection in the logo to allergies as well as the grocery shopping. Therefore, it had to be a combination of a wordmark with pictorial elements. After first sketching some ideas on paper, I finalized the favorite design in Illustrator.

PoC

At the beginning we run through a Proof of Concept in order to make sure a big enough part of the target group had an interest in our idea.

Concept

The concept behind our PoC was to lead potential users via social media advertisement to our landing page. On the landing page we simulated an already existing Nowora App. We offered a deal to get Nowora 50% off for the first 3 months. In this way we could also prove the willingness to pay for our service.

We limited the amount of possible registrations for this offer to 150 and added a CTA button to buy the App now.

After clicking on the button a message declared that unfortunately Nowora was not available yet but that we are thankful for their valuable feedback. Users also had the possibility to leave their contact details and subscribe to our newsletter.

Landing Page

Due to the amount of data we needed to gather for the PoC, we decided to build the landing page with the website builder Wix.

In total, we did two social media campaigns and redid the landing page for the second one.

To present Nowora as an already existing App in the first camapgne, I built five different screens with Adobe XD. Next to that, I designed six different icons to visualize Nowora's special features as well as made an illustration to ask website visitors if they see themselves having the same problem with choosing food products. Additionally I created a small confetti animation with After Effects to promote our 50% off deal.

Screens

Icons

Illustration

Iteration Landing Page

After the first campaign, the Landing Page got revised. The main point was to reduce the amount of text and make it appear more slim.

Following you can see some examples of how it got changed.

Social Media Advertisement

To direct potential customers to our Landing Page, we started two Social Media campaigns by using the Facebook Ads Manager. With its help we placed ads specifically for our target group on Instagram and Facebook.

In the first campaigne we only used one kind of ad and design. For the second one we had the learning that Facebook's algorithm knows after some time, which ads are more worth to show to the target group so it was better to feed it with more various and different kind of ads.

I designed them by using different Canva templates. Here you can see three examples for different story versions.

Website

After a very succesful PoC, I had to transform the landing page to a homepage. On there, the following factors had to be included:

Present the actual current state of the app
Give information about the app
Give the visitor the possibility to register for participating in a user test
Give the visitor the possibility to sign up for our newsletter
Bundle the content and information from our social media posts

Go directly to the homepage by clicking on the button (P.S.: It is only available in german):

Home

Product

Knowledge about allergies

Team

Prototype

Persona

For orientating the design on one persona I created Anna Allergy. Anna is a mother of a young boy who got diagnosed with milk and nut allergy. She always has to worry about her son and has a constant fear of feeding him something non compatible.

Graphical Manual

To have a suitable color scheme and matched design elements to implement a Corporate Design I created a graphical manual. In here, e.g. the colors and fonts are explained and listed.

Have a look at it here:

Icondesign

For selecting the suitable food allergies, icons should represent them. After first sketching them down on paper, I designed them in Illustrator. This is the outcome:

Left to right: Celery, Cereals containing gluten, Crustaceans, Eggs

Left to right: Fish, Lupin, Milk, Molluscs

Left to right: Mustard, Nuts, Peanuts, Sesame seeds

Left to right: Soya, Sulphur dioxide

Next to that, we needed an icon to symbolize the scan function:

XD Prototpe

For designing Nowora's MVP, the barcode scanner, I used Adobe XD. After the user testing, which will be explained in the following section, I revised the prototype. The revised elements will be shown later. Here you will see the final prototype which serves as the basis for programming.

User Testing

Planning

To test the prototype's function, design and usability we conducted two user tests. For the first test, we contacted those who had signed up as possible user testers on our website and arranged five online tests. For the second one, we tested the revised prototype with family and friends. For each of these I prepared the following documents:

Explanation of the procedure

Consent form

Demographic Questionnaire

Questionnaire about grocery shopping behavior (just for the first test)

List of User Tasks

Link to the XD prototype

Questionnaire after the test as well as the short form of the SUS and UEQ

Execution

For the tests, we either had online meetings via Zoom or Skype or met with the people in real life. We firstly introduced ourselves and explained briefly what this user test is going to be about. Then we collected the tester's consent to record the sound of the meeting and started with the first questionnaires.

Afterwards, we introduced them to the following scenario: They should imagine themselves in the role of Anna Müller, who just got diagnosed with nut allergy and has downloaded Nowora to help her with her grocery shopping.

They then were supposed to open the XD prototype and solve different smaller User Tasks, while we let them know to please think out loud. We note down every comment, mistake, problem and what went good.

In the end, we had them fill out the smaller versions of the SUS (System Usability Scale) and the UEQ (User Experience Questionnaire), which I had transformed into Google surveys. Finally, we asked them some last open questions.

Revisions

After the tests were done, we put all our information together in a excel sheet and I started the evaluation. While we do not want to share the bigger key points & insights, I can show what got changed in the prototype:

Adding a second input field for verifying the password

Changing the eggs icon since it was too similiar to the peanuts

Making the tutorial cancelable and more identifiable as well as adding a help site on top

Changing the barcode scanner symbol and adding a navigation bar

Whole plane with color better than one circle plus changing the alternative button's color

Reduce the amount of pages