SaaS App Redesign to increase adoption and improve user interaction

Dutysheet Ltd

Role

UX/UI Designer

Role

UX/UI Designer

Role

UX/UI Designer

Industry

SaaS, Volunteering

Industry

SaaS, Volunteering

Industry

SaaS, Volunteering

Time

2017

Time

2017

Time

2017

Assemble, a user-friendly Volunteer Management System [SASS], was introduced in 2017.

It was released with a few essential functions, enabling customers to use the application and gather real-life feedback.

Since then, they have acquired a high street charity and another smaller charity as customers, who are working with the team as stakeholders to bring Assemble to the next level.

Problem

Assemble was built using an off-the-shelf CSS framework, which provided a ready UI library for ease of development. However, the library application wasn't the best, and it was creating.

Solution

Although issues were easy to spot, the solution required a complete UI overhaul, creating a well-structured, easy-to-follow system that reflects Assemble's young and eager branding.

At the end of the project, we defined Assemble and its purpose. I made a UI library, which then became Assemble design guidelines.

I restructured the menus and redesigned the UI from the ground up.

Result

Users loved Assemble's new look and feel during user testing, which proved successful in real life.

In a couple of years, Assemble onboarded the most of the high-street charities across the UK.

Assemble was acquired by Access shortly after they onboarded all high-street charities.

Assemble, a user-friendly Volunteer Management System [SASS], was introduced in 2017.

It was released with a few essential functions, enabling customers to use the application and gather real-life feedback.

Since then, they have acquired a high street charity and another smaller charity as customers, who are working with the team as stakeholders to bring Assemble to the next level.

Problem

Assemble was built using an off-the-shelf CSS framework, which provided a ready UI library for ease of development. However, the library application wasn't the best, and it was creating.

Solution

Although issues were easy to spot, the solution required a complete UI overhaul, creating a well-structured, easy-to-follow system that reflects Assemble's young and eager branding.

At the end of the project, we defined Assemble and its purpose. I made a UI library, which then became Assemble design guidelines.

I restructured the menus and redesigned the UI from the ground up.

Result

Users loved Assemble's new look and feel during user testing, which proved successful in real life.

In a couple of years, Assemble onboarded the most of the high-street charities across the UK.

Assemble was acquired by Access shortly after they onboarded all high-street charities.

Assemble, a user-friendly Volunteer Management System [SASS], was introduced in 2017.

It was released with a few essential functions, enabling customers to use the application and gather real-life feedback.

Since then, they have acquired a high street charity and another smaller charity as customers, who are working with the team as stakeholders to bring Assemble to the next level.

Problem

Assemble was built using an off-the-shelf CSS framework, which provided a ready UI library for ease of development. However, the library application wasn't the best, and it was creating.

Solution

Although issues were easy to spot, the solution required a complete UI overhaul, creating a well-structured, easy-to-follow system that reflects Assemble's young and eager branding.

At the end of the project, we defined Assemble and its purpose. I made a UI library, which then became Assemble design guidelines.

I restructured the menus and redesigned the UI from the ground up.

Result

Users loved Assemble's new look and feel during user testing, which proved successful in real life.

In a couple of years, Assemble onboarded the most of the high-street charities across the UK.

Assemble was acquired by Access shortly after they onboarded all high-street charities.

Assemble home page
Assemble home page
Assemble home page
Upcoming events page on Assemble
Upcoming events page on Assemble
Upcoming events page on Assemble

Tools

  • Miro

  • Sketch

  • Overflow

  • Zeplin

Team

  • 1 UX designer

  • 4 developers

  • 2 stakeholders (customers)

  • 2 product owners (CEO, CTO)

My Role

  • UX design

  • UX research

  • Workshop facilitator

  • UI designer

Timeline

  • Overall: 8 months

Interviews

I interviewed product owners during the project's first phase to understand their business goals. Interviews with customer stakeholders gave me insight into volunteering.

After the interviews, I made a comprehensive UX audit based on UX guidelines and best practices.

What we learned from interviews confirmed by the UX audit. The issues were

  1. Lack of consistency in UI elements and features.

  2. The content was haphazardly spread across the app. The lack of information architecture, menu and feature structure was crippling the application.

