Project name: Libra (https://lovelibra.com/) and TOM organic (https://thetomco.com/au/)

Project start: Sep 2021 

Project duration: 10 weeks

Technologies: SAP Spartacus 4, Angular 12, Figma, Figma tokens 

In of of the past projects working for FAIR consulting group, I was tasked with redesigning Libra and TOM organic brands. two distinctive brands with their own identity that required to be implemented as different themes for one website. 

Since this project involved both websites, I recommended using theming instead of developing two separate websites with similar functionalities. majority of functional process for both websites were the same and even though each one had product specific functionalities. For example in Libra's website there was a subcategory called libragirl which was aimed to educate young girls about personal hygiene and other subjects which does not exists in Tom organic brand. 
In order to address reusability of assets and make sure each website still keeps the brand identity, I devised a design system on Figma that revolved around variables and atomic design. it included a set of UI components in Figma that adhered to Material design concepts and used basic variables that defined their design specifications. Below images show detailed components for each website produced in Figma. 

Through several focus groups meetings discussing existing process and newly introduced ones, I came across the challenge of keeping good aspects of processes that have been refined int he past while making sure new UX is efficient and not limited to old processes. For example, there were processes like ordering sample products that have been designed around limitations of Wordpress which the old website was made of. this in turn produced technical debt in their as-is processes that should not have been introduced in the new to-be processes. That allowed us to define how a process works in a concise and straightforward way, regardless of technical debt.

To tackle this issue I produced a diagram where all components and functionalities in a page was indexed. The diagram then was mapped to the sitemap to get an overall picture of all functionalities down to low level components. later through several workshops with SMEs, the solution architect, BAs, Lead developers we defined and optimised processes. Below image is product page view of components, modules and pages

Once all tasks are defined and steps were written down for existing system, I ranked those steps by SME's choice of criteria ranging from level of difficulty and necessity. that is to say, how necessary was the step in completing the task, and how hard was it to complete that step? 
I simply used a digram to map steps based on those two factors where X axis depicted level of difficulty and Y axis depicted necessity of a step. this way a simple and easy to read/understand visual way. After that it was easy to identify which steps in a process are hard to perform and which ones shouldn't be in the process and require optimisation. 

More importantly this way of mapping introduces difficult steps in every process that be turned into tasks in usability testing to evaluated newly introduced processes. the existing website has gone through years of user testing and feedback however newly introduced processes or changes to existing ones needs to be evaluated before development through usability testing otherwise a heavy price needs to be paid for any change after development. Below image shows process maps for ordering process and as you can see it contains 

Creating two sets of designs introduced a challenge where common processes needed to be tested for usability but unique processes also needed to be included for each website.

Usability testing is a method that can work in the early stage of a project. Companies do not have to wait before releasing the product or publishing the design but can still get views on how real users react. This means less time and effort are needed for developers to change the code back and forth. Secondly, by eliminating identified issues in designs, users will experience less frustration or confusion – potentially increasing the chances of turning a hesitant customer into a buyer. 

I produced 5 tasks that involved major processes for each website then I conducted usability testing by recruiting participants and asking them to perform those tasks on each website separately to gain insight into users’ feelings and thinking – and hence their overall experience. I used a combination of the System Usability Scale (SUS) and post-task walkthrough as preferred methods of usability testing. in a blog post at FAIR consulting group's website I explained how to I performed the test and my reasoning behind selecting aforementioned tests together. read more at https://faircg.com/code-stories/using-system-usability-scale-and-post-task-walkthrough-to-test-usability-and-functionality-of-systems/