Portfolio

Product design

eMigration

Crafting a flexible design system to streamline the process of registering as an immigrant or refugee in Belgium

eMigration is a project undertaken in collaboration with the Federal Government of Belgium. Our mission was to revolutionise the process of registering as an immigrant or refugee, ensuring a smoother and more efficient experience while reducing waiting times and administrative burdens.

As digital product designer, I embarked on the journey of creating a flexible and scalable design system that could be seamlessly applied across multiple eMigration applications. The goal was to establish a cohesive and user-centric ecosystem, empowering the government officials to navigate the complexities of immigration procedures with ease.

Project prepared by Craftzing team in cooperation with eMigration team.

•Component library for creating a design system compliant with WCAG and best a11y practices
•Structuring Figma component library in a scalable way
•Visual assets
•Preparing Zeroheight documentation
•Cooperating with dev. team, application users and stakeholders

Problem
- Government officials have limited time available for processing individual applicants' files due to a high volume of applicants.
- The work environment for government officials can be noisy and overstimulating, leading to distractions and the need for additional time to enter applicant information accurately.

Solution
- Ensure the consistency of multiple applications used by government officials, both in terms of visual design and applied UX patterns, to facilitate ease of use and navigation.
- Strive for a high level of accessibility to ensure that the software remains functional even in situations where there may be temporary disabilities, such as a noisy environment or when users need to have one hand free for handling physical documents while navigating via keyboard input.

Scope
- Phase 1: flexible, scalable and WCAG compliant design system that could be seamlessly applied across multiple applications.
- Phase 2: full page templates
- Phase 3: implementation and testing

Process
‍
1. Analysing user flows to determine which components are needed

In the initial phase, we conducted a thorough analysis of user flows to understand the user journey. By closely examining the existing system and engaging with government officials, we identified pain points and opportunities for improvement. By analysing the flows we determined the essential components which formed the foundation for our design system.

2. Creating component library in Figma

To streamline the design and development process, we leveraged the power of Figma to create a dynamic, atom-based component library. With attention to detail, we crafted a versatile collection of reusable UI components that formed the backbone of our design system. Using Figma as a tool offered a multitude of benefits. Its flexibility allowed us to adapt and customise components to suit various eMigration applications, ensuring a consistent visual language and user experience across the board. This flexibility empowered us to iterate rapidly, make design updates efficiently, and maintain visual consistency throughout the entire product ecosystem.

Below you can see just a few examples of components we created.

3. Hand over to dev. and overseeing development process
‍
With basic components in place we could set up a smooth handover process together with the development team. Throughout our collaboration we maintained close contact. Regular meetings, reviews, and demonstrations were conducted to address questions, provide guidance, and ensure design integrity. This collaborative approach bridged the gap between design and development, ensuring that the applications adhered to the standards set forth in the Figma component library. It also allowed us to shift process of working on inclusive design left and reach a high level of accessibility and WCAG compliance of the components.

4. (Future) measuring success

Here are some data points that would be valuable to measure or compare:

- The time required for a government worker to process an individual's application before and after the implementation of the new design.
- The frequency of duplicated identity files (during our process, we discovered that government officials frequently create multiple files for a single individual due to the difficulty and time required to locate an existing file, resulting in an overall longer process).
- Accessibility scores
- Overall satisfaction levels with digital tools among government workers before and after the implementation of the new design.

What did I learn:
‍
User-Centric research and collaborative partnership: Immersing ourselves in close collaboration with eMigration team allowed us to deeply understand the needs and pain points of the government officials and personnel who would be using the eMigration ecosystem internally. This collaboration and research-driven approach ensured that the design system effectively addressed their requirements.

Scalable Design Systems: Developing a flexible and scalable design system was crucial to ensure consistency and ease of use across multiple eMigration applications. By establishing a robust set of design principles, components, and guidelines, we created a cohesive and intuitive interface that enabled government officials to navigate the system seamlessly and perform their tasks efficiently.

Accessibility and Usability: Although the applications were designed for internal use, prioritising accessibility and usability was still essential. Governmental organisations in Belgium are legally obliged to ensure their applications meet the Web Content Accessibility Guidelines (WCAG) requirements. By prioritising accessibility, we not only complied with the existing legal framework but also anticipated the reality of future digital landscape, where likely more businesses will be required to meet accessibility standards.

