wUNDER ONBOARDING
an end-to-end product design project for Understood.
The product
Balancing trust and efficiency
Wunder is a mobile-native community platform for parents and caregivers of children with learning and thinking differences. Its primary purposes are to facilitate candid and honest discussion, access to experts in the field, and to offer personalized resources. My most impactful contribution to the app was putting together the onboarding flow and determining its outputs when the user reaches the home screen here.
The app aims to establish early on that its users should be able to speak freely without having to sugarcoat potentially difficult situations. Part of creating this safe space means thoroughly understanding what brought the user to the app, then using that understanding to guide their journey in an obvious way. However, asking too many personal questions upfront without an understanding of where that info goes runs the risk of diminishing user trust.
Thus, my goal here was to determine what treating user information with integrity would look like, and how to make the resultant outputs as useful as possible. From this point, the principal designer on the project crafted how those outputs would be handled over time on the app’s main screens.
Onboarding concepts + wireframes
How to ask the right questions
It’s worth noting here that Wunder’s primary form of engagement is in group conversations, similar to topic-specific parenting groups on Facebook.
Exploratory research in advance of design revealed that we would be mostly targeting caregivers who are already familiar with their children’s diagnoses and specific issues. As such, the most straightforward solution seemed to be to ask demographic and identifying questions, then give users a selection of groups to join and populate their home screen.
In order to give the most specific recommendations we could, we also divided users into four different groups — parents, educators, “here for me”, or “other” — which determined the demographic questions they’d be asked. In addition to specificity, this was also a way to ensure content stays relevant to how a user identifies. At this point, all users are also able to optionally indicate which types of learning and thinking differences they interface with, while being informed of what such data would be used for.
Once groups are chosen, users are offered an opportunity to check out the community guidelines. Whether or not they explore this option, they’re still informed that communities have guidelines at all and are actively moderated.
Home screen strategy + wireframes
Prioritizing engagement and participation
Originally, upon completing onboarding, users were to be met with a number of new groups to join, latest content from the groups they’ve already joined, links to relevant content on Understood’s main site, and engagement modules. The initial iteration of the homepage was an aggregate feed of new or recently interacted with posts, interspersed with modules that would recommend groups, site content, or unique media. This way, users would theoretically be kept engaged by interest in staying current with topics they followed during onboarding.
However, input from interviews suggested that users may in fact be more likely to want to lurk and assess the tone of the community before chiming in. To manage this, I proposed a “terraced” feed that would give equal emphasis to new posts, expert involvement, attempts at engaging users in new groups and topics, and website content. This was handled by chopping the vertical feed into carousels instead of long scrolls, thus making each section the same height and giving users equal opportunity to engage how they like.
At this point, we also introduced an “explore” page that was almost purely a news feed, so if users want to engage solely with their existing group and topic selection, they were free to do so.
Iteration
Rebranding and shorter flows
Upon review, it was determined that the onboarding flow was not only asking too many questions of users, but asking for more data than our back end developers could reasonably apply to group recommendations. To remedy this, we had to remove a significant number of user inputs. Most notably:
Asking for experience level with learning and thinking differences felt too vague.
“Location” had to be changed from predictive entry to zip code for easier tech-side parsing.
Asking for diagnoses bordered a little too closely on personal health information, which was not only a bit invasive, but also had the potential for HIPAA involvement.
Since we were now asking for less data, it also became possible for us to fit multiple user identities on the screen at the same time and allow users to pick any number that apply to them. Conveniently, the team working on updates to Understood’s main site were also putting together a similarly-purposed identification tool, so we were able to collaborate and create a consistent experience across platforms.
As a final added touch, we converted the group join module to a series of carousels, so users can figure out what topics interest them more immediately without having to scroll through a long list of cards.
All of these experiential changes coincided with the creation of an entirely new visual identity for the app and its marketing materials. Since the app was subject to our existing design system, both of which were used to create wireframes, in a lot of cases we were able to simply modify or create Figma variations for existing components. However, we were also given a ton of freedom to explore new shapes, textures, and element styles, creating first and systematizing what works best later on.
I used this moment as an opportunity to move onboarding to production-level design, while our principal designer used it as an opportunity to polish the homepage and finish making decisions around how its module selection should work.
Measuring success
Users got the picture quickly
Once the app experience as a whole was tied up and the rebrand was applied, I linked the screens together in Figma to create an interactive prototype for mediated usability testing. Our UX researcher, both designers, and even an intern conducted these tests with eight individuals over the course of two weeks, focusing mostly on whether the purpose and expected next steps in all areas of the app were clear.
We ended up with a 100% completion rate for each of the user tasks. When asked, users also fully understood why specific groups were recommended to them during onboarding, and saw that link continue into the homepage, with no concerns about trust.