Unauthorized user
Unauthorized users can browse information on Pikturate but can’t search by posts, share posts, and comment.
Pikurate
A content aggregation platform curated by users
Our client’s request
In the past two years, Leo, the founder of Pikurate, has surveyed almost a thousand people on their experience finding relevant information on the internet. Having processed all the data he collected, Leo found that many people struggle to find what they want online. This is how he arrived at the idea of a collaborative information platform ― Pikurate ― that would allow users to find relevant and helpful information structured by topics and share content that they find useful.
With this in mind, Leo came to Steelkiwi and asked us to build a website and improve his existing design.Analysis
It’s difficult to find relevant information quickly. Q&A platforms such as Quora offer lots of information, but the answers there are often about self-promotion rather than providing comprehensive information. On wikiHow, you may not always get the answers you’re looking for. Some questions require accurate and detailed answers, such as which credit card to choose, where to rent an apartment, or how to behave at the first job interview. This is where Pikurate can help. The platform provides users with information grouped by topics and curated by other users. These topics are called Piks.
User roles
Authorized user
Authorized users can benefit from functionality including creating new posts and categories, liking and sharing content, viewing online courses, watching tutorials, and joining online communities.
Admin
Admins can manage Pikurate’s functionality and access the platform’s settings, reports, and statistics.
Results
Duration:
December 2018 – August 2019
Team:
Backend - 1 Frontend - 1 UI/UX - 1 QA - 1 PM - 1
Created the UI/UX
Leo provided us with the InVision prototype of the first version of Pikurate. Our task was to review the design and user flow. We reviewed the UX logic by testing all possible cases with positive and negative scenarios. By doing this, we found some logical gaps: non-typical icons that would distract users, inconsistent interface elements such as image sizes, fonts, and buttons, incomplete user scenarios, and illogically arranged screens. We made suggestions for improvements according to the Material Design guidelines and our expertise. We discussed the possibilities for improving the existing design with Leo to find the best solution together.
As a result of these discussions, we created additional elements including screens, statuses, states, and texts and organized the layout: icons, indents between the elements, and the Piks’ card view.
To make the application more interactive, we decided to include a new feature ― a wizard. The goal of the wizard was to provide users with tips on how to interact with the Pikurate application.
Developed the backend
We developed the website using Python and Django. If you’re interested in why we use Python and Django for our projects, check out the following articles:
We added a Django admin panel so that the administrators can create, delete, and edit all information on the Pikurate website. They can also manage user reports about incorrect Piks and irrelevant comments and control spam and abuse.
To implement asynchronous tasks such as sending emails and notifications to inform users about new achievements, we used Celery alongside a REST API which we created using the Django REST framework. Celery enables us to send lots of emails and notifications at the same time without server hangups.
To store user data, we used PostgreSQL 9.6. To store large media files (such as profile pictures and videos) securely, we used Amazon S3. We also used Sentry (open-source error tracking software) to monitor and fix crashes in real time. For writing tests and making sure the code works as required, we relied on PyTest.
To detect problems early and speed up deployment, we used GitLab Continuous Integration (CI) and Continuous Delivery (CD) procedures.
We implemented full-text search to allow users to search for content not only by tags but by title, words, and categories.
Facebook, LinkedIn, and Google APIs allow users to log in using their social network accounts, but we also added the possibility of logging in via email.
Developed the frontend
HTML, CSS, and JavaScript are the main technologies used to build the Pikurate website. We used React (a JavaScript library) to build the user interface and the MobX library to manage the application state in a simple and scalable way. We implemented MobX Form to work with forms easily and keep them as simple as possible. We used JavaScript libraries, such as MobX State Tree to organize the application states in a structured manner, MomentJS to manage dates and time in the browser, and Axios to make HTTP requests.
We used Stylus (a CSS preprocessor) for fast and efficient development of styles. We also integrated Webpack (a Javascript module bundler) to create the Pikurate web application from multiple modules written in JavaScript, HTML, and CSS. To allow users to see Pikurate’s features via an interactive tour, we used React Joyride.
Implemented features
Users must create profiles to access all the features of the Pikurate website. Users can search for Piks, create new Piks, like and share Piks, save links to Link Hub or add them to existing Piks, add comments, follow other users, and create new categories. On the menu, users can see their frequently visited Piks and activities such as comments.
Pikurate focuses on creating Piks. A Pik is a collection of data including links and comments on a specific topic. Each Pik includes a creation date, title, short description, hashtags, and the number of collaborators. Piks can be sorted by new comments and popular comments and include share and report buttons.
Users can report a Pik or comment for inaccuracy and report a profile for spam or abuse.
If a user follows lots of people and Piks, they’ll be shown far more links than they can possibly use. So, we enabled users to turn on a personal view to see only the information that they find most helpful.
Link Hub is a place where users can save the links they’ve found useful to add these links to a Pik later. Link Hub opens in a new window and works on different screens and in different browsers. This allows users to store useful links to Link Hub without having to log in to the Pikurate website.
We added gamification elements to walk users through key processes in Pikarate. At the top of the page, a user sees a wizard panel consisting of blurry icons each indicating a particular task such as creating a Pik, creating a category, and adding a link. By hovering over an icon, a user can see hints on how to complete the task. When the user completes the task, the icon becomes unblurred. Once a user completes all tasks displayed on the wizard panel and collects all achievements, they see new achievements displayed on their profile, such as the number of Piks created and links added.
Technology Stack
Client's feedback
Their team members are very creative and proactive. Even if you know what you want to do, ask for their opinion.
Seok Kue Song, Founder of Pikurate
