Rediscovering the ways students can study effectively
StudySmart | Product Designer | Fall -Spring 2019
STUDYSMART
CLIENT: UCLA
ROLE: User Research, Product thinking, UX/UI
DURATION: Fall 2019 - Spring 2019
How might we create a crowdedness tracking app that helps students to make a better studying decision?
Through this redesign, I try to reduce the time for students to locate study spots and create an efficient design solution that facilitates students' decision making process
PROJECT DESCRIPTION
About: StudySmart is a crowdedness tracking system that helps people to study effectively by showing the real time population of study spots. As a student in UCLA, StudySmart is a vital channel for students to access libraries, reserve study rooms and track real time crowdedness of various study locations. However, when the app first launched in Fall 2018 as part of the technology club DevX, it faced any new product's fear - dwindling user retention and increasing app deletion. Thus, the PM recruited me to redesign the interface from conception to launch.
Objective: Though the existing StudySmart app was released in app store in 2019, the app didn't receive good response. My goal was to address the problems students faced during studying and created a better application for students that prioritized efficiency, engagement and productivity in locating study spots. Through a user centric design process, I explored divergent design solutions that focuses on presenting data percentage efficiently and incorporating direction as the secondary path finding's assistance.
Process: I started the redesign process with a three phases' research discovery. The first part consisted of auditing the current experiences of 35 students who used the StudySmart application on a daily basis with semi structured interviews and full story recordings. From those interviews, I asked questions specific to the structure of the application and various users flows to build empathy on users. Gauging from the interviewee responses, I identified key pain points from the current user experience of the StudySmart UI. Second part focused on developing a comprehensive interview's proposal that was base on the previous user research and asked border questions related to users' studying patterns and their general academic concerns. In the last phase, I proposed various design solutions and underwent several rounds of vigorous user testings to find solutions best fit the students' mental model.
PROBLEM
Hypothesis
Most users abandoned using the original StudySmart's app because of the cluttered and confusing interface and they were not able to find relevant study spots in a quick manner. Thus, we hypothesized that if StudySmart provides a better way to locate study spots’ crowdedness, users will be more inclined to engage with the application.
Auditing the current experience
With the hypothesis in mind, I collaborated cross functionally with data scientists to leverage Google analytics and understand how users interacted with the app. From the retention rates, I was able to gauge three specific painpoints outlined below:
What are some user goals we trying to address?
With the specific pain points, I was able to construct some basic ideas of how to narrow the focus of my UI. However, in order to fully visualize users' needs, I decided to do some in depth user research to understand users' demographics and study problems they encountered outside of the app. My research focused on questions like:
-
How are users currently using Studysmart and to what extent do they use it effectively ?
-
Where does users become frustrated and why?
-
Which part of the feature being used and what’s not?
-
What other study problems are you facing in the campus?
Recording the interviews
I also leveraged different methods to build empathy on my users and built a stronger case for my case study.
-
User interviews
-
User session recordings through full story
-
User metrics
USER INSIGHTS
After the interview, I was able to gather with my team and listed in a percentage style layout out of those 20 users to gauge an accurate qualitative measuring. Here are the research insights:
Accessibility obstructions
45% of users expressed that accessing certain features like crowdedness data was extremely tedious. Many of the icons didn't align with the mental models of the users and vaguely described content in the search bar decreased users' navigational efficiency. Thus a more focused and streamlined experience is needed.
Progress tracking's difficulty
72% users often weren't able to complete project's dues on time because the current UCLA study platform didn't remind students of new assignments' submission time or tasks' requirements, which presented enormous hurdles to track classes' progress and led to a poor cumulative GPA.
Minimal interaction
88% of users responded that they only spent <10 minutes every time they entered the app and demanded that they desired to execute specific actions in a quick and efficient way where content were visibly displayed.
Poor transparency on study rooms' availability
Since UCLA is a public university, most of the study rooms are fully booked during exam period. More than 90% of the users indicated the difficulty to find desirable study rooms since they were not notified when rooms opened up in real time. This important problem is left unaddressed by the current StudySmart application.
DESIGN PRINCIPLES
After the user research, I was able to create some set of design principles collectively with my team and set on four that we thought were most aligned to users' goals and best to create a high business impact. I highlighted these 4 principles to guide my design's explorations:
Intuitive access
Plagued by its half baked visual identity and decentralized map navigation, the current StudySmart interface is the culprit of many headaches. With a streamlined search experience, users will be able to find study spots they like effortlessly and book study rooms at ease. Through a frictionless experience, they will be able to access classes and track their study's progresses.
Improved clarity is vital for users' retention
While the current application does not enable students to find classes that best suit their interests, I wanted to create a simple design solution that assisted users to personalize their schedules and prioritize assignments and deadlines in an unambiguous manner.
Elevated engagement
Most students abandoned StudySmart when it couldn't achieve their goals in a quick and efficient manner. By recreating the interface using understandable icons and intelligent actions, I wanted to develop a intuitive interface for students to access information efficiently.
A reliable visual system
The previous StudySmart application didn't present crowdedness data accurately, causing an immediate deletion of the app. With visual icons and colors that incorporated the element of trust, I redesigned the application to make it more welcoming for users.
DESIGN SOLUTIONS
I documented users' journeys and incorporated users flows to make informed design decisions by creating intuitive design solutions for the app.
Analyzing current market's solutions, I found that discrete percentage could accurately visualize data and served as an inspiration for my design explorations:
A. Bar graph
-
Pro: Allows easy scanability across specific time slots. High readability gives off a sense of comprehensiveness for choosing the study spots.
-
Con: Space inefficient as it takes off too many real estate for one specific study spot. Also tough for engineering to implement by showing all the crowdedness on various time.
C. Line bar
-
Pro: Makes color very visible to users and gives off a sense of urgency and needs of making decision quickly on respective study spots.
-
Con: Visually overloading might distract users from the actual percentage.
B. Segmented Progress Bar
-
Pro: Clearly separates degree of crowdedness into 4 sections which enables easy access to crowdedness' context without overloading users with too much info.
-
Con: Inability to show accurate percentage may lead to some confusing users' scenario. Accounts for edge case when all study spots around 75% crowdedness and being placed at the third bar.
D. Percentage
-
Pro: Distinctly categorize study spots with accurate percentage.
-
Con: Might take up more real estate by providing more information
How might we design a filter that is transparent and helps users to surface the most relevant results?
FILTER
The purpose of the filter system is to make categories more accessible to users while helping them to efficiently navigate to different study spots. In understanding what users desire for amenities, I underwent a round of user research to ask users what kind of content they would like to see for study spots' amenities.
After knowing what content needed for the filter system, I then look at how to design the UI with three things in mind:
-
design of the filter to enhance users navigational efficiency
-
clear indication of the filter applied after the original empty state
-
presentation of a clean filter system
A. Segmented control tab + Full screen slideover filter
-
Pro: All categories of filter are displayed in one screen size and users can filter by pressing the button down below, increasing efficiency
-
Con: All tabs are mutually exclusive, preventing multi-selection of filters
B. Scrollable navigation tab + vertical collapsible filter
-
Pro: Allows muti selection of filters and popover filter menu is easily reachable, increasing thumb accessibility
-
Con: Limited real estate of the menu filter may easy cause some interaction problems
C. Scrollable navigation tab + filter through modality
-
Pro: Filter through modality provides a more explicit entry for users while making each category more personalized and separate
-
Con: Might be harder to reach by thumb
Soliciting feedback from users' critique, I decided on filter through modality for the following reasons:
SEARCH
A better way to surface relevant results to users
An extremely content dense app with different study resources and study spots. This makes the current UI difficult to find info fast. This makes me wanting to build a smart and powerful search system.
I studied the way apps like LinkedIn and Slack in which content can be grouped and easily searchable. The use of tag-based content sorting takes advantage of the native grouping of content within StudySmart to streamline search results, while segmented control allows users to focus on one aspect of search result with a simple information architecture. I decided to go with tag base search since it streamlined results precisely.
Tracking student's progress through personalized task creation
As research suggested that 70% of the users couldn't keep up with their work, many students have failed to keep up with their classes and led to poor results. With a dedicated class planner that accommodates a grab and go style design where users are given quick and relevant info about their tasks, it keeps a well-organized record of all the tasks assigned and further info can be accessed through the second layer about specific tasks
Dashboard with categories broken down
Modal that customized your task list
STUDY ROOMS
How might we make the room booking feature more accessible to users?
The last thing I looked at while designing the StudySmart app was to make the room booking feature more accessible to users. In auditing the current experience, I found that the UCLA main website provided users to book study rooms. However, users expressed concern because most of those study rooms were fully booked during exam periods, in which users had to physically visit the study place to book rooms. In order to tackle the issue, I brainstormed a notification system to help users to book study rooms in advance. Here are some design explorations:
-
Users find pre exam period to be most promising, because the exam period is the period in which the demand for study rooms become the highest.
-
Some users like weekly reminder, because they can keep track of how many study rooms they have booked every week.
-
Other users also like monthly summary, because a summary of the total study rooms booked can serve as an incentive for the users to keep studying hard and continue using the feature.
I decided to go with pre exam and monthly summary because our use case is mostly students who struggled to book study rooms in exam period while monthly summary can serve as an extra motive for them.
How might we incorporate the existing room booking feature into the application?
ROOM BOOKING
Lastly, I looked at how I could integrate the room booking feature into the current native application. To make sure the design can blend seamlessly into the existing StudySmart's ecosystem, I made sure to prioritize clarity and the accessibility of the function as the main design priority. Here are some of the explorations:
-
Main Page: Seamlessly present a room booking feature to the home page. However, might be weird seeing a different feature in the same visual treatment as a place to show study spots’ crowdedness.
-
Floating toggle: This would decrease engagement in the main feed which people value more. Plus, this might take more engineering effort to build it and delay our launch time at Spring
-
Horizontal Scroll: Disturbs the vertical scroll interaction within the main page. Allows for more study rooms to be shown. Gives attention to the study rooms because it breaks the v-scroll.
Moving forward, I decided to go with horizontal scroll for the following reasons:
FINAL INTERECTION
The final interaction will be a quick and easy way for users to browse for study spots that interest them. Users can easily compare study spots with color coded line bars, accurate percentage and amenities. Also, the app enables them to book study rooms at ease with a high accessibility.
RESULTS
-
Increased user retention (Recurring visit per capita for viewing study spots’ crowdedness after 10, 20 and 30 days)
-
Increased click through rate (Users tap on the specific study spot and visit the detail page for the study spot location)
-
Increased task success rate (Users successfully reserve a room after launching homepage)
VISUAL DESIGN
In creating the style guide, I made sure all the buttons and fonts were aligned correctly. Moreover, in choosing colors, we needed to keep in mind a number of factors, including 1) trust, 2) familiarity, 3) distinctly categorize the percentage throughout the system. For instance, going back to the user research insights, users do not trust using the app because of incorrect information. Thus, I used blue as the ascent color to reinforce users’ trust of the crowdedness percentage.
PROSPECT
In designing for StudySmart, I learnt a lot in focusing on the small details and how much they matter. Without any prior style guides or visual guidelines, I found there were so many different ways to explore solutions visually. Whether it is designing a small button, putting color signifier on a line bar or adding notification alerts, I learned how small design can change users’ perception drastically and from there I made sure my design solutions were closely aligned with users’ goals.
LOOKING FORWARD
-
Facilitate better communication morale within the internal team: As one of the main communicators between the engineering and design teams, I could have better in conveying team morale. Engineering often expressed that designers worked too slowly which created long waiting periods. I should have pushed the designers to be less perfectionist and had them update engineers more frequently.
-
Validate ideas as early as possible with external users: I regret not testing my design ideas through sketch or low fidelity mockups to gain users’ feedback. Because when I move up to high fidelity screens with interaction flow, it is very time consuming to tweak small design elements which some users are unsatisfied with. Thus, by making sure users have a collective understanding with the problem scope and onboarding them early during the low fidelity stage will help me to create a more logical justification for my design decisions that satisfied external stakeholders
-
Invest in marketing: StudySmart biggest problem was its lack of users. As an app development team, we became too tunnel-visioned into only exploring improvements with the app rather than how we might improve outreach. Fortunately, out of StudySmart failure emerged the creation of a market team to start in Fall 2020.
MORE PROJECTS
 |  |  |  |
|---|---|---|---|
 |  |  |