Marketables
Vast collection of design assets dedicated for SaaS users.
Details
- Scope UX & UI design, frontend, backend
- Timeframes September 2019 – January 2020
- Innovation Connecting various variants of products
designed for different end platforms - Technologies Frontend:
React, React Router Dom, React l18next, React Date Range, Redux, Redux Form, Redux Thunk, Webpack, Babel, Husky, Lint
Backend:
ASP.NET Core, Identity Server, MassTransit + RabbitMQ, MinIO, AmazonS3, Kubernetes + Helm, PostgreSQL, SignalR - Business sector e-commerce
- iteo Team 1 x UX designer
2 UI designers 3 backend developers
3 frontend developers
2 QA specialists
1 PM
Timeline
the beginning of the work process
version for beta users
the delivery of the product
Project’s highlights
We created a convenient, useful, and simple solution for daily digital marketing activities – a space full of design assets that serves our client’s customers even better and meets their requirements more closely.
Business needs & goals
The goal was to create a landing pages’ marketplace. Its main functionalities came down to:
- Adding landing page templates and related products such as mailing templates, popup templates, banners, covers, etc. by independent creators.
- Displaying purchase offers created in the landing pages system (along with the whole promoting, grading, and accounting system).
- Purchasing the landing page templates and connected services by external customers.
Functionality
Marketables platform enables a user to:
Use a product catalogue with search engine
and filters that facilitate finding the best solution
and related productsLog and register as a Customer/Creator
Manage the profile
Browse through available products and creators
Place orders
View the sale’s history
Rate purchased products
Use a comment system
Firebase, Lottie – graphic animations
Hero – animations between views
For customers
The customers can browse through the library of high quality digital products prepared in varied styles and by various creators, compatible with popular tools and apps. They are able to choose from a plentitude of landing pages, mailing and popup templates, as well as banners, covers, and many more.
After selecting a perfect product and a form of licence – standard or exclusive – a user can move on to finalizing the purchase. Choosing an exclusive form of licence means that the customer is a new owner of the product and as a result the template is removed from Marketables.
For creators
To start selling products through Marketables, a designer has to create an account, fill in the profile information, upload the images of offered templates, and set the price. The whole process takes only a few minutes.
UX design
Client came to us with specified requirements and a product roadmap (meaning- defined MVP as well as potential updates and add-ons). They had a clear vision – although the platform’s main functionality is selling, they wanted to create something more “lifestyle” than just another marketplace. Something more engaging for clients and simply easier and better for artists.
What is also important here, our client works as “an artist” so they knew the needs of this segment of users quite well. Therefore, we designed a platform that enables artists not only to publish their works but also to link them into packages, share on different licences, manage the costs of products, and be notified if there is a need of adjusting the product for another platform. For clients – it enables them to easily find sets of matching products and acquire exactly what they need.
UI design
The style of illustrations was worked out by combining a technological character of the website with coloristic code assigned for specific products and users’ type. Gradients and permeations create futuristic product presentations. The colors we used are calm but elegant. They contrast very well with the navy blue background which should be friendly for people with eyesight problems.
In search of a modern, geometric font, we stumbled across Nuito Sans. We simply fell in love with its simplicity and consistency. It looks great as both a small text and a big title – that’s why we decided not to mix it with any other font.
Challenges & solutions
To provide a high accessibility of the application and its efficient performance in case of increased traffic and temporarily intensified traffic, we used Kubernetes orchestrator during the process of implementation.
To guarantee the highest performance, we used the following approach on the app’s side:
- Creating a set of normalized data to simplify and shorten the time of access (readmodels)
- The app uses synchronous and asynchronous communication with data bus (RabbitMQ using MassTransit library on the app’s side) between its modules (microservices)
Innovation
The application innovatively enables connecting various variants of products designed for different end platforms (including: Unbounce, Instapage or Landingi).
The goal is to provide information about a variant coherent with a main product for another platform with a suggestion to purchase it.
Additionally, the functionality allows providing the sellers with information about a possible need of supplying a product on different platforms – reported directly by consumers.
The app was implemented and deployed with a simultaneous
division into microservices which allowed:
Problems with API required looking for a better solution. We found it developing the version 2 of the app.
- Independent update and modules implementation
- Dividing a large source code base into logically coherent parts which enables easier work on particular modules
- Assuring performance, scalability, and high accessibility of the app
The process of deployment was fully automated with the use of
Teamcity, GitLab Container Registry (Docker) and Kubernetes
connected with Helm.
Quality assurance
The tests were conducted by three testers from the Scrum team. Because the solution was created as a web application with the
use of microservices in the backend, and the frontend was built with the RWD technique, testing was applied on a few different levels.
The functional requirements were written in users’ stories and included satisfaction criteria as a basis for manual testing for logic and business processes. While verifying the graphic elements, we used the views prepared earlier by the designers – their implementation was tested on varied browsers and devices. Such approach allowed a complex evaluation of the visual layer of the app. Additionally, we verified its usability as the first system’s users.
Thanks to the close collaboration with the client, we managed to implement a few improvements increasing the app’s ergonomics which made it more user friendly.
The element with the greatest risk was the implementation of logic linked to the products’ relations and purchase. Using microservices increased the possibility of failure, too. That’s why testing these elements was crucial for the project’s success.
All the business processes were implemented in API, so we conducted manual testing and automated the tests of regression.
The process of products’ relation was verified based on exploratory
tests using an SBTM (session-based testing model). It involved
prepared tests’ charts with various combinations of input data
possible to conduct in the system.
We also employed safety tests checking if the system is prone to
e.g. Cross-Site Request Forgery. Thanks to our testers’ experience,
we managed to fulfill the whole testing plan in scheduled time and
significantly diminish the risk of potential failures.
Client’s review
Outcome
The solution is ready to conquer the market of digital marketing and provide its users with simple yet useful tools. The client was so satisfied with the outcome that we still work together on other projects.
More projects