Empowering Internal Efficiency: The design of the eMigration applications aimed to empower government officials by reducing waiting times, simplifying administrative tasks, and improving overall efficiency. By optimizing workflows, providing clear guidance, and streamlining data entry processes, the design system enabled government personnel to carry out their responsibilities effectively, leading to enhanced productivity and a more seamless registration experience for immigrants.

Royal botania - sample box

Designing an intuitive sample box creation tool within the portal for dealers of Royal Botania outdoor furniture

See more See less

In response to the challenge of customers having a limited understanding of the actual appearance of Royal Botania outdoor furniture, coupled with the intricate and manual process Royal Botania dealers face in obtaining extra samples, the project aimed to revolutionize this experience.

We introduced a user-friendly sample box creation wizard within the Royal Botania dealer portal. This solution not only streamlines the process for dealers, reducing friction in sample orders, but also empowers customers to make more informed choices by enhancing their access to a wider range of furniture samples.

Project prepared by Craftzing team.

• Market research
• User stories and flows
• Low fidelity wireframes
• UI design, prototyping and prototype testing
• Overseeing development process
• Life tool testing

Problem
- Customers have limited understanding of real appearance of the furniture; they have to rely on the items available currently in the showroom
- Royal Botania dealers have to go through a complicated and manual process to obtain some extra samples

Solution
- To implement a user friendly sample box creation wizard with in Royal Botania dealer portal, that would reduce friction for dealers wanting to order samples and allow customers to make more informed choices

Scope
Creation tool within existing 'dealer portal'

Process
‍
1. Market research

To gain a deeper insight into similar tools, I initiated research on online customization tools, aiming to comprehend the common practices in the field.

2. Crating user stories and flows

In the project's initial phase, our primary emphasis was on crafting user stories and flows. I aimed to ensure a nuanced understanding of the diverse needs of users in various situations and contexts. This approach allowed us to lay a strong foundation for addressing the needs of different users and provided a solid basis for subsequent stages of the project.

3. Creating wireframes and prototype testing
‍
In the next phase, I transformed previously crafted user flows into tangible wireframes. Utilizing Figma, I converted these wireframes into rapid prototypes, enabling us to simulate user interactions and test the fluidity of the proposed flows. The resulting prototypes were presented to the client for feedback, initiating a collaborative refinement process. Through multiple iterations, we fine-tuned the prototypes based on the valuable insights gained, ensuring that the final product aligns with client's expectations and user-centric goals of the project.

4. UI design, prototyping and prototype testing

Moving into the UI design phase, we dived into the details. Building on the wireframes, we crafted a visually engaging interface while prioritizing functionality. Prototyping took on a more detailed form, incorporating refined UI elements to accurately represent the final product. These detailed prototypes underwent testing, allowing us to evaluate not only the overall flow but also the visual appeal and usability. As before, client feedback played a crucial role, leading to iterative refinements until we achieved a polished and highly effective user interface ready for the development stage.

5. Overseeing development process

As we transitioned into the development phase, I started by sharing the designs with the dev team and discussing them in detail during a handover meeting. From there I took on a more supporting role —answering the questions, addressing dev requests, and being there whenever they needed some additional context. We put a strong focus on quality assurance and testing, ensuring that everything ran smoothly and met our standards.

6. Life tool testing

After the tool was life and available to selected partners of Royal Botania we facilitated online testing through a use of a survey to gather their feedback and plan further improvements.

What did I learn:
‍
Early stages of UX process: Engaging in thorough user story development and early flow discovery significantly contributes to project success. By investing time in understanding user needs and preferences early on, we were able to align the design process more closely with user expectations, resulting in a more intuitive and user-friendly experience.

Displaying a large number of options: Effectively managing a large number of options within the creation wizard can be challenging. Through iterative design and testing, we tried several patterns of displaying list of samples and selected one which allows for a preview of the key and most popular elements.

Power of user research: It's important to research and test assumptions on all stages of the process, including measuring the performance of a life product.

Fibricheck app

Designing an app for monitoring heart health

See more See less

Fibricheck is a tool for regular monitoring of one's heart health. Next to providing a suitable tool, they focus on education about this topic in a hope of preventing heart problems amongst their audience. Project prepared by Craftzing team in cooperation with Fibricheck team.

•UI/UX design
•Accessibility audit
•Component library for creating a design system
•Visual assets
•Guidance for dev. team during an agile dev. process