UI library and design guidelines

I've started working on a UI library and design guidelines. I created a system that addressed consistency and accessibility issues and served as an easy-to-customise foundation for white-label applications.

Layout and the structure

I worked on the application's structure once the basic UI library and guidelines were ready. My goal was to create an intuitive, easy-to-understand, and memorable structure so that users would find their way around much more quickly, regardless of their experience with the app.

  • Two distinct menu groups were created: The main menu & user menu.

  • All menu items were renamed, grouped logically and supported with a custom icon to make them easy to find.

  • I made designs for desktops as Assemble didn't support mobile browsers, but I created a mobile accompanying app to help users on the go.

  • I created a simple yet effective page layout, which would be used across the app to improve consistency further.

UI Design

Once I completed the layout and the structure work, I worked on several new features and pages to be implemented.

While working on designs, I held several workshops with stakeholders and product owners to understand how to create user flows for a given feature.

Then, I created detailed user flows, accompanied by lo-fi designs and Invision prototypes. Once I tested prototypes with available users, I created final designs after making updates based on guerilla testing with users and product owners.


Assemble user flows


While working on the designs, testing them with users and stakeholders frequently helped us implement the features quickly and affordably.

Learnings

This project required me to handle complex tasks, build strong professional relationships, and understand business and user problems as I worked on every step of the process.

It helped improve my project management and leadership skills as well as I was able to see the tangible impact of my work first hand.

Here's what my clients at Assemble are saying about me

"I've had the pleasure of working with Yavuz for the past 9 months during which time he has been focussed on our SaaS product completely redesigning the UI and approaching a number of new features from a UX perspective. Yavuz is a reliable, punctual, individual who is a master at his craft of UI and UX design. I wouldn't hesitate to recommend him for similar projects.

- Ben Hayes, CEO @ Assemble, DutySheet

“His ability to understand the problems we were trying to solve, work with all stakeholders ranging from developers to directors, research and design really beautiful and modern user experience is unparalleled. No detail too small, no complex scenario unworkable. He would work methodically, with good humour but above all, with passion and pride for his work.”

- Bulent Yazici, CTO @Assemble / DutySheet

Tools

  • Miro

  • Sketch

  • Overflow

  • Zeplin

Team

  • 1 UX designer

  • 4 developers

  • 2 stakeholders (customers)

  • 2 product owners (CEO, CTO)

My Role

  • UX design

  • UX research

  • Workshop facilitator

  • UI designer

Timeline

  • Overall: 8 months

Interviews

I interviewed product owners during the project's first phase to understand their business goals. Interviews with customer stakeholders gave me insight into volunteering.

After the interviews, I made a comprehensive UX audit based on UX guidelines and best practices.

What we learned from interviews confirmed by the UX audit. The issues were

  1. Lack of consistency in UI elements and features.

  2. The content was haphazardly spread across the app. The lack of information architecture, menu and feature structure was crippling the application.

UI library and design guidelines

I've started working on a UI library and design guidelines. I created a system that addressed consistency and accessibility issues and served as an easy-to-customise foundation for white-label applications.

Layout and the structure

I worked on the application's structure once the basic UI library and guidelines were ready. My goal was to create an intuitive, easy-to-understand, and memorable structure so that users would find their way around much more quickly, regardless of their experience with the app.

  • Two distinct menu groups were created: The main menu & user menu.

  • All menu items were renamed, grouped logically and supported with a custom icon to make them easy to find.

  • I made designs for desktops as Assemble didn't support mobile browsers, but I created a mobile accompanying app to help users on the go.

  • I created a simple yet effective page layout, which would be used across the app to improve consistency further.

UI Design

Once I completed the layout and the structure work, I worked on several new features and pages to be implemented.

While working on designs, I held several workshops with stakeholders and product owners to understand how to create user flows for a given feature.

Then, I created detailed user flows, accompanied by lo-fi designs and Invision prototypes. Once I tested prototypes with available users, I created final designs after making updates based on guerilla testing with users and product owners.


Assemble user flows


