• Cases
  • We modernized the UI and UX of a point of sale system (POS) for the fashion industry retailers

We modernized the UI and UX of a point of sale system (POS) for the fashion industry retailers

  • Industry

    Fashion | Retail | Sales

  • Project type

    Desktop

Description

Unfortunately, because of the confidentiality agreements, we cannot share any screenshots, code samples or names.

A great number of different POS systems are available on the market today. Many of them are specific to a particular industry or sphere: pharmacy, retail shops & supermarkets, restaurants & other HoReCa niches.

Our client is an expert in the fashion retail industry and specializes in the automation of sales and all business processes for fashion stores. Our client had its own custom software that was built more than 20 years ago.

But everything is changing, each 2-3 years we have new trends in the IT sector, new tendencies in UI/UX design. As our client works in the fashion industry, it is crucial to have up-to-date software.

So, our client decided to fully redesign the UI/UX of their core module – the client’s side of the POS system – a workplace of a cashier and a store clerk.

We were asked to develop a concept of UI/UX for a new version of their application, to test it on focus groups (client’s existing clients (30%), potential clients, who had never worked with the software before (60%), client’s employees (10%)) and then to implement new UI/UX for their system.

We faced some difficulties with the implementation:

  • No requirements regarding the new UI/UX

Our client didn’t have any ideas on how a product should look like. We were just asked to perform the analysis of the market trends and the competitors, review modern tendencies in POS design and suggest a couple of concepts;

  • New UI

After we approved the concept we got a real challenge with its implementation. The existing client’s UI was not adopted for such a kind of redesign. That’s why we decided to develop a new UI and create new forms from scratch re-using a business logic source code where it was possible;

  • Problems with the source code

The client had been working on this software over the period of the last 20 years and the source code was not well-documented, well-structured and well-written. We performed source code research and analysis, tried to understand the sense of some parts of the source code and its logic. Also, we couldn’t leave the code “as is” without source code refactoring.

