Hunters & Gatherers

“Hunters & Gatherers” is a responsive web-app that lets users create unique scavenger hunts, connect to other players to play hunts together and organize public events.

Purpose

The project was part of my UX Design course at CareerFoundry and was developed over a period of four months. The briefing was to create an app that enables users to play any kind of hunts – the exact features, content and structure were up to me and to the results of my research.

Hunters & Gatherers Introduction Screen Hunters & Gatherers Event Screen

Objective

Existing apps were mostly designed for players who already have a fixed group of friends to play with. They didn’t provide the option to connect to other users – friends or strangers – to find fellow players and build a community around scavenger hunting. Adding such a social feature was the main goal for my app: users should be able to create profiles, contact other players and join or create public events.

Approach

I applied the Design Thinking process to this project, as only focusing on the user and emphasizing with hunt players and creators could lead me to a useful solution.

Hunters & Gatherers Introduction Screen Hunters & Gatherers Event Screen

1. Empathize

I conducted online surveys and in-person interviews with potential users to gather quantitative and qualitative input. Additionally, I read online reviews for competing scavenger hunt apps.

2. Define

I sorted my results on affinity maps and afterwards shaped three personas. Finally, I built user journey maps as a foundation for the following phase.

3. Ideate

Based on the opportunities that I worked out for the user journeys, I developed user flows for the most important features "Play a hunt", "Create a hunt" and "Organize event". The development of a sitemap that was tested via card sorting and constantly optimized, helped me to shape the app.

4. Prototype

To detail my ideas I started sketching mobile and desktop wireframes on paper. After turning them into mid-fidelity wireframes using Balsamiq, I created an interactive prototype in InVision Studio.

5. Test

The prototype was used for a usability test with six participants and later improved according to the users' feedback. Afterwards I developed two approaches for the visual design and tested them via preference testing. In a second testing cycle I asked fellow students to review my design and provide feedback.

Challenges

As I was working with most of these techniques for the first time and had no team supporting me, a few steps were quite challenging.

Usability tests

Finding test participants who match with the target group and who are available for in-person interviews were hard to find in such a short time, so I switched to remote tests and started offering incentives at some point.
Another hurdle was finding the right balance between rough prototypes that might confuse test participants due to missing functions, and elaborate prototypes that will cause participants to focus on the visual design too much. Spending a lot of time with testing and asking follow-up questions was the key here to get the feedback that would really help.

Prototyping

While working on this project I took the chance to try out a lot of software that was new to me – and found the most important learning here: Choose your software wisely, especially the prototyping software. The process should be all around the user and the app features, but working with a very limited and buggy software like InVision Studio stole valuable time, prevented quick changes and caused technical problems for participants when testing the prototype. I managed to find workarounds but will definitely switch to Sketch or XD for my next project.

Results

The final outcome is an interactive prototype consisting of 73 screens. It includes the introduction, the dashboard and the four features “Create a hunt”, “Play a hunt”, “Organize event” and "Find other players". Test participants stated that it was an intuitive, visually appealing product that they would like to use if it was ever going to be published.

(If you are led to the InVision login screen, try using a different browser.)

Furthermore I developed a styleguide that documents all guidelines regarding colours, typography, UI patterns, imagery, grids, tonality and accessibility.

Lastly I created this walkthrough video to provide a quick overview of all features:

Looking back

The original objective was to create a community around scavenger hunts, but in the end I had put most effort into the core features “Play a hunt” and “Create a hunt”. During interviews I realised the users’ needs are widespread through all features and no one would attend public events if the app is not easy to use and the games are not versatile and fun.

Looking ahead

I definitely gathered quite a few learnings to improve the process for future work on this app or other projects. Additionally to using better software, as mentioned before, I’d conduct more tests at different stages of the process – with fewer participants. Sometimes changing one element or adding one screen can solve five different problems users have with the app.
Last but not least: some ideas and possible functions got lost in the process due to prioritizing. Not every feedback can be implemented immediately, but keeping a list of all possible features and functions to work on in a more quiet phase will prevent getting the same feedback again and again.
On a second iteration I’d like to test the app in real-life situations to get even better insights on the users’ behaviours.

Game of Words

This app helps language learners to keep their motivation while studying vocabulary – with the help of short games.

Diese App soll Sprachschülern mithilfe von kleinen Spielen dabei helfen, ihre Motivation beim Vokabeln lernen beizubehalten.

Purpose

Hintergrund

This project was part of an introduction during the UX design course. As it was mainly about user research and information architecture, it ended with the development of a low-fidelity prototype.

Das Projekt habe ich während eines Einführungskurses als Teil der Weiterbildung zur UX-Designerin erarbeitet. Hier ging es in erster Linie um User Research und um die Informationsarchitektur, weshalb die Ausarbeitung nicht über einen low-fidelity Prototypen hinausging.

Game of words Introduction Screen Game of words Dashboard

Objective

Zielsetzung

Many people use apps to learn languages, but few of them stick to it – new excuses and distractions pop up constantly. The task was to find a way to motivate users to regularly occupy themselves with the language they want to learn.

