Mandu
Is a mobile app for saving articles without ads, comments and third party links, keeping only text and images. The app is targeted at Chinese users who prefer WeChat
Take a look in store
Reader
iOS
Productivity
Sharing
Mobile
UI/UX
Offline
Analytics
Parsing
News
Firebase
Past history
Past history
The Chinese market was in need of an app that would let its users read cleaned-up articles both online and offline and share these articles through WeChat
The customer took notice of two trends in China. The first was the upsurge in reading from mobile devices. In 2015, the Chinese would read their news from phones and tablets for 62 minutes per day on average, double the amount of time compared to the year before. The amount of people reading books and articles in digital increased by 8.2% compared to 2014. The other trend is WeChat, China's leading messenger service. The average monthly user count for the 3rd quarter of 2016 reached 846 million, with the majority of these users being Chinese.
The customer came to us with detailed specifications and an MVP description. We started development simultaneously with designing.
The customer came to us with detailed specifications and an MVP description. We started development simultaneously with designing.
The Chinese market was in need of an app that would let its users read cleaned-up articles both online and offline and share these articles through WeChat. The Safari iOS-browser and its Reader feature was not a suitable solution for three reasons: 1.Safari is online only
2.Reader doesn't clean up all of the articles in Chinese well enough 3. There isn't room for future growth for use with a cross-platform app because Android doesn't support Safari. In Europe, Instapaper and Pocket serve a similar purpose, but due to the layout specifics of Chinese websites, they won't function in this country.
2.Reader doesn't clean up all of the articles in Chinese well enough 3. There isn't room for future growth for use with a cross-platform app because Android doesn't support Safari. In Europe, Instapaper and Pocket serve a similar purpose, but due to the layout specifics of Chinese websites, they won't function in this country.
Design
Design
The customer hired two designer teams: one from our company and the other from China to have two results to compare. Researching popular Chinese apps from various categories helped us determine their distinguishing features
"A stereotypical Chinese website or app is thought to be flashy and congested. However, this is not true when the emphasis is placed on the content. We had a look at the popular QQ messenger and noted that its interface was tidy, with prevalence of light tones. Principles used in its design seemed fitting for a reading app like Mandu."
Elena Galtsina
designer
After the research we`ve made a design conception and presented it to the customer.
Feedback from the customer's friends and coworkers showed that we did a better job than the Chinese design team.
We`ve also offered our own logo instead of the customer's one, and customer liked it.
We`ve also offered our own logo instead of the customer's one, and customer liked it.
Adding articles
Mandu automatically finds the article's link in the clipboard and offers to save it. User also can add an article in Mandu by using the trademark browser extension
Adding articles
Mandu automatically finds the article's link in the clipboard and offers to save it. User also can add an article in Mandu by using the trademark browser extension
Reading modes
Article view. The user can see the clean page and change font type and size, screen brightness and color scheme as they see fit. This mode is based on the UIWebView element
Reading modes
Article view. The user can see the clean page and change font type and size, screen brightness and color scheme as they see fit. This mode is based on the UIWebView element
Article management
Swiping the box containing the article to the left allows the user the option to delete or to add to "Favorites."The same functionality is available in Article View mode through the buttons in the tool bar
Article management
Swiping the box containing the article to the left allows the user the option to delete or to add to "Favorites."The same functionality is available in Article View mode through the buttons in the tool bar
Bulk article management
The user can favorite or delete several articles at once
Bulk article management
The user can favorite or delete several articles at once
WeChat
An article can be sent to a friend in WeChat or saved in WeChat Moments in a couple of clicks
WeChat
An article can be sent to a friend in WeChat or saved in WeChat Moments in a couple of clicks
App localization
The app automatically determines the device's language. The user can manually change it in the settings if they choose to
App localization
Приложение определяет язык устройства The app automatically determines the device's language. The user can manually change it in the settings if they choose to
Development
Development
The app was designed to clean the webpage's relevant content from ads, comment sections and scripts through a procedure known as parsing
Ways of implementation:
1
Directly in the app using JavaScript, similarly to (for example) Apple's Safari
The source code of Safari's script used to be openly available on Github until it was deleted by its owner's request. A similar library was made open source by Firefox's developers. We used these solutions as landmarks for our own work
The source code of Safari's script used to be openly available on Github until it was deleted by its owner's request. A similar library was made open source by Firefox's developers. We used these solutions as landmarks for our own work
2
With the help of the third-party service called Readability
The customer did not like that this service could not be in any way publicly managed, which would make troubleshooting impossible in case there were any issues with article processing. At the present moment, Readability is no longer available at all
The customer did not like that this service could not be in any way publicly managed, which would make troubleshooting impossible in case there were any issues with article processing. At the present moment, Readability is no longer available at all
3
On the server
The server's library deletes all ads and comments and sends the clean article to the app.
The server's library deletes all ads and comments and sends the clean article to the app.
We chose the server-side option when developing the beta version and had to choose one of these four libraries: PHP-Goose, Wallabag, Readability, Newspaper. We picked Newspaper for Python 3.
"It's setting up and configuring within couple of hours, articles are cleaned up quickly thanks to the internal C++ based parser implementation and it had already been supported for four years, which is really matters. And the coolest thing is that it was written by a Chinese developer and tested on Chinese websites "
Denis Vizigin
CTO
Features:
- multi-threaded article download framework
- news URL identification
- text extraction from HTML
- top image extraction from HTML
- all image extraction from HTML
- keyword extraction from text
- summary extraction from text
- author extraction from text
- google trending terms extraction
- works in more than ten languages (english, chinese, german, arabic and more)
The library's docs mention a built-in language detector, but, unfortunately, it wouldn't function correctly. Still, it was enough to select the language set in the smartphone's interface for testing the beta version.
- multi-threaded article download framework
- news URL identification
- text extraction from HTML
- top image extraction from HTML
- all image extraction from HTML
- keyword extraction from text
- summary extraction from text
- author extraction from text
- google trending terms extraction
- works in more than ten languages (english, chinese, german, arabic and more)
The library's docs mention a built-in language detector, but, unfortunately, it wouldn't function correctly. Still, it was enough to select the language set in the smartphone's interface for testing the beta version.
Client-side article processing
To save on server facilities, we implemented JavaScript-based parsing with WKWebView and Kanna Parser. The main advantage of this method is customization: front-end developers can create an article-processing template for each website at the customer's request.
WeChat
Due to the official website being closed down for maintenance, we couldn't access the messenger's API. We found the solution to use WeChat's API admin panel in a thread on Stack Overflow. The app's account is attached to a Chinese phone number provided by the customer.
Analytics
Analytics
Based on Firebase Analytics. Aside from the usual metrics, the following configurable events can be tracked:
- content preference
- sharing
- language, font, color scheme changes
- Web View usage frequency
- frequency of reverting to default settings
- domains for articles that are cleaned successfully/unsuccessfully
- links to articles opened in Web View only
- navigating to the customer's website
- adding domains of websites shared by the users
- frequency of using the article addition settings in Mandu
- screen orientation
- content preference
- sharing
- language, font, color scheme changes
- Web View usage frequency
- frequency of reverting to default settings
- domains for articles that are cleaned successfully/unsuccessfully
- links to articles opened in Web View only
- navigating to the customer's website
- adding domains of websites shared by the users
- frequency of using the article addition settings in Mandu
- screen orientation
Account manager
Tanya Shashlova
Tanya Shashlova
Project managers
Evgeniy Kovaltsov
Tanya Shashlova
Evgeniy Kovaltsov
Tanya Shashlova
Designer
Elena Galtsina
Elena Galtsina
iOS developers
Vladimir Vishnyagov
Aleksandr Pryanichnikov
Vladimir Vishnyagov
Aleksandr Pryanichnikov