Client`s pain and concern

Our clients are fashion industry companies and have very high visual standards including software UI. We need to modernize our POS system UI according to these expectations of high quality experience.

We need to have a unified UI across all our POS system modifications, but we are not sure what our clients consider a good UI, so we’d like to run some tests.

We have no ideas on how the product should look like. We just know that we have to make it contemporary.

Project Team size

  • Project manager
  • Business analyst
  • 4 Delphi developers
  • QA engineer
  • UI/UX designer
Project Team size

Solutions

UI & UX

Step 1 Business analysis and collecting of requirements

As it was described above, at the first stage of the project, our Senior Business Analyst and Senior UI/UX specialist performed necessary requirement collecting and business analysis.

Step 2. Creation of a partly-functional prototype

Before developing a new UI and UX, our business analysis team created a partly functional clickable prototype for a new version of the software without any styling and theming (just wireframing). Before making any drawings, we had to design User Experience (UX), show how users would interact with the software, how we were going to implement forms navigation, data access, interaction with data.

We had to take the existing necessary functionality of the POS client application and re-invent interaction with it, using modern principles and concepts (of course, UX concepts, which we used in the 2000s are different from what is developed today in accordance with the current tendencies). We used the HotGloo online prototyping tool for the creation of the partly functional clickable prototype. An important benefit of the selected tool is real-time online sharing, online collaboration between users, and the possibility to add scenarios and events/listeners for the controls.

It didn’t make any sense to draw and prototype all software forms and frames. Usually, it’s enough to prototype only general business flow, including user sign-in and sign-up -up forms, a main working window, all forms for performing purchase/sale operations  – from scanning or selecting a product/article manually to closing a receipt. In our case,  we designed 32 forms, including 2 forms as a “brand book” (a developer’s style guide). The “brand book” forms explain generic UI & UX principles, describe how the standard controls should look like, etc.  Later developers will use this “brand book” for creating forms that were not drawn and not prototyped. Of course, if your application has 100+ or even 300+ forms – it doesn’t make any sense to draw and prototype all of them – it’s also too expensive.

Step 3. Creation of a couple of concepts and their testing

After preparing a couple of UI/UX concepts we tested them for functional compatibility (yes, we drew the concept, but it had to implement all necessary functionality and features, the prototype had to have space for all necessary fields, buttons, captions, grids and so on. Sometimes we can see some simplified prototypes which will look totally different after real implementation) and present them to our client. Of course, after the general concept was approved, we had a lot of changes and improvements. In the next step, we implemented a number of sub-concepts for the focus-group tests.

After the final changes and tests, we were ready to start the implementation. The UI/UX step took around 3 calendar months. During this period we worked on the business analysis, prototype implementation, we had offline meetings in two countries, the client took some time for considering and approving, etc.  After reviewing the project history, we came to the conclusion that theoretically, it was possible to perform such volumes of work faster. However, the quality would have suffered in such a case.

Preparations for Modernization

While the UI/UX stage was in the implementation phase, our software development team, together with the client’s team worked on the selection of the target framework and technologies for the new version of the POS client application. We decided to perform re-engineering and to implement all OOP (Object Oriented Programming) principles for the application architecture. Unfortunately, we understood that we wouldn’t be able to re-use even  50% of the existing business logic source code as its quality was not good enough.

We performed rough estimations for the migration of ~28 forms, including message dialogs and popup windows. We couldn’t estimate more, because we didn’t make a decision on the number of forms that we would redesign for the first GA (General Availability) version.

Also, the existing software had a lot of customer’s specific forms which were appropriate only for some client’s customers, and it was senseless to redesign and implement them for the new version of the software. It is important to highlight that the client made a decision not to add backward compatibility between the previous and new versions of the system.

Modernization

The client decided to continue working with the Delphi development stack. The existing POS software also was written using Delphi, but its version was obsolete.

After the analysis and research, our software development team made a decision to use the FireMonkey (FMX) framework instead of VCL (Visual Components Library). The FMX framework has a brand new concept for UI implementation with styles and a hierarchy of element components for building complex and complicated controls. Using FMX we were not limited to almost any custom UI, including grids, scroll bars, etc.

The UX/UI modernization was just the next phase after the migration of the project from Delphi 7 to Delphi 10.2. The FMX framework is not available for Delphi 7 and that’s why as the first phase of modernization we performed ‘as is’ migration from Delphi 7 to Delphi 10.2. Sometimes this task is complicated, especially if an application uses a lot of 3rd-party components, which are not compatible with the 10.2 version or even not available for Delphi 10.2.

Migration from a legacy Delphi version to an up-to-date Delphi version can take ages because the process can have serious pitfalls. We needed to choose between two options:
– to conduct migration, or
– to start developing a new POS client application from scratch.

After considering such factors as time, risks, ROI, we came to a conclusion that teh migration is a more preferable variant.

After successful “as is” migration to Delphi 10.2, the development team started new UI implementation and code refactoring with applying OOP patterns and best practices.

As it was mentioned before, not all forms and frames were prototyped. But using the “brand book”, the team was able to implement new forms using patterns and rules for components and forms (colors, fonts, sizes, paddings, sizes, etc.).

In addition to this, the POS client application provides multiple main form interfaces. As a fact, different fashion retailers have different sales business processes. A POS client application should also provide different business processes for performing sales, including selecting a product (Barcode-scanner, manual selection, quick access to most popular product,s and so on), payment process (cash, credit card, gift card, multiple currencies payment, prepayment and so on). Bearing this requirement in mind, we also implemented multiple modes for the migrated software.

Deployment to the Market

Our client decided to start deploying the new version of the software only for new customers or new stores (for existing customers). The POS system had a  sophisticated structure, including administrative functions  (warehousing, management, reporting) and a client’s part. We updated only the client’s part, that’s why customers still could connect their existing stores with new ones using the same data environment, but in one store two versions of software can’t be used.

During the deployment phase, the client attended a couple of specialized exhibitions, where they got very lot of positive feedback about the system and even signed a couple of contracts.

Methodology

The project implementation included two phases:

– UI/UX business analysis, prototyping and re-design.
For this phase,  we had a fixed scope of work and we could prepare rough estimations with 15% padding. At this stage, we used the Waterfall methodology with limited and fixed hours, costs and time frame;

– POS client application migration and new UI/UX implementation.
The implementation phase included a lot of hidden work. Together with the client, we selected the Agile methodology for the project implementation. The Scrum methodology was the most suitable for the project. After 6 months of development, after we finished the initial migration and implemented a new UI for the first batch of forms, we turned to continuous integration (CI) and continuous delivery (CD) practices.

For the project implementation we used the Delphi development stack. The existing client’s POS system was written using Delphi 7.

Technologies

  • used in the project
  • Delphi Delphi
  • Firebird Firebird
  • VCL VCL
  • FMX FMX
  • TMS TMS

Outcome

After 1.5 years of work, our client’s team started the installation and deployment of the new version of the software for new clients and new stores. Because of COVID measures, a lot of plans were broken – due to restrictions a lot of fashion stores were closed across the whole European region, a huge amount of businesses were in crisis.

In 2021, our client plans to continue market expansion with the new version of its POS system.

Subscribe to our newsletter and get amazing content right in your inbox.

You can unsubscribe from the newsletter at any time

This field is required
This field is required Invalid email address

You're almost there...

A confirmation was sent to your email

confirm your subscription, make sure to check
your promotions/spam folder