Poblem
- There are two methods to acquire a Fibricheck subscription: one is by obtaining a recommendation from a healthcare professional, and the other is by proactively purchasing a subscription directly through the app. When we initially started working with Fibricheck team, the majority of users were referred by their doctors. However, Fibricheck aimed to broaden its user base by encouraging more users to purchase subscriptions directly through the app.
- The wait times during the measurement process, which is a crucial function of the app, have been notably long. This extended waiting period has negatively impacted the user experience and made it less engaging for our users.
- The app scored low in terms of accessibility. Given that the majority of our users are aged 55 and above, there's a higher likelihood that they may experience certain age-related disabilities that could affect their ability to use the app effectively.

Solution
- Refactoring the subscription flow and optimizing the information architecture on the subscription page.
- Incorporating dynamic elements to alleviate extended waiting times and make the waiting experience more engaging for our users.
- Improving the accessibility scores

Scope
-Full mobile application, including:
- Registration flow
- Onboarding flow
- Measurement flow
- Subscription flow and pricing

Process
‍
1. Discovery track
In this phase together with my teammates we wanted to map the existing flows of the product in a set of wireframes and then suggest further iterations on them in order to improve the user experience. We were working closely with the client to make sure the solutions we propose as an MVP app match the long term strategy for the app.

2. Accessibility workshops
One of the goals for this project was improving the accessibility of the app. We organised a series of workshops, where together with the client we performed an accessibility audit of the existing app and mapped accessibility directions for the future.

3. UI design and component library
After validating the general flows of the product we began working on the components and detailed screens. We wanted to make sure that we provide the client with a system that's future-proof and scalable.

Our main area of focus were form elements, since that's an essential part of the app providing the user with an opportunity to communicate with their health advisor.

Same as before, at this stage we were working in close cooperation with the client to deliver a scalable product, matching their marketing goals and long term strategy for the product. The client also performed a series of tests amongst their users which resulted in some final UX iterations before the delivery of the app.

What did I learn:
‍
Incorporating User Testing: I learned to integrate user testing into the design process, using feedback to iterate and make improvements based on user insights.
‍
Designing for High Accessibility Score: I gained expertise in designing for accessibility, making our products inclusive and user-friendly for individuals with disabilities, while also expanding our user base.
‍
Creating a Design System and Documentation in Figma: I developed a design system and comprehensive documentation in Figma, enhancing team communication, design consistency, and efficient handoffs to developers.
‍
Collaborating with Expert Profiles on the Client's Side: Working closely with client-side experts taught me how to leverage their knowledge to make informed design decisions and align our work with client goals.
‍
Cooperating with Developers in an Agile Process: Collaborating with developers in an agile framework enhanced communication and adaptability, resulting in more efficient problem-solving and product development.

Lokkal app

Designing an online shopping experience

See more See less

‍Lokkal is a Belgian Startup, focused on offering local products through their app. Selling locally puts more focus on the environmental aspect of logistics, supporting local business and being able to buy fresh and seasonal products. And all that conveniently delivered to your doorstep. Project prepared by Craftzing team.

•UI/UX design
•Component library for creating a design system
•Visual assets
•Prototyping & testing

Problem
- To be able to purchase fresh and local products customers often have to visit several different shops in different locations
- Many products available in the supermarkets are imported from far, which has negative impact on the environment

Solution
- Mobile marketplace for purchasing from local vendors
‍
Scope
Full mobile app, including:
-Onboarding and authentication flow
-Online shopping experience
-User profile
-Check-out flow

Process
‍
1. Market research
I started my work by conducting a market research. My goal was to understand what market has to offer for the users and how Lokkal app could offer them something fresh. On top of that I wanted to understand the common good practices in designing for e-commerce.
‍
2. Discovery track
In this phase together with my teammates we wanted to analyse the possible user cases and based on that map the flows we need to consider. After we reached a good understanding of the needs of possible users we've created low fidelity wireframes which were subjected to multiple rounds of validation in internal workshops and workshops with the client.

Lokkal app low fidelity wireframes and prototype

3. UI design and component library
Next I started working on UI design, based on branding guidelines we received from the client. I wanted to create a library of reusable and scalable components and set of other guidelines which would ensure consistency of the app. Also at this stage we've run multiple rounds of validation, both internally and with the client.

