A Case Study of wOnderZeit’s mobile app
OVERVIEW
wOnderzeit is a search engine for parents, teachers or guardians. It supplies websites that are mostly locations, events, activities or courses that cater for or include families and children. Our client considered parents as their primary users with teachers and tourists as secondary users. wOnderzeit also has social presence on Instagram and facebook.
wOnderZeit means to spend time to learn or discover. Wonder in german means to learn, discover or wonder while zeit means time.
wOnderzeit’s mission is to encourage family time, allowing families to enjoy activities together. Also, their brand attributes include the following:
- Time spent with family is invaluable
- Should be child & parent friendly
- Should be educational
- Ensure the well-being of a child
- Should be professional to providers but friendly and casual to users
CHALLENGE
For this project, you should build the mobile version of wOnderZeit. You should focus on the users’ experience with navigating the huge database on the website. Furthermore, once users find what they’re looking for, it’s crucial to present the information in clear and deep detail without overwhelming them (ex. tabs, anchor links, modals). It’ll be up to your team to facilitate the user’s ability to find offerings, among the vast database, best suited to their needs & interests
The UX Section
This section explains the design processes we took to understand the user’s needs for this mobile app. It includes the empathize, define, ideate and test phases.
EMPATHIZE
In this section, we carried out interviews and analyses to understand products similar to wonderzeit and parents who are our primary users.
Competitive Analysis
We analyzed direct competitors of wOnderZeit(google — which is a search engine and kindaling — an online course provider for children) and indirect competitors, top10berlin, visitberlin and getyourguide, which are tourist websites.
We deliberated over whether to include in the final prototype are user reviews, favourites, help/faq and filter features which we got from the competitive analysis.
UX Strategy Blueprint
After we reviewed the research our client provided and performed interviews ourselves, we created a UX Strategy Blueprint that aligns user experience and business goals.
The blueprint was flexible because as we continue into the project we made some changes. Like our measurement was reduced from 10 minutes to 5 minutes.
User Persona
Now we gave our primary users a persona named Azu. We defined Azu as a mum with a kid who would love to spend time with her family and also cultural activities with her kid. So she needs to find activities that would develop her daughter culturally. She also needs to be able to find and schedule these activities easily. But she gets frustrated with encountering a lot of info while trying to find activities to do with her family.
DEFINE
From our business research, we validated the problem in the challenge that wOnderZeit has a huge database and users might face difficulty while attempting to navigate through the website to find what they need. We also realized that our users wanted to participate in activities that would improve their kids’ cultural knowledge — we’re narrowing them (users) even further to be immigrants.
Hence in this section, we would define the problem & hypothesis statements of wOnderzeit.
Problem & Hypothesis Statements
Based on our research, we defined the problem based on the validated challenge that our website has a lot of info which makes it difficult for the parents to find what they wanted and it takes a lot of their time. Sometimes they also get confused and this might delay their decision-making.
We also made a hypothesis that this problem — i.e. a huge amount of info — is solved when parents can find what they want in under 5mins and what they find is relevant to their needs and interest.
IDEATE
After we had defined our problem & hypothesis statements, we started to ideate to find features that would make up our minimum viable product. We were inspired by the features our client projected from their thorough UX research and features we saw from other indirect & direct competitors like railway ticketing apps, google map, google search & airbnb. This stage would explain the moscow method and MVP statement.
MOSCOW Method
We performed moscow method to decide the features that are necessary to solve our problem statement.
Recall that our purpose is to ensure our users can find whatever they’re searching for on our app in under 5mins (assuming of course that they’re only searching for one thing). We included all the features in the ‘must have’ section; the save filter setting and save favourites sites in the ‘should have’ section. We didn’t include the onboarding because we assumed that our happy path involves a user already as an account with us.
MVP Statement
After deciding our features, we defined our minimum viable statement as using filters to help parents quickly find events or activities on wOnderZeit while at the same time ensuring that the filters are not overwhelming for the parents.
Concept Sketch
We sketched how we imagined wOnderZeit mobile app would look like. I was in conflict with showcasing our sketches in this article because our final prototype turned out to be totally different from what we imagined. But I gave in because it definitely inspired the process to the final prototype. Also, this is the first project (other than the first project during the BootCamp) where I sketched before forming the sitemap and userflow. And I guess it was valuable because I didn’t have any idea of what it would look like at first so sketching helped with the sitemap and userflow
The first upper three paper sheets were by me while the rest were by my work partner, Luz
Sitemap
Now that we knew the pages that would make up our app, we defined the sitemap for our app. Since we didn’t want our users to be overwhelmed so we had only three primary navigation pages. The activities page would contain scheduled events or activities which we named upcoming activities/events in the moscow method. The main page is going to contain recommendations, upcoming, happening today & near you cards which are subpages. We decided on these subpages based on the results of our usability testing.
Userflow
We created a happy path that shows how we expected our users to find an activity and pay for it.
mid-fi wireframes
USABILITY TESTING
We refined our wireframes after getting constructive criticism during our testing. In the image above, I included the responses that stood out.
They wanted the options in ‘for who’ to be a multi-choice rather than a radio button and to include’ nursing mum’ and ‘strollers’ options in the ‘for who’ section. I wouldn’t have thought of this since I don’t have a kid. This is one of the situations that shows the importance of usability testing. They also wanted to include restaurants as activity theme i.e restaurants that provide spaces for families (with children).
We also included the ‘similar activities’ and ‘other experiences to discover’ due to the responses from our usability testing.
VISUAL COMPETITIVE ANALYSIS
We analyzed the visual aspects of websites we considered to be competitors ( top1berlin, kindling, visitberlin and getyourguide ) of wOnderZeit. We did this to understand the ‘conventional’ and decide which we would imitate. We studied the colours, shape and size of components and typography used in these websites.
Apart from visitbelin which used two colours, others used three colours at most. Also, top10berlin’s website had a professional feel, its button has square corners. Kindaling and visitberlin’s websites felt like they were in between professional and playful and their buttons’ corners were only slightly rounded. Getyourguide had a playful feel and its components’ corners were rounded.
BRAND ATTRIBUTES AND MOODBOARD
We wanted wOnderZeit to be trustworthy for parents with children of all ages and playful so that kids who navigate through our website won’t get bored. We also wanted to connect families together and provide educational activities for all children.
The images on the right side of the picture make up the moodboard which we used to visualize our brand attributes for our clients.
STYLE GUIDE
In our style guide, we have the wOnderZeit’s logo made up of the project’s main colours: orange and turquoise. Then we have the primary colours for the mobile as chosen by our client: orange, yellow, green and blue. We used black, pink and grey as our accent colours. We wanted to have the colours show that wOnderZeit is playful. Our typography is noto sans. We decided our components would have a neutral feel to show the educational and trustworthy attributes.
HI-FI PROTOTYPE
USERS & AUDIENCE
Our users can be parents, teachers or guardians. But specifically for this project, our users are immigrant parents.
ROLES & RESPONSIBILITIES
Although we participated together in every aspect of the project, I focused on the user research while my partner, Luz, focused on the design for the presentation.
SCOPE & CONSTRAINTS
Since we only had a month to work on the project we could only focus on the happy path of searching for a museum and paying for its ticket and designing an empty state for ‘my activities’ screen.
OUTCOMES & LESSONS
In this project, I learnt flexibility. Normally for my previous BootCamp projects, I would follow a plan of sitemap, userflow and then sketch but for this project, I sketched before sitemap and userflow. My partner proposed this and (although I had a minor clash with my partner due to this since it wasn’t something I was used to) it was actually helpful to sketch first. This is because our project was different from the other projects I’ve built so far — there isn’t any exact/reference app for it. So sketching first helped us visualize the screens of the app.
We focused on the users and not the providers. If I could work on this project again, I would love to work on the provider aspect of the app to include a feature our testers wanted: a feature that would permit them to create events themselves.
Our clients wanted to have features for online courses but due to the restrain of the project, we couldn’t work on it.
For this project, I learnt about de-emphasizing. While adding the favourites icon to the card as shown below, I initially wanted the stroke of the icon to be green but I discovered that it stood out but it shouldn’t so I made it grey
I have decided that I might — unless I work with a team that changes my mind — not be building moodboards in my future projects. This is because we didn’t use the moodboard we build to design the app so I currently don’t see its importance
I decided to use this project to practice empty state, I designed the empty state of “my activities” screen. I didn’t forget a cta button!
Oh, I should also include that we couldn’t have an onboarding screen because our happy path assumed that our user already has an account with us. So moving on, I would love to create an onboarding screen if I get to work again on this project.
