Let's talk!

Marketables

Vast collection of design assets dedicated for SaaS users.
image

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

Meeting all of the crucial UX requirements along with the client’s strict project vision resulted in a fine, engaging, lifestyle-like solution that’s stunning to look at and pleasant to use.

Timeline

  • 2019
    September

    the beginning of the work process

    October

    version for beta users

  • 2020
    January

    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.

    image
    image

    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 products

    • Log 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.

    image

    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)
    image

    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

    Przygotowanie i wdrożenie nowej platformy sprzedażowej Marketables we współpracy z firmą iteo jako zaufanym doradcą i profesjonalnym usługodawcą przebiegało sprawnie i skutecznie. Najwyższa jakość deweloperska przekłada się na trwałość i bezpieczeństwo naszego serwisu.

    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.