4. User testing
Additionally, we've performed series of rapid internal tests and external user testing. Since the whole design process was happening during the outbreak of COVID-19 we wanted to find a way to test the software with real users but in a safe way. As an answer I suggested using Maze as our platform to gather feedback and insights using a fully online tool.

5. Delivery
Thanks to the user testing we were able to expose several friction points experienced by our audience. With those results in mind we've ran a final round of iterations before handing the designs off to the developers.

What did I learn:
‍
Designing flexible UI for CMS-powered app: I've learned how to design flexible patterns that would allow for uploading content from external sources.
‍
Online testing with Maze: I've learned how to facilitate online, async user testing and how to benefit from the testing data further.

Website of WeGroup

Redesigning a company website

See more See less

Further development of Louise software and a recent update in WeGroup’s branding and marketing strategies called for a re-design of the website.

•UI/UX design
•Webflow development and testing

Goal and scope
‍
To create a page, that would be more in line with the updated branding strategy. Some other requirements were:

•Creating room for the page to grow, as WeGroup’s portfolio of products and services grows
•Including dynamic content, easy to adapt by various team members

Process
‍
1. Brainstorming
We've started the process by brainstorming in a small, multidisciplinary team about the message we want to communicate through the new website. Next we've created a detailed site-map as a base for design work.
‍
2. Design draft
Since we knew we would like to use Webflow for design and development we decided to focus purely design work on creating low fidelity wireframes and drafts of branded pages to use as a reference. The rest of the process was handled directly in Webflow.
‍
3. Webflow design and development
Working in Webflow gave me an opportunity to quickly validate any design decision made. We could almost instantly test the new pages. It also allowed for creation of library of styles (classes) to re-use throughout the process.

What did I learn:
‍
How to design and test in Webflow
How to work with dynamic content in Webflow
How to visualise big amounts of content and data
How to lead and handle project planning in a team
How to create a system of visual assets to reuse across multiple channels

Louise from WeGroup

Designing an onboarding process for new users

See more See less

Louise is a digital insurance assistant and part of insurance software offered by WeGroup. She helps insurance brokers to work more efficiently and better serve their customers.

•UI/UX design
•Prototyping & testing
•Visual assets

Goal and scope
‍
To design an onboarding flow for new users of the Louise software, including stages like:

•gathering information about the user and organisation
•customising the profile
•e-mail verification of the account
•confirmation of the setup

Process
‍
1. User experience research based on user personas
We wanted to make sure that we create an onboarding experience, which really serves the needs of various types of users of Louise app. To achieve that I suggested working with user personas to create as many possible scenarios as we can.
‍
2. Discovery track
Next I created a set of low fidelity wireframes which were subjected to multiple rounds of validation through rapid testing.
‍
3. UI design
Next I started working on UI design. My task was to work within the frames of existing branding and the library of components to ensure consistency. On top of that I had to update a library of existing assets. The assets we used served both as elements adding context to selected screens as well as structural elements in creating an avatar.

What did I learn
‍
User personas is a powerful tool to channel empathy towards needs of different groups of potential users
How to work with a design system and libraries of UI components

As outcome of testing: sizes of clickable elements have to be well adjusted to the screen size: mobile views require elements that will be easy to press with a finger

Gan direct

Usability and accessibility audit

See more See less

‍Gan direct was one of prospects of WeGroup. They reached out to us interested in implementing Louise technology in their digital strategy as a main digital contact point for their users. In early stage of the project I was asked to create a POC for them, translating the concept of Louise to their branding as well as performing usability audit of their current visual communication.

•Usability audit
•UX and UI recommendations

Goal and scope
‍
To perform an usability audit and suggest improvements for making the app more user friendly and more in line with W3C Accessibility Standards.

Process
‍
1. Audit and recommendations
I started the project by documenting the existing styles from Gan direct's website and mobile apps. Next I detected the problematic areas and suggested an improved information architecture as well as improvements to several elements such as colours.

Gan direct website information architecture

Gan direct usability and accessibility audit

2. Creating sample designs
Later I've created sample designs of onboarding flow for new clients using WeGroup's white labeled solution Louise as a reference. Colours and styles I suggested were a consequence of performed audit but at the same time I wanted to preserve their brand identity.

What did I learn:
‍
How to apply W3C Accessibility Standards to my designs
How to make use of Figma plugins to improve accessibility of designs
How to perform and document a UX audit