Google Design Exercise
Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.
My overall design process can be broken down into five steps; research, design, wireframing, high fidelity prototype and measurement. I focused mainly on providing the user the ability to seamlessly complete the three actions described in the prompt above; browse, search and propose. My research also led me to tackle current design problems, mainly in information organization that prevented the user from completing these three tasks. Below I describe my process and summarize my findings.
Understand The Scope:
With any design exercise, I first determine the scope of the task at hand. This leads me to understanding the why behind the problem.
Why am I designing this product?
Why are my users using it?
Why these design decisions?
I always keep these questions at the forefront of my design process. First, I broke down the scope into three actions that the user needed to do; browse, search and propose. To go further, I wanted to know, what goals are the users aiming to achieve with these actions? I broke down each individual action with the desired goal behind it:
Now, that I understood the scope of the project and the why, I was ready to look deeper into the users. Because the prompt was about new students in a school setting, I thought what better way than to use my own University as an example, interviewing my fellow students at New York University. The question I was aiming to understand behind my research was, who are my users and why are they using this product? I wanted to understand the user's motivations, needs, goals and expectations. My research phase was broken down into two areas; general market research and user research.
Why do users want to use this product?
What are they getting out of it?
Research suggests that student involvement in student organizations is linked to increased academic success because of the support system and community they build within these organizations. In addition to promoting academic success, it fosters growth and development of the student. Student organizations allow you to meet new people, develop soft skills and since education happens both inside and out of the classroom, it provides an overall well rounded education. Therefore, using this product only benefits the student; they make new friends, develop themselves and have a community of support.
I looked at other university's student clubs and organizations to get a sense of what currently existed for this process in general. Almost all Universities provided the same clunky, slightly outdated interface. Interestingly, I found out that most Universities, including NYU, use a service called Orgsync. that provides a web portal for browsing and searching student organizations. I was not very impressed with this service, yet most Universities used them.
Hashing out ideas and solutions after my user research interviews
I interviewed students from NYU, as well as a few from outside universities that also used Orgsync, about their extracurricular experience with student organizations when they were a new student. The biggest takeaway was that they found the process clunky and unintuitive, especially as a new student in unfamiliar territory.
I also sought out interviews from people involved in our graduate student organization, in charge of the student organization process to hear what the stakeholders had to say. They were aware of the problems, but struggled in figuring out the best way to tackle them. With NYU specifically, there had been attempts at creating an app (outside of Orgsync, which the stakeholders expressed distaste for), but the process for that was slow and unorganized. I decided to tackle the problem by designing an app that would address the problems expressed through my research and allow for the completion of the three tasks described in the prompt.
"There is so much opportunity here for students to get involved, and I feel like most of this opportunity gets missed by a lot of students who are just unaware of what is available to them."
- NYU GSO Leader
How can we design for new students to easily discover, find and participate in new student organizations in an intuitive and engaging way, fostering increased participation?
Understanding the user and stakeholder pain points, frustrations and needs, it was time to tackle how to solve these issues with design. From my user research notes, I summarized the key problems expressed through the interviews. Some of these were scattered information, lack of guidance and engagement as well as most students being unaware of all resources available to them. To solve these problems, the main goal was to tackle the design challenge of information organization.
I quickly sketched out some screen designs and layouts. I wanted to figure out the best way to organize club information. My solution to this problem was using Miller's law and the idea of chunking related information together and breaking everything down into categories. I also decided on adding a tailored recommendation system to each new student as a way to solve the problem of the lack of guidance and unawareness of the resources available.
Rough sketching design UI ideas for screens in order to tackle problems in simplest way.
After I had the basic idea down from some rough drawings, I moved on to Sketch where it was easier to move things around.
As stated, my main design strategy behind the wireframing was using Miller's Law, by chunking information together. The process of browsing, searching or proposing any organization comes with a lot of information that can easily get overwhelming to the user if not organized correctly. By assembling various related bits of information together in easily digestible chunks, I aimed to lower the cognitive effort required for the user to perform these three tasks.
This is especially critical for first time users of the app, which all new students are to any University service, because they haven't had the practice needed to encode the interface into long term memory. Their behavior towards the app hasn't yet become habitual, thus I sought to streamline the process as much as possible in a guided way, so any new user wouldn't get lost using the app for the first time.
The first four screens depict my goal of not only collecting the necessary information from a new user, but also integrating that information with new technologies, such as machine learning. The goal was to give tailored recommendations to each user about student organizations that suit their interest. My intention behind it was that at the very beginning, new users were immediately helped in finding organizations for them, making the process fast and stress free. User's that tailor an app with personal information are less likely to abandon it. I used this strategy to get engagement from the user at the very beginning, since this was a problem expressed during my interviews in the research phase.
One of the decisions I faced was whether I should include the option to skip setting up a profile and choosing interests (ability to skip above first four screens altogether). I decided ultimately against it since this was a University/educational service rather than a commercial one so getting basic information was crucial. Importantly, I thought that skipping this step would prevent users from performing the necessary actions of browsing, searching and proposing. For example, unknown users could not sign up for student organizations and most importantly having proof of a school validation, like a university ID, was necessary for student safety.
My biggest challenge designing the browse screen was finding the easiest way to browse a lot of information. My solution to this was to break it down into categories and reduce the amount of text presented on the screen. I wanted each student organization to have a photo with their organization name and a button that allowed to the user to see more information if they were interested. This prevented the user from being bombarded with information all at once and feeling overwhelmed. I wanted to keep the layout as clean and simple as possible with the user being able to swipe across to look at the different options in each category.
I chose to display organizations in categories of newly added, recommended for you and browse all. Newly added keeps the browse page always updated giving the user reasons to check back. Also, it allows for the promotion of new organizations that may be currently seeking to attain new members to their group. Recommended for you allowed for a personalized browse page for each user. It served as a help boost to those students that felt lost in finding what organizations suited them. Lastly, anyone had the option to fully view all organizations in one list.
Lastly, I designed the process for new students to submit an organization proposal. Most of the user research interviews I got was that people were unaware of how the entire organization proposal process worked. I attempted to design this in the clearest way possible on just one screen. The addition of having user's add categories to their organizations allows for the categorical organization of student organizations to be displayed to users in an easy to search and organized way.
I kept tools and features as sparse as possible. I didn't want to provide the user with too many different actions and functions because ultimately less tools actually make a task easier to complete. Too many clicking around can become confusing and overwhelming with a new app. Also because of this, I allowed foresight into the possibility that more features may need to be added in the future and the interface I created should be able to accommodate to new feature sets without breaking the visual foundation of what I designed.
Ultimately my aim in these wireframes was to organize all the information in a more digestible way for users in order to make the performance of the three necessary actions; browse, search and propose, as seamless and intuitive as possible.
Prototype - High Fidelity Screens:
Now that I had the basic wireframes down, the next step was to translate it into high fidelity screens! I wanted there to be touches of color in the background to give the app a refreshing and warm feeling that invoked a sense of community.
Browse Search Propose
Browse: I envisioned the ability to hold down on each photo box to have the organization info come up rather than having arrows to see more information. I thought this lessened the amount of clicking and allowed for faster browsing. However, I would need to get more user feedback and testing about which option was ultimately more intuitive and favored.
Search: Search was simplified into typing in a specific organization name along with filtering searches with categories below. I sought to always have a preview of organizations that came up from the search with the option to see all.
Propose: I made the process of proposing an organization all on one page to speed up and simplify the process. The camera icon allows the user to understand the quick process of uploading a photo. I designed the category buttons to be scrolled sideways to the right.
Summary & Learnings:
Overall, due to the time constraint, I was happy with where I was able to get in just a week. However, UX design is an iterative process! I did research and sought to strategize how to solve those problems through design, going forward with more time on my hands, I would have a few cyclical back and forth iterations of user testing and feedback, re-designing in response to the feedback in order to validate the designs set forth. Also, I believe design is collaborative and involves input and ideas from different people, so really getting the first draft of my designs out to as many people as possible allows me to have a good collection of diverse feedback.
I also believe these designs could eventually turn into more than students just browsing, searching and proposing organizations, but allow for a community of students to engage with each other as well. Maybe new students could be matched with other new students who shared similar interests as them or joined the same organizations as them. This would utilize the same machine learning technologies that allowed users to be matched with clubs that suited their selected interests. There could also be a community messaging board for each student organization and allow for the integration of Google Calendar to sync with student organization events coming up. This social aspect would allow for further engagement amongst users and the ability to utilize school resources to the furthest extent possible.
Growingly large lists becomes cumbersome for the user, so I sought to make searching as easy as possible with filters. This allowed them to see all organizations, but if they had a specific topic in mind and wanted to browse with some added filters, they could also do that.
Because the user was now browsing rather than searching, I thought the layout of each organization should be slightly different. I designed the photo next to a box with necessary organization information; name, description, number of members in the organization, and a button to join. When a user searches, they usually have something specific in mind they are looking for, so in this case, having a little more information presented is necessary. I also made joining easier with just the click of a button expressed through the plus (+) icon.
I thought allowing users to choose categories that interested them was beneficial for a few reasons. First, it allowed them to find organizations that suited them faster. This allowed for an opportunity to implement new technologies such as machine learning in order to provide a tailored recommendation system. This personalizes the app for the user and makes them feel like they are getting something beneficial from it as well as making it less likely to be abandoned. I also thought this could be expanded on later, in allowing students to find other students with similar interests and make new friends with their fellow classmates easier.
I designed the categories into simple, easily digestible buttons that not only conveyed the category via text, but allowed for a visual recognition with simple icons. This made choosing categories more fun and less clunky and overwhelming. Chosen categories highlight in a brighter yellow with a thicker border to clearly show what has been selected.