Overview

Wear Pretty is for one of our clients based in the UK. It was built with a very special perspective in mind. To muster all the accessories of top-notch four UK online stores at one place so the users can access everything at once. What it’s doing is that it’s scraping four UK-based websites (with their consent) daily and displaying their products on our own website. When a user clicks on one of the products, we send the user to the relevant website and in return, we receive a small commission from the relevant websites. 

Client Requirements

Our client is UK-based. Their application was developed in 2015 on older technologies that were not coping up with the current user needs and data volumes that it has been grown up to. It was leggy and sometimes it crashed, disrupting the user's whole operation. Secondly, it was difficult to maintain and develop any additional feature into the application because of the legacy codebase. So clients come up with the decision to rewrite the whole application that can be a fair representation of what they are offering in the fashion designing sector. They aimed to rewrite their application to the newer technologies which should be fast, easy to maintain and follows the latest web application standard UI & UX

Discovery While evaluating the client requirements, we discovered that the main purpose of the application was to scrap the other websites for the products and display them on their site. But, this particular operation was causing severe server memory leakage. It was causing the server memory to exceed 95% and in some cases, it was exceeding over 99%. It appeared that the application was built using WordPress. Application architecture was highly cluttered which made the code difficult to understand and there was no sense of modularity, function, or any separation of concerns implementation. The technical debt of the codebase was very high. Application UI was outdated with some older UI components and there was very basic use of modern browser features like CSS 3 and HTML5  which makes the application look outdated. Overall application database design holds some major setbacks when the matter comes to extendability and new features implementation.

Strategy After compiling all of the learnings from the discovery phase, we jumped into a wireframe and design creation. We conducted meetings with our client and received some suggestions on wireframes. After going back and forth with our client, we put together a design strategy based on the wireframes. Designs had to be crafted in a way that allowed for maximum flexibility and customization. Best coding practices were ensured. Our design team had the challenge to design pages in an appealing way. The client didn’t have any Technology preference but some base guidelines for their future application, including some points like it should be fast and easy to maintain. Nodejs on the back end and Angular on the front end were suggested in the presentation by our CTO with the client management team and they happily agreed on it. For the DB, we agreed on using PostgreSQL.

Build

Once we architected, tested, and approved the framework, we started building out the new website. To give the site a modern look, we utilized a harmonious balance of whitespace, striking visual imagery, and typographical styling to accentuate the value propositions offered by our client. Furthermore, to ensure the overall messaging of the site was direct, concise, and professional, we emphasized important information with bold applications of their branded color palette to enhance the visual organization and increase the chance of a conversion. Once the design phase was completed, we dove into coding their custom site upon Angular 9 and Nodejs. Structured to allow easy update of the content on the site in the future, we developed the custom backend to be intuitive to use. The project timeline was set up and scattered into weeks resulting in a build each week with a checklist of completed features to client QA teams after performing the initial testing on our end. When converting the backend code from PHP to Node.Js API few points were compulsory to follow for each developer who was working on it, i.e performance optimization, code cleanup, and API documentation.

Test & Launch

We tested this website on all of the more commonly used browsers and devices to make sure everything was working properly. Once we were sure nothing seemed out of place, we sent our work over so they could test it out themselves. And, upload the site to the live server.