Planning An App
I’m on a team to build an app that links up volunteers and organizations. Fortunately my role is working in Redux (yay!), so I get to coordinate closely with our front-end and back-end leads. Redux needs to fetch from the server the right data at the right time, then serve it up to the state in a way that is easy to use. Part of my planning is examining user flows in similar apps.
Our app has two primary tables: users and opportunities. A user may be an organization that lists an opportunity (to volunteer, to donate, etc.); another user may be an individual volunteer to signs up for an opportunity. Immediately I thought of Meetup.com, whose architecture is nearly identical to what we propose, but with a different purpose and user group.
I must confess… I don’t enjoy using Meetup. I use it only as a necessary utility. This story is examining WHY, what can we learn from that, and — most importantly — can my team and I do better?
Let’s start with the Meetup search experience. The three screenshots below (left to right) are what I see when I click search, when I scroll down on search, and some search results.
After looking at Meetup as a developer, I immediately realized that the search screen just doesn’t “feel” like search to me. Yeah, there’s a search box at the top, but just below that is an event I signed up for. (Am I still in search?) And below that it shows “Your groups”, then more “Your groups”, then “Saved”. I think “I clicked on search, but I’m somewhere else, and this is confusing”. Scrolling farther down the page (I usually don’t) I see a list that also doesn’t look like “search” to me. But if I train myself to ignore the noise on the page and just use the search box, I get to results. Whew! I made it!
But wait… My results confuse me. I wanted to find a group and join it so I’m notified of their meetups, versus having to search for them individually. Are my search results groups or events? Determined to understand, I slow down and see that the bolder title is an event, and the subtitle is the group. I figure out my results are events, but that required head-scratching. Now I understand why I don’t enjoy this app.
What’s going on here? Well intentioned links on the search page read as distracting clutter. The search result data types are confusing. Could it be clearer?
Let’s get beyond feelings and what went wrong. Who does it better? What can we do right? With this perspective, I checked out Facebook, LinkedIn, Quora, and Yelp.
Facebook… so simple. I go to search (left) and before typing anything in, I see recent searches clearly labeled below. As I type, similar search suggestions populate below (notice that they don’t even need labels; we all see these every day when googling). So clear! My faith in search is restored!
And then there’s Quora. I love that beautiful blank search screen in the left screenshot. Want something that says “I am in search mode, and I have no results yet”… that’s your screen. I’m something of a Quora-search-novice, which is a plus for this exercise. Quora’s search confused me. Why? It looks almost identical to Facebook. Two critical details are different. With Facebook, I can either commit my search request as entered, or use one of their suggestions. With Quora, my only option is to use one of their suggestions. That tripped me up. Second, there is the “Ask Question” button below, which looks like a submit button to me. I clicked it, and realized I was about to ask the world how to boil water. I really don’t want to do that. Now that I understand how their search works, it’s easy for me. But I think that’s not quite the flow we’re looking for.
I always find LinkedIn and Yelp searches easy, but let’s analyze why... They both use the simple search box at top; so far that is universal. Look! LinkedIn has 3 buttons for people, jobs, and content. Super! Something like that would really clear up my confusion with Meetup. Recent searches are clearly labeled like Facebook. Similar to LinkedIn, Yelp has an extra option: location. Default location is near me, but I can change that. Now I’m getting more precise or greater clarity in my searches, and the extra information is still easy to navigate.
So what does that leave me thinking for our app? I’m guessing that I’m not the only geek on the planet that would prefer to know if he was searching groups or opportunities, and that — as LinkedIn does — an added level of detail is clarifying. Further, location might matter, so we could try to add that like Yelp does. We won’t be adding predictive typing, trending searches, or the user’s recent searches for our MVP, so we can see how our app tests without them and add if needed. But it seems the only additional content that should ever be on a search screen is other searches, so let’s not follow Meetup’s lead.
On to the user’s main screen!
The two screenshots above are Meetup’s main screen. From a user flow experience, how do I feel? Again… confused.
When I get to the main screen, at first I wonder why the icons are cropped on the right, then I realize I can scroll right. I now don’t know if I should scroll down or right, and I find the answer is both. But what is on this page? Are these MY groups? Well, the first group is. What is “Popular Now”? Popular in my interest groups, apparently. Why not just indicate that content is curated for me, since I don’t care what is broadly popular. OK, initial confusion gone; these are my groups and groups I might want to join. Got it. Scroll down… This looks a lot like the bottom of the search page to me (content-wise, certainly not style-wise). OK, if this is “my” page, a lot is missing. Back to confused.
Next. So who does it better?
Quora always leaves me feeling good. Why? I can identify four tangible ways: clarity of navigation, clarity of content type, appropriate visual prominence, actions and navigation clearly related to content. Let’s dig in.
Clarity of navigation: Where am I in the left screenshot? Home. Easy. How do I get somewhere else? You are thinking now, “duh”… and that’s the point. (Sure, Meetup has icons at the bottom, but I don’t know what to call them, and when I click on them, I’m confused as to what those pages do. If you think just having a navigation bar is enough, I can show you an example to refute that.)
Clarity of content type: What is on the home page? It is most clearly a list of questions. Not a list of authors. Not a list of topics. It is a list of questions. The questions have authors and some other information, but I know exactly what type of data this is.
Appropriate visual prominence: What is most important? The question. The question stands out. You can squint until all the other content is a gray blur, and you can still probably read the question.
Actions and navigation clearly related to content: Huh? I mean that “answer”, “follow”, “read more” are handled such that they are clearly supporting actions to the question.
So now look at the right screenshot above, my (rather unimpressive) profile page. Again, A+ on location: “You” doesn’t get much clearer. And since this is me, I can see everything about me (or at least how to find it), such as questions I’ve asked or answered, my stats, my content, etc. OK, I have none of the above, but if I did, they would be easily found. It feels complete. Bravo, Quora!
So what’s my takeaway for our linking-organization-and-volunteers app? If you are a user, you’d probably want to see 3 types of information: 1) a list of organizations, 2) a list of events or opportunities, and 3) all your profile in one place to give you the warm fuzzies that the app has your data straight. And at any given time, it should be crystal clear as to what data set you are viewing, and how to move around. Quora’s model is probably a good one to follow. Meetup’s model shows little information but large blocky icons that are about the size of blog posts. We’d probably be better off with clear text and smaller images for the lists.
Continuing on profile, let’s compare and contrast Quora’s and Meetup’s profile pages.
The two screenshots above are my profile page on Meetup. Not bad. I see my groups and my interests. It also says I have 20 RSVPs, but if I click on that, nothing happens, so I don’t know what those are. So the whole point of that app is to find meetups, so I do want to see those. How do I get there???
I click on the checkmark, and the “You’re going” page has past and future events. Good. But what’s that bell? Oh, it’s updates. If I compare that list to my past and future list of events, I see they are the same lists, but presented differently. So why do I need 2 pages? Wait… 3 pages? Both of these could be subsets of groups I have joined and all fit onto my profile page. Can I visualize how that would work?
Scroll back up two blocks of screenshots to where I describe “actions and navigation clearly related to content” on Quora’s main page. Notice how the questions are prominent, and there are supporting actions. Maybe a list of events could indicate an update with a flag, # of attendees with a symbol, and photos posted with an icon? In our app, maybe a singular list of opportunities could indicate the organization by logo, and small symbols for what type of event, versus multiple list or pages?
I’m glad I did this exercise. An overall takeaway is that as a developer, this type of analysis is a valuable tool; I too often “see” things as a user, without “seeing” the details that explain why the experience is what it is. A second overall takeaway is that data types and data organization matter in UX. Most users might not think about “data” like a developer, but they know (or more often “feel”) when data types are presented in an unclear way. I’m looking forward to doing my part on our team, and presenting an app that demonstrates how we were able glean from some of the industry’s best examples.
