FRAMEWORK: HOME SCREEN OPTIMISATION
March 2023
Learners need a way to quickly see what in the Framework app is relevant to them so that they can prioritise learning that is aligned with their goals.
01 / Summary
Team
Design Lead
PM
CTO
2 x engineers
What I did
Design discovery
User research
Ideation
Prototyping
iOS and Android UI design
Handoff
QA
Deliverables
User flows
Clickable prototype
UI designs
02 / Framework overview & problem statement
Framework is an early stage startup offering a social educational app aimed at business skills for employees at startup companies. The app launched in January 2023.
As of Q1, 2023 the home screen showed the same content for every learner on the app. We knew that learners were time poor and needed to see what is relevant to them. After welcoming the first cohort of learners into the app, engagement was only at 6.85%, far from the 30% we were targetting for our quarterly goal.
As the landing page on app launch we could see from data that content promoted on the home screen was working in terms of pushing learners into deeper content within the app, but we felt that overall the home screen fell short and could be working a lot harder and contributing to overall engagement by showing more relevant content to learners that is aligned with their goals.
03/ Hypothesis
We believe that my making the home screen more tailored to a learners needs, will result in higher levels of engagement across the app.
04 / Discovery
Competitor analysis
I performed a quick competitor analysis, looking at home screens accross a number of apps. My key findings were:
Competitors really lean into personalisation of content on the home screen often through recommendations based on interests or other know data points from the user.
New content and time critical content around events is often shown. Some apps push daily usage with weekly goals and streaks.
Suggested learning pathways are sometimes used.
Personalisation is often suggested through copy e.g. ‘For you’, ‘Selected just for you’.
Competitors feature a lot more content (75 items in one case).
Content rails are the most common UI pattern for showing multiple items within a category.
UX tear down
I conducted a quick UX tear down of the existing Framework home screen. I noted:
Little of the content on this screen intentionally spoke to a learner’s preferences.
A single module showing a learning score visually dominated the top of the screen.
The screen only showed one Live event promo, even when there were multiple events
The Live event promo card didn’t indicate whether a member had already signed up for the event.
It wasn’t possible for members to act immediately and join the Live event from the home screen.
The home screen only promoted one piece of learning curriculum content (A Framework of the day).
Jobs to be done
I also considered the needs of a learner when viewing the home screen and wrote a collection of jobs to be done statements.
I want to be recommended the next thing to look at (content or social) based on my preferences.
I want to see what’s popular / what’s hot. What am I missing out on?
I want to be reminded of important events / changes coming up.
I want to choose what I see on the home screen.
Ideation
Based on the JTBD statements that I had generated I then ran an ideation session with the team. Working with the PM, we then took all of the ideas, documented them and teased out any further thoughts or questions we had.
Ideation around a JTBD statement
With a shortlist of ideas we then ran an Effort Vs Impact exercise to help us prioritise.
The final part of our discovery exercise was to reach out to members and ask them to pick their top 5 features for the home screen. I asked the Community manager to send a Typeform survey out to a group of learners.
Respondents showed a strong preference towards content discovery (Popular/ trending) and recommendations over the other features.
We prioritised features around discovery and recommendations over personalisation and learning priorities.
04/ Solution design
Content discovery
The obvious solution to showing more relevant content on the home screen was to introduce personalised recommendations. The immediate question was around which data points we could pull to inform the recommendation. I considered the following:
Show most popular based on views or completion rates
Show most popular based on social activity e.g. ‘likes’ and discussion comments
Show content based on a known user data point from the users’ profile e.g. job function, company sector, company stage
Show content based on the user’s previous views and activity
After discussing with the engineers and Content team we landed on showing the most popular Framework content by completion rates. We discussed the possibility of automating this, but decided to take a ‘mechanical turk’ approach where the content team would extract the data from Mixpanel and then create a playlist in Contentful. This would allow us to quickly build and test the feature without committing to the complexity of building in any automation at this point.
The second proposal was to use the job function. We know this to be a ‘clean’ data point that all users have selected from a given list as part of the onboarding process. We could also easily map the job functions to the content taxonomy
Popular Frameworks rail
Live events
One of Framework’s content pillars is Live events. These are live discussions with tech company operators through Zoom and are held weekly. There is a Live tab in the app where users can find and join these events, but they were also shown on the home screen with a single promo card.
When looking into opportunities for optimising the promo card a few strong ideas emerged. Since events are scheduled and available for sign up a few weeks in advance, the first proposal was to use a carousel and allow for the discovery of multiple events, rather than just a single offering. The second idea as an extension of the first was to allow for signing up to the events directly from the home tab, rather than by pushing learners into the Live tab. The final proposal was to change the state of the card after signing up to indicate attendance and possibly a countdown clock to the event or remind functionality.
Live event promo card carousel and confirmation sheet
Highlights video
A much requested feature from previous Live events was to include recordings of the events. By adding these to the home tab and presenting it below the Live event promo cards I believed that we could both drive engagement with the videos from past events, but also showcase the quality of the speakers and drive conversion for upcoming events. The proposal was to add a content rail showing past Live events using video trailers to draw attention. A further suggestion was to include a link to an overflow listing page where we could display all previous events.
Active Learning Score Module
The final proposal for the Home tab was to rethink the welcome message and the Active Learning Score module.
The existing learning score module dominated most of the top part of the Home tab, but conveyed little information beyond the progress score. I experimented with a few different ideas, one questioning how far we could compress the module and still convey the same amount of information. The other idea looked at the possibility of taking a static part of the screen and building behaviours around it to show it when only certain conditions are met e.g. user has not visited the app for X days, the user has hit a milestone worth celebrating.
05/ Delivery
Following the solution design phase I ran a Design Crit session where I presented ideas and elicited feedback from the team. We received general consensus around taking a low-effort approach to generating recommended content and in particular it was suggested that we start with a ‘Most popular’ play list as this would be the easiest for the Content team to work on immediately. Most discussion in the crit session revolved around how extreme we could be in terms of reworking the Active Learning Score module. The idea of using more ephemeral messaging through a bottom sheet that would appear on app launch split the room. We concluded that in principle we like the idea of moving away from static messaging that becomes stale, but we would need to investigate more how we implement it and what behaviours would drive it. Instead we opted for delivering a much more compact version of the existing module, allowing us to pull the new recommendations rails higher up the screen.
After agreeing the prioritisation with the PM, I completed the detailed designs and specifications. We also discussed success metrics and event tracking to enable us to monitor the performance of these changes.
Primary metric: Click through rate (Home screen > content)
Secondary metric: Pillar DAU/MAU
We then wrote up our epics and stories and planned the coming sprint work. The home screen improvements were built, QA’d and shipped in the subsequent 2 weeks.
06/ Outcome
Having shipped the changes to the home screen in the first week of April 2023, we are now waiting on an impact assessment.