CHLOE WU
YOURSTORY APP REDESIGN
A Case Study
THE CHALLENGE
Your Story is the largest media platform in India designed for startups and entrepreneurs to exchange ideas and visions. The website and mobile app provide their user with the latest startup company news and entrepreneur’s experiences to in mainly articles and videos.
Despite having a large user base and a high viewing rate for the website, the mobile application is not as widely used as expected. Therefore, the company aims to increase its mobile app usage by redesigning the app.
The goals for this redesigning project are:
-
Increase the stickiness of their app users, ideally to make the app reading a habit-forming activity
-
Video first: during the pandemic, there has been an increase in video consumption, so the client wants to further promote their video content.
MY ROLE
I collaborated with two other designers and worked intensively for 4 weeks. We were to provide two complete redesign variants for YourStory app. My two teammates were designing the articles, profile and onboarding sections. My role was to redesign of the video section.
Tools:
THE PROCESS
Research
Secondary Research
Primary Research
Define
Result Analysis
Persona
Journey Mapping
Competitive Analysis
Develop
Information Architecture
Low-Fidelity Wireframe
High-Fidelity Wireframe
Prototyping
Deliver
Usability Testing
Iteration
DISCOVER
Secondary Research
To better discover the reasons for having a low user stickiness, I started with secondary research. Here are screenshots of user reviews from the Google Play App Store.
Based on Google Play user reviews, the current app can be improved in the following aspects:
-
Use fonts that have a better readability
-
Better navigation and content arrangement
-
Provide customized notification
-
Provide bookmark feature for video
-
Popular content recommendation
We have also required website data from client's side. Interesting findings are shown in the charts below.
Non-logged in users website page views account for 96% of the total in September 2020.
Logged-in users only account for 10% of the total visitors in September 2020.
However, the logged-in user's page view is almost 5 times more than non-logged-in users.
Despite the large number of page views contributed by the non-logged in users, logged-in users seem to be more committed to the website content. This data also corresponds with the fact that most page views are from social media and organic search.
Below are the page view sources from July, August and September of 2020; and it is consistently showing that open social media platform and organic search are the two main leads.
Therefore, in our primary research, we are going to explore what are the reasons that users do not use the app; and what issues are they currently experiencing?
Primary Research: Interview
YourStory connected us with 10 of their current users, who are based in India. We had a one-on-one in-depth interview with them. I personally interviewed 2 users (video recording and interview notes can be found here).
The interviewees are a mixed group of website and app users.
After synthesizing the interview results using an affinity diagram, here are the major findings:
-
Articles are more consumed than videos: Articles are more commonly consumed than videos, users typically spend 1-3 minutes on reading one article
-
Because of the recent lockdown amid the pandemic, users started to watch more videos and live streaming sessions on their computer
-
Navigation is complicated users are often overwhelmed by a large amount of information on one screen
-
Users suggest having content divided by industries or topics
-
There is no personalized content, and it takes longer to navigate to the desired content
-
There is no personalized notification, and too many notifications can be distracting
-
There is no notification for live streaming
-
Some users are curious about what other people are reading
-
Some users downloaded the app but hardly ever used it
-
One user did not know the app existed
DEFINE
Behavioural Patterns are identified from the interview results.
-
Users needs are related to their current career and life goals. There are 3 major patterns. Detailed explanations will be in the Persona section.
-
App users: they often experienced navigation issues, especially with the videos
-
Non-app users: some of them previously downloaded the app, but never used them. It indicates that the app does not offer them the incentives to make users stick to it.
Group 1: recent graduates and career-starters, they are the group of people would spend relatively more time on consuming YourStory content, because they want to learn about new products and entrepreneurship. Some of them have a personal preference for certain products or industries. But overall they have less "targeted" content than the other groups.
Group 2: mid-career professionals, their occupations encourage them to know more about the startup industries, such as investment, service provider and product-related jobs. They have less time than the career-starters, and they have a clear idea about what they want to read and watch on YourStory.
Group 3: business owners, they are the busiest users among the users, they want to stay updated and informed about the industry. Or they would search for something very particular from YourStory since the company offers unique coverage on lots of not well-known startups. They have the least time to commit, so they want something quick to grab.
Personas
Here are the 3 personas I generated from the interview data.
Insights and opportunities gathered from journey mapping:
-
Some users do not know the app exists, as one user mentioned in the interview, and it is one of the main reasons for lack of app usage. Desktop web and mobile website could inform and encourage the users to download their app
-
Some users might not feel like using the app because it does not offer anything extra than the mobile web version. Therefore, it is vitally important to add personalization features to the app to distinguish the app from the mobile website.
3. Better navigation could make content browsing easier
-
Content can be arranged by interested topics or industries
-
The personalized content recommendation could save the user some time from navigating
Journey Mapping
Some users reported that they did not know about the app and some mentioned that they downloaded the app and never really used it.
The reason behind this is partly due to their common way of arriving at YourStory is from social media post or google search results, as the web analytics suggests.
To find out the other possible explanations I drew 2 journey maps. I wanted to know what blocked the users from using the app.
Journey A
Non-app users arrive at YourStory mobile website mainly through social media or search engine results.
Journey B:
It illustrates how app users interact with the YourStory app during each step.
The website homepage looks almost identical to the app home page
DEVELOP
Competitive Analysis
I initially wanted to compare YourStory with its direct competitors - tech news platforms such as The Ken and TechCrunch, as my teammates did for the article sections. However, I later realized the video’s design should be compared to a different set of apps, and they should be:
-
News platforms with both articles and videos
-
Video platforms have a strong user base and large market size
So I picked Google news app, CNN news app, Youtube and Daily motion.
Information Architecture
One of the biggest challenge during design is how might we arrange the content in a better way, given multiple dimensions of classifications:
-
Article feeds categorized by article brands name
-
Video feeds categorized by video series name
-
Articles and videos categorized by topics
-
Articles and videos categorized by industries
Therefore we have rearranged the content, a new site map is shown below. The blue pages are the ones that we added.
.png)
The main strategy of organizing content here is to maximize the personalized experience, make the app more personalized than its mobile site, but also keep the sub-brands as original as they are, as the client required.
In order to balance personalization and sub-brands/video series, I added a personalized page full of tailored video feeds for that particular user and a page of trending and featured video feeds for all users, in addition to their existing categorizations of sub-brands/ video series.
Design Strategies:
Our main strategies for redesigning the app is to have:
-
Personalized content display
-
Personalized content recommendations
-
Better navigation
-
Personalized in-app notifications
Low-Fidelity Wireframe
Video series are listed vertically on the video home tab. It has a very long scroll and makes it difficult to navigate or go straight into a particular video series.
In-App Notification
.png)
.png)
Hi-Fidelity Wireframe
Please click to see all screens of Hi-Fi Wireframe Version 1.
.png)
DELIVER
USABILITY TESTING AND ITERATION
YourStory connected us with 3 users for prototype usability testing. Users were asked to browse pages of videos and give feedback on the elements. We also observe the users how they navigate the complete certain tasks. Testing script and notes can be found here.
Below are the issues users experienced and the revised wireframes.
Size of the top navigation needs to be increased for better visibility
Users understand the hashtags are clickable and can navigate through to the content under the same classification
Font size and spacing have been increased.
Selected items are highlighted in red to make it stand out more
One user did not recognize the carousel design at the first glance and wondered it was part of the section above
A background is added behind the carousels to distinguish them from the vertical scroll videos above
One user was not sure that the time here was the duration of the video clip
Users expect notifications from
followed content
Some users prefer the description section to be moved up before hashtags, because reading more about the video is more important before committing time to watch it
Some users did not realize they were three different types of content at first. Need to adjust the UI to make them look more distinguishable
As users suggested, video description is moved up as an element with top priority
A bell is added next to "Following" as a notification switch
"Duration" is added
Videos, articles and company information are added to make them appear more distinguishable
For exiting the video window, we tested 2 options. Option 1 is the current app's "back button" and Option 2 is "minimizing the video window".
Users prefer Option 2 and prefer to have the minimized video keep playing because users can browse other videos while still listening to the minimized video.
To allow the video description have the top priority, I moved tags below it
Users prefer the text below the video thumbnail. It also correspondents with our initial design which is used across all types of content
Image changed to picture only, text descriptions are listed below.
Wireframe Version 2
Prototype
Conclusion
Business Objective 1: Increase user stickiness of the app
Recommendation:
-
Expose users to app downloading option on YourStory website
-
Provide users with multiple personalized features: bookmark, content recommendation and notifications.
-
Offer multiple navigation options for one particular piece of content
Business Objective 2: Promote video consumption
Recommendation:
-
Personalized video recommendation by industries and topics
-
Related content recommendation providing users with more information about a related subject/company/industry
The redesigned MVP definitely needs further usability testing.
For further development, I would recommend that the client try features that allow users to opt-in more, such as commenting.
Insight into working on a project as a UX researcher and designer:
-Keep fine-tuning the research questions or directions during the process: Initially I thought I found the direction of the main cause of the app's lack of usage, however later I realized while analyzing the research results, that I could dig deeper or further about the real issues.
-You continue to understand the users throughout the designing process. The empathizing stage is "never ended". This continuous understanding could inspire you to think of a better solution in an unexpected way.
CLIENT'S FEEDBACK
We loved the user research process, the insights on users and the manner in which everything was documented and managed so seamlessly. We'll be working towards incorporating some of these as best practices
K. BK, Cheif Product Manager at YourStory