Viele Menschen nutzen Apps, um Sprachen zu lernen, doch kaum jemand bleibt am Ball – es finden sich immer wieder neue Ausreden. Die Aufgabe war also einen Weg zu finden, wie User regelmäßig dazu motiviert werden können, sich mit der Sprache, die sie lernen wollen, zu beschäftigen.

Approach

Ansatz

Again I applied the Design Thinking method, which I will explain in detail below. At the end of the section you will find a nine-minute video presentation of the development process and the results.

Auch hier wandte ich den Design Thinking Prozess an, was ich im Folgenden näher ausführe. Am Ende des Abschnitts ist ein neunminütiges Video zu finden, in dem ich (auf Englisch) den Entstehungsprozess und die Ergebnisse präsentiere.

1. Empathize

1. Verstehen & beobachten

I carried out a quick competitor analysis at first, then conducted interviews with four potential users. All participants had recently tried to learn a new language or planned to do so in the near future. Also, all of them had experience with using vocabulary apps.

Ich führte zunächst eine Konkurrenzanalyse durch, anschließend Interviews mit vier potenziellen Nutzern. Alle Teilnehmer hatten vor kurzem versucht, eine neue Sprache zu erlernen oder es in naher Zukunft vor. Ebenso hatten alle bereits Erfahrungen mit Vokabel-Apps gemacht.

Game of words Introduction Screen Game of words Dashboard

2. Define

2. Definieren

I outlined the results in a proto-persona and several user stories – and finally shaped a problem statement and a hypothesis statement that address the most important needs and goals.

Die Ergebnisse fasste ich erst in einer Proto-Persona inklusive User Stories zusammen – und bündelte sie dann in einem Problem Statement und einer Hypothese zur Lösung des Problems.

3. Ideate

3. Ideen finden

I determined the features and functions the app must have to verify the hypothesis statement, and worked out in which order the user would execute them. I created user flows for the most important functions.

Im Anschluss machte ich mir Gedanken darüber, welche Features und Funktionen die App haben muss, um die Hypothese prüfen zu können und in welcher Reihenfolge der User sie benutzen würde. Ich legte User Flows für die wichtigsten Funktionen an.

4. Prototype

4. Prototypen entwickeln

I visualized the individual steps by sketching low-fidelity wireframes, which I used to assemble a prototype in Prott.

Die einzelnen Schritte visualisierte ich in low-fidelity Wireframes, die ich dann in Prott zu einem Prototypen zusammenfügte.

5. Test

5. Testen

To test the information architecture I conducted usability tests with three participants.

Um die Informationsarchitektur zu testen, führte ich mit diesem Prototypen einen Usability Test mit drei Teilnehmern durch.

Challenges

Herausforderungen

As a very visual person it was difficult for me to determine user flows without building any specific screens. What was helpful here was to create a list with all potential functions, followed by a sitemap – both being visual guides that were not too detailed.

Another challenge was not to be biased or influenced too much by existing apps – but still use design patters that users will recognize and know how to use. I decided to make a compromise: the introduction of the app, meaning the skill level test, should be quick and easy – and therefore use well-known patterns – while the games later on may turn out to be more complex and explorable.

Für mich als sehr visuellen Menschen war es zunächst schwierig, die User Flows zu bestimmen, ohne schon die konkreten Screens aufzubauen. Was mir dabei half, war vorher eine Liste mit allen potenziellen Funktionen und eine Sitemap zu erstellen.

Eine andere Herausforderung war es, mich nicht zu sehr von existierenden Apps beeinflussen zu lassen und trotzdem Design Patterns zu verwenden, die die User kennen und schnell bedienen können. Hier habe ich mich daher für einen Kompromiss entschieden: Der Einstieg in die App, also der Skill Level-Test, sollte schnell und einfach sein – also mit bekannten Mustern auskommen – während die Spiele später ruhig etwas erklärungsbedürftiger ausfallen können.

Results

Ergebnis

The project ended with the improvement of the low-fidelity prototype according to the test results. Afterwards I created a video presentation about the development process, starting with the persona.

Mit der Verbesserung des low-fidelity Prototypen entsprechend den Testergebnissen endete das Projekt. Ich erstellte anschließend eine Video-Präsentation, in der ich den Entstehungsprozess der App, angefangen bei der Persona, erläutere.

About me

I am Sabine Roloff, 30 years old and based in Düsseldorf. I’m a UX/UI designer with a background in art direction for online marketing. I have more than eight years of experience as an employee in agencies, working on a variety of projects for national and global clients.

I’ve learned to design for different purposes and target groups, as well as how to communicate effectively to clients and inhouse teams. I like to enrich my team with my skills and knowledge, but also appreciate to collaborate and gather valuable feedback in order to create the best possible product.

I recently made the move from business-focused marketing to user-centered product development to work on more complex and long-living products. I have a passion for designing solutions that have a positive impact on people’s lives.

I’m currently available for both freelance and contract work in the Düsseldorf area or remotely. Like my work? Let’s connect!

SabineRoloff (at) gmx.de

11/2019

UX Designer

04/2019 – 09/2019

Training UX design

07/2017 – 03/2019

Art Director

11/2016 – 06/2017

Junior Art Director

09/2012 – 10/2016

Junior Art Director

09/2010 – 08/2012

Intern / Trainee