While working on the designs, testing them with users and stakeholders frequently helped us implement the features quickly and affordably.

Learnings

This project required me to handle complex tasks, build strong professional relationships, and understand business and user problems as I worked on every step of the process.

It helped improve my project management and leadership skills as well as I was able to see the tangible impact of my work first hand.

Here's what my clients at Assemble are saying about me

"I've had the pleasure of working with Yavuz for the past 9 months during which time he has been focussed on our SaaS product completely redesigning the UI and approaching a number of new features from a UX perspective. Yavuz is a reliable, punctual, individual who is a master at his craft of UI and UX design. I wouldn't hesitate to recommend him for similar projects.

- Ben Hayes, CEO @ Assemble, DutySheet

“His ability to understand the problems we were trying to solve, work with all stakeholders ranging from developers to directors, research and design really beautiful and modern user experience is unparalleled. No detail too small, no complex scenario unworkable. He would work methodically, with good humour but above all, with passion and pride for his work.”

- Bulent Yazici, CTO @Assemble / DutySheet

Tools

  • Miro

  • Sketch

  • Overflow

  • Zeplin

Team

  • 1 UX designer

  • 4 developers

  • 2 stakeholders (customers)

  • 2 product owners (CEO, CTO)

My Role

  • UX design

  • UX research

  • Workshop facilitator

  • UI designer

Timeline

  • Overall: 8 months

Interviews

I interviewed product owners during the project's first phase to understand their business goals. Interviews with customer stakeholders gave me insight into volunteering.

After the interviews, I made a comprehensive UX audit based on UX guidelines and best practices.

What we learned from interviews confirmed by the UX audit. The issues were

  1. Lack of consistency in UI elements and features.

  2. The content was haphazardly spread across the app. The lack of information architecture, menu and feature structure was crippling the application.

UI library and design guidelines

I've started working on a UI library and design guidelines. I created a system that addressed consistency and accessibility issues and served as an easy-to-customise foundation for white-label applications.

Layout and the structure

I worked on the application's structure once the basic UI library and guidelines were ready. My goal was to create an intuitive, easy-to-understand, and memorable structure so that users would find their way around much more quickly, regardless of their experience with the app.

  • Two distinct menu groups were created: The main menu & user menu.

  • All menu items were renamed, grouped logically and supported with a custom icon to make them easy to find.

  • I made designs for desktops as Assemble didn't support mobile browsers, but I created a mobile accompanying app to help users on the go.

  • I created a simple yet effective page layout, which would be used across the app to improve consistency further.

UI Design

Once I completed the layout and the structure work, I worked on several new features and pages to be implemented.

While working on designs, I held several workshops with stakeholders and product owners to understand how to create user flows for a given feature.

Then, I created detailed user flows, accompanied by lo-fi designs and Invision prototypes. Once I tested prototypes with available users, I created final designs after making updates based on guerilla testing with users and product owners.


Assemble user flows


While working on the designs, testing them with users and stakeholders frequently helped us implement the features quickly and affordably.

Learnings

This project required me to handle complex tasks, build strong professional relationships, and understand business and user problems as I worked on every step of the process.

It helped improve my project management and leadership skills as well as I was able to see the tangible impact of my work first hand.

Here's what my clients at Assemble are saying about me

"I've had the pleasure of working with Yavuz for the past 9 months during which time he has been focussed on our SaaS product completely redesigning the UI and approaching a number of new features from a UX perspective. Yavuz is a reliable, punctual, individual who is a master at his craft of UI and UX design. I wouldn't hesitate to recommend him for similar projects.

- Ben Hayes, CEO @ Assemble, DutySheet

“His ability to understand the problems we were trying to solve, work with all stakeholders ranging from developers to directors, research and design really beautiful and modern user experience is unparalleled. No detail too small, no complex scenario unworkable. He would work methodically, with good humour but above all, with passion and pride for his work.”

- Bulent Yazici, CTO @Assemble / DutySheet

Let's get to know each other.

Let's get to know each other.

Let's get to know each other.

Dutysheet Ltd

Role

UX/UI Designer

Role

UX/UI Designer

Industry

SaaS, Volunteering

Industry

