MARKETPLACE DEVELOPMENT
CASE STUDY
A story of building an integrated with numerous design communities marketplace for designers.
Note: due to the NDA signed with the client, industry and speciďŹ cs of the business model were changed in this case study. All technical speciďŹ cations, problems and solutions presented below are real.
Project Team 2 Back-end Developers Front-end Developer UI/UX Designer QA Engineer Project Manager
Technologies used Redmine Trello Node.js Angular.js Sails.js framework MongoDB Stripe ElasticMail API OneAll plugin Photoshop (it is used for all our designs) Invision “Marketplace was one of those tasks which seem to be hardly feasible at a first sight. But once we got deeper into the matter, it became clear that this was the chance to integrate and use all skills and experience we acquired in multiple previous projects. At the same time development of the Marketplace website let the team enrich our expertise and find lots of new IT solutions” Project Manager
PROBLEM Finding a job as a designer is not an easy task, in such situation one is likely to use huge employment sites such as LinkedIn, CareerBuilder and Job.com or other more niche-specific job search websites. This process can be an arduous one, as some issues might appear while using both types of platforms. It happens that on websites similar to Job.com job openings are not regularly refreshed and users are not provided with the abilities such as detailed category search or portfolio showcasing. While employment websites concentrated on certain niche do offer such functionality, they at times have limited database of employers and employees being not very popular, tend to be geographically prejudiced, and often produce mediocre results.
CHALLENGE Our sales team received an interesting request, to build a marketplace specifically for designers which has the potential to become a perfect solution to the troubles that plague the typical job search process. The main aim of this project was to create a marketplace for designers based on social networks API integrations that will allow the users to: use automatic search in Dribbble, Pinterest and Behance based on tags, keywords, creative fields, tools, relevance and different word frequencies look for vendors on social media and generate clusters of potential vendors for their projects review their competencies, projects, and expertise monitor jobs, their previous clients, and their connections (if registered) offer their services and update their profiles on all social networks at once filter projects in the software itself and get regular updates on the latest projects 1
THE CASE STUDY MARKET RESEARCH & BUSINESS ANALYSIS
The team carefully examined the features of three platforms - Dribbble, Pinterest and Behance - to get a feel for the existing features and what those platforms may lack in certain areas. These are the abilities provided for users by the above-mentioned design platforms:
Feature
Dribbble
Behance
View the pieces of work and projects
+
+
+
Purchase pieces of design
+
-
+
Find designers by different criteria
+
+
+
Find design communities
+
+
+
Team up with other designers
+
+
-
Learn about, host or participate in the meetups
+
-
-
Blog
+
+
+
Find a job
+
+
+
Around $300 - $400 per job
Starting with $399 per job per month
+
Post a job opening
TECHNICAL REQUIREMENTS
As soon as we deďŹ ned major functionality and Ń apabilities of the marketplace website, our Project Manager started writing technical requirements for the website development project and creating user stories. The designers got down to composing wireframes. At Mobilunity we use various tools for project planning and tracking, including Redmine and Trello.
2
UI/UX DESIGN
As this is a platform meant to be used by designers, the design of the marketplace was given special attention, for it was clear to us that even the slightest inconvenience would be immediately noticed. At the same time the website is highly functional and built for sophisticated business purposes, so our design team made it as user-friendly as possible. The ďŹ nal design was created using Photoshop, and implemented using InVision, a multi faceted prototyping tool.
3
BACKEND DEVELOPMENT
To optimise and speed up the development process our backend developers decided to use a JavaScript runtime Node.js. This platform can be integrated with numerous modules and frameworks that help to code the backend of any website faster and make it less prone to defects. The Backend team was tasked at implementing the following capabilities into the website: Account Create an account Sign in with email address, or social sign in via Behance, Pinterest or Dribbble, in case one has an account on these platforms Choose a membership plan (Free, Premium or Enterprise account) Search engine Keyword search Filter based search Continuous criteria-conditioned automatic search Mark profiles as favorites Add profiles to blacklist Communication Private chats (vendor-employer/ admin-employer/ admin-vendor) Collective chats (employer-team of vendors) Tech support chat Payment management Escrow pattern implementation Integration with Stripe billing operator Automated data management Creation of profiles and inserting them into a database Compilation of top designers list Algorithm for search of profiles meeting set criteria Employer specific features Job opening publication Job opening promotion for extra fee
4
Designers’ work estimation Price bid for executed work Designer specific features Apply for job openings Upload portfolio from Behance, Pinterest or Dribbble Admin specific functions Approve creation of account Locate terms & Conditions violations Tech support Settling disputes between vendors and freelancers Make changes to Privacy Policy, Terms & Conditions, criteria of Tops creation, Fees & Charges Backend Integrations Platforms integration Since the marketplace was planned to pull data from three resources at once - Behance, Dribbble and Pinterest - our developers utilized the relevant APIs and managed to meet all the requirements and limits set in the guidelines. As all of the above mentioned APIs’ responses are returned in JSON format the team decided to use one of the best databases for storage of JSON format data - MongoDB. Social login It was planned to equip the marketplace with the social login function, so that the users don’t have to waste time entering lots of data, and could instead use their existing accounts on Behance, Dribble or Pinterest to sign up for the marketplace website. For this purpose OneAll plugin was used, which provides a social login service. The trick was that this service worked only with Dribbble and Pinterest, therefore, integration with Behance had to be done customly via API. Billing system integration To ensure the secure financial interaction of freelancers and employers, the team attempted to implement the escrow principle. Here we used Stripe - a software platform for running internet businesses, a perfect toolkit to enhance payment flows and facilitate payments coding.
5
FRONTEND DEVELOPMENT
For front-end development of the marketplace Angular 2 was used. This framework is a great aid for any front-end developer, as it provides HTML templates for all elements of website UI allowing for the use of special AngularJS directives, that extend the HTML syntax making the user interface more dynamic and expressive. Angular: controllers, models (navigation menu, search field, filters) Forms: log in, sign up, retrieve password, post a project forms etc. Push notification widget
TESTING & BUGFIX
Due to the intricate structure testing marketplace was not a simple task. As it was made for three categories of users who are likely to use it in different ways, it had to be tested to account for the multiple functions that it offers. Along with having the testing process well documented in test plans, test cases and bug reports, special attention was given to testing of the search engine, payment forms and security in order to prevent a negative user experience associated with security breaches and sensitive data leaks. After proper testing, bug fixing and regression testing, the marketplace website was released.
Do you plan to build a marketplace for your business? We can offer all-inclusive full-cycle web development at affordable rates. Get in touch to discuss details!
https://mobilunity.com
sales@mobilunity.com
6