A summary of this portfolio.
The graduation assignment was received from Moonly Software, a software development company located in Best, focusing on app, website, and webshop development. They are a relatively small company with roughly ~25 employees with a wide range of full-stack, front-end and back-end developers. Moonly works with all different types of clients, one of them being Masita who this assignment was made for.
Masita, a leading Dutch sportswear brand, had a Magento (Adobe Commerce) webshop developed a few years ago. However, it turned out that there were a lot of different requirements and desires that were built as extensions to Magento by various developers, including Moonly. Additionally, Masita worked with other parties for tasks such as order picking and shipping, the ability to customise items, and selling products on other channels (such as bol.com, etc.). To integrate these software systems with the Magento webshop, a number of connections were written.
Due to insufficient consideration for future-proofing, scalability, and the Magento framework as a basis when creating these integrations, they did not function properly, leading to more and more cracks in the system. Whenever an external integration was updated, the entire order process behind the store would come to a halt. These technical problems alongside a lack of priority from the owner due to upcoming ownership changes, meant the webshop kept declining.
Ultimately, Masita chose to cease operations, and the webshop was taken offline due to escalating problems with the website. Currently, these integrations no longer work, and they have not been updated for over a year.
Last year, Masita was acquired by the current owner, and they are in the process of completely redesigning their webshops. Subsequently, Moonly was asked to start developing a B2B store so that they could begin selling items to businesses.
Now that Moonly is working on completing this B2B store, we want to think ahead and commission a study on the development of a brand new B2C store.
The current problem analysis is as follows: Masita is currently unable to sell products to B2C customers because all integrations are disabled on the current website (masita.com, which is often inaccessible), and it is not possible to order products. Additionally, this website, having not been updated for over a year, often experiences downtime and has low speed. Since the Magento store is currently unusable, and Masita does want to sell products again, we need to explore how a new B2C store can be realised.
Design a new e-commerce platform that enables Masita, a leading Dutch sportswear brand, to sell products to individual customers (B2C) in a seamless and reliable manner, considering past integration issues and system failures.
The assignment is to research which technologies can and should be used for the project, create user-friendly designs that are optimised for UX and conversion, validate these designs with user tests, then develop these validated designs into a working prototype by using the earlier researched technologies.
Moonly and Masita have decided to collaborate on a new B2B and B2C store so that Masita can resume selling their products. Since it was important for Masita to start selling to businesses first, a B2B store is currently in development. In the future, a B2C store will also need to be developed.
For the B2C store, Masita has provided several requirements:
Since Moonly wants to avoid the same pitfalls and problems encountered with the Magento store when developing this new store, we want to first conduct research into the best solution for developing this new store. This research should not only consider Masita's various requirements but also focus on how the B2C shop can encourage customers to start ordering from Masita again. While the B2B shop primarily focuses on functionality for retailers, the B2C shop needs to be optimised for UX and conversion to help Masita regain its position in the market.
Additionally, the results of this research are intended to be translated into a proof of concept/prototype of a B2C store so that Moonly can develop a new B2C shop with a validated foundation.
To validate the designs and/or prototypes, user tests should be set-up that can be done in-house, or through personal connections and social media channels as the target audience is not very niche. In this case, the target audience is anyone who wants to buy clothes for working out. While there is access to user databases with previous Masita customers, this project does not yet include global testing for the prototype.
The research will be conducted with Moonly as the client and has been initiated by Moonly in preparation for developing the B2C shop. Masita is not the client in this case (though they may be a stakeholder).
The research will be based on the following research questions:
To start off, I wrote a project plan documenting the project's goals, problem statement, scope and time plan. In this project plan, I also defined the main research question and which sub questions are needed to support it.
To answer Which features are needed for the B2C-webshop and with which priority should they be implemented? and to further identify the requirements of the project, I made a list of requirements and user stories ordered by priority using the requirements prioritisation method.
Throughout the project, I worked with agile methodology by planning sprints and holding sprint demo's and retrospectives.
To answer Which problems did the old magento-based B2C-webshop face and how can I avoid them? and Which platforms can and should be used to develop the new webshop? and find out where it went wrong for the previous Masita B2C store, and to document possible pitfalls for the project, I conducted a previous issues research where I interviewed developers who worked on the previous store.
To answer Which platforms can and should be used to develop the new webshop? and figure out which platform would be best suited to build the new store on, I conducted e-commerce platforms research, where I looked at possible e-commerce solutions and their pros and cons.
To answer How can Masita's technical requirements be integrated? I researched how I could implement Masita's pre-existing technical requirements for integrations such as external sales platform integrations in this technical requirement integration research.
To answer How can I make sure the new webshop is user-friendly and optimised for conversion? and figure out how I could design the new store to be user friendly with validated designs, I conducted design pattern research where I analysed similar online clothing stores and their design patterns. Based on this research, I started designing prototype wireframes. To validate these designs, I held a peer review where I gathered feedback on the wireframes and version 1 of the prototype. I gathered and incorporated feedback from the peer review into a second version of the prototype, I set up usability tests to validate the designs with users. Based on the feedback I gathered from the usability tests, I made a final version of the prototype.
With my prototype done, I had a good feeling of how the new store would look and what would be required to build it. To answer Which platforms can and should be used to develop the new webshop? and to figure out how I was going to develop the front-end of the new store and translate my designs into code, I conducted front-end frameworks research, where I analysed different front-end frameworks and their pros and cons. After picking a suitable front-end framework, I looked at different UI libraries to see if and which UI libraries could be used to develop the front-end in this UI libraries research.
After validating my designs with research and user tests and having picked all the relevant technologies, I started the development process. I documented the entire development process here: store development.
I presented my progress during the midterm review and gathered feedback from my teachers and company mentor.
Near the end of my internship, I wrote a reflection on the internship period and what went well or could have gone better.
To finalize the internship and communicate with my stakeholders I wrote an advisory report.
In terms of research, no extra research needs to be done to verify certain parts of the design or development, however it could be beneficial to research hosting solutions to see if Oxygen is the best fit to host Hydrogen applications, or if a different solution is preferred. While Oxygen is recommended by Shopify, I have not done any research on this to validate if that recommendation is truly the best solution.
The design is done and validated by reviews and testing. No changes have to be made to the current designs unless there are plans to expand, like adding more designs for account settings. Designs should maintain a similar style and use components as designed in Figma as much as possible.
As for the development of the prototype / store, there are plenty of missing features that should still be developed. When developing these features, the same code structure should be maintained to ensure a consistent codebase.
A full list of recommendations can be found in the advisory report.
A collection of everything I did during this internship.