SaaS, Volunteering

Time

2017

Time

2017

SaaS App Redesign to increase adoption and improve user interaction

Overview

Assemble, a user-friendly Volunteer Management System [SASS], was introduced in 2017.

It was released with a few essential functions, enabling customers to use the application and gather real-life feedback.

Since then, they have acquired a high street charity and another smaller charity as customers, who are working with the team as stakeholders to bring Assemble to the next level.

Problem

Assemble was built using an off-the-shelf CSS framework, which provided a ready UI library for ease of development. However, the library application wasn't the best, and it was creating.

Solution

Although issues were easy to spot, the solution required a complete UI overhaul, creating a well-structured, easy-to-follow system that reflects Assemble's young and eager branding.

At the end of the project, we defined Assemble and its purpose. I made a UI library, which then became Assemble design guidelines.

I restructured the menus and redesigned the UI from the ground up.

Result

Users loved Assemble's new look and feel during user testing, which proved successful in real life.

In a couple of years, Assemble onboarded the most of the high-street charities across the UK.

Assemble was acquired by Access shortly after they onboarded all high-street charities.

Assemble home page
Assemble home page
Upcoming events page on Assemble
Upcoming events page on Assemble

Tools

  • Miro

  • Sketch

  • Overflow

  • Zeplin

Team

  • 1 UX designer

  • 4 developers

  • 2 stakeholders (customers)

  • 2 product owners (CEO, CTO)

My Role

  • UX design

  • UX research

  • Workshop facilitator

  • UI designer

Timeline

  • Overall: 8 months

Interviews

I interviewed product owners during the project's first phase to understand their business goals. Interviews with customer stakeholders gave me insight into volunteering.

After the interviews, I made a comprehensive UX audit based on UX guidelines and best practices.

What we learned from interviews confirmed by the UX audit. The issues were

  1. Lack of consistency in UI elements and features.

  2. The content was haphazardly spread across the app. The lack of information architecture, menu and feature structure was crippling the application.

UI library and design guidelines

I've started working on a UI library and design guidelines. I created a system that addressed consistency and accessibility issues and served as an easy-to-customise foundation for white-label applications.

Layout and the structure

I worked on the application's structure once the basic UI library and guidelines were ready. My goal was to create an intuitive, easy-to-understand, and memorable structure so that users would find their way around much more quickly, regardless of their experience with the app.

  • Two distinct menu groups were created: The main menu & user menu.

  • All menu items were renamed, grouped logically and supported with a custom icon to make them easy to find.

  • I made designs for desktops as Assemble didn't support mobile browsers, but I created a mobile accompanying app to help users on the go.

  • I created a simple yet effective page layout, which would be used across the app to improve consistency further.

UI Design

Once I completed the layout and the structure work, I worked on several new features and pages to be implemented.

While working on designs, I held several workshops with stakeholders and product owners to understand how to create user flows for a given feature.

Then, I created detailed user flows, accompanied by lo-fi designs and Invision prototypes. Once I tested prototypes with available users, I created final designs after making updates based on guerilla testing with users and product owners.


Assemble user flows


While working on the designs, testing them with users and stakeholders frequently helped us implement the features quickly and affordably.

Learnings

This project required me to handle complex tasks, build strong professional relationships, and understand business and user problems as I worked on every step of the process.

It helped improve my project management and leadership skills as well as I was able to see the tangible impact of my work first hand.

Here's what my clients at Assemble are saying about me

"I've had the pleasure of working with Yavuz for the past 9 months during which time he has been focussed on our SaaS product completely redesigning the UI and approaching a number of new features from a UX perspective. Yavuz is a reliable, punctual, individual who is a master at his craft of UI and UX design. I wouldn't hesitate to recommend him for similar projects.

- Ben Hayes, CEO @ Assemble, DutySheet

“His ability to understand the problems we were trying to solve, work with all stakeholders ranging from developers to directors, research and design really beautiful and modern user experience is unparalleled. No detail too small, no complex scenario unworkable. He would work methodically, with good humour but above all, with passion and pride for his work.”

- Bulent Yazici, CTO @Assemble / DutySheet

sdfg