Sisal Tipster

Industry

Hospitality

NDA

No

My Role

Experience Designer

Responsibilities

Design Process Management

ToV & Brand consistency

Content writing

Policies compliance

Prototyping

Development (CMS)

Tools

Miro

Figma

Adobe Photoshop

Adobe Illustrator

Elementor

WordPress

CED | Civil Engineering Design is a civil engineering company, providing services for private customers, companies and public administrations.

Challenge

Online since 2016, the company website needed to be refreshed in terms of tone of voice, visuals and brand consistency, to offer a more modern interaction between customers and company.

Process

Based on the needs, the work started by identifying how the brand evolved in the last 8 years, from the viewpoints of how its market has grown, the way its customer usually interacted with, the tone of voice used to speak with potential leads.

Once identified an appropriate template structure, I wrote dedicated contents for the four sections of the website, keeping ToV consistent with new visual choices and images.

Also cookie and privacy policies have been refined to be compliant to new standards.

The main intent has been to give more freshness to the message and, by using a variety of micro interactions, to offer a smooth and pleasant interface.

After few rounds of iterations of prototyping, the final structure came to life, satisfying all the expectations in terms of information, user experience, correct visualization on different breakpoints.

Once evalueted by stakeholder and tested by a pool of users, the website has been refined and went live on January 1, 2024.

Outcome

The result will be to offer a smooth navigation and a pleasant and modern product, through a clear and intuitive user experience and a ToV appropriate to different kinds of customers, as privates, companies or public administrations.

Interested in further discuss this project?

Drop me an email at hello@alessiobocchino.cloud

30 Gennaio 2024

Sisal Group – Tipster

Sisal Tipster

Client > Sisal Group

Industry > Gaming

Project Goal > UX/UI Product design

Timeline > Dec ’20 – Mar ’22

My Role > Sr UX/UI Designer

Responsibilities:

Research, Data Analysis, Wireframing, Prototyping, UI Design, UAT, Agile Collaboration

Tools > Miro, Adobe Suite, Figma

overview

Sisal Tipster: the first betting social network in Italy

Tipster is the innovative social betting platform by Sisal, one of the leading international operators in the regulated gaming industry (part of Flutter Entertainment plc since Aug ’22).

A platform, free of charge, where Sisal users can show their skills by sharing their bets, or simply taking a cue from other tipsters; the integrated social logic let users to interact, like and follow each other, taking inspiration by the influencers top tipsters.

Banner promozionale di Sisal Tipster con atleti digitalizzati di basket, tennis e calcio su sfondo verde

Challenge

An unparalleled product on Italian market

Tipster was the absolutely first betting social platform on Italian market: as a product with no precedent, a great attention has been paid to user research phase, to create a highly desirable and usable product, with a strong customer-centered approach. The challenge has been to integrate the usual social network’s dynamics in an online betting context.

Context

Right context and right people to apply an Agile methodology

The Agile methodology is a project management approach that involves breaking the project into phases and emphasizes continuous collaboration and improvement. Teams follow a cycle of planning, executing, and evaluating.

Sisal had the right mix of people, knowledge and skills (on top to really structured teams for each department) to collaborate applying this methodology.

As the only designer on the project at the beginning of it, I had the opportunity to set our internal processes with product owners and dev team, thanks to a great communication by all and a meaningful willingness to learn, think, share in order to achieve common goals.

Deeply working hands-on Tipster gave me a wide knowledge about it, becoming in few time the historical memory of the project, design side; this led me to be one of the stakeholders during a round (of two important ones) of user research performed by two external providers (Conflux and H-Farm).

As the project grew, the dedicated design team did it as well, so I found myself to lead a team of 4 people on this fantastic and innovative product.

Methodology

Scrum: a specific framework within the broader Agile methodology

Let’s understand how, in Sisal, UX design fit into Agile methodologies.

Since Agile is an engineering practice, it didn’t have UX and design in its core principles; our role was to amalgamate the usual UX design practices with Agile project management.

UX/UI designers worked in strict collaboration with other team members such as Product managers, Owners or Specialists on business side, and Scrum master and Dev team on the other one, on activities defined at every stage, to be able to build cohesive products or features.

Kickoff meeting, with design team

The kickoff meeting was a crucial event, marking the beginning of a new project or a new phase within a project, with the purpose of aligning team members, stakeholders, and everyone involved with the project on the goals, objectives and expectations.

After a kickoff meeting, we designers evaluated the efforts in terms of time and people to create the features as requested.

User stories, part of the Sprint planning

A user story was a concise description of a feature or functionality from an end user’s perspective. It was a way of expressing requirements in an easily understandable format by both technical and non-technical team members.

During the Sprint Planning, a Scrum master helped the team to select user stories, from an organized product backlog, to work on during the upcoming sprint (lasting 2 to 4 weeks), breaking them down into smaller tasks as needed.

At the end of every sprint, a releasable product (or a feature of it) was developed.

Daily standup meetings, part of the Sprint phase

A daily standup meeting was a brief and regular team meeting with the primary purpose of providing a quick status update and addressing any potential obstacle or challenges faced by team members.

By holding daily standup meetings, teams couldn quickly adapt to changes, stay aligned with project goals, and foster a collaborative environment. This was probably one of the most important part of the Sprint phase on Tipster project.

Weekly Follow up by design team

I usually set weekly meetings to update the working group, during design phase, to ensure no gaps between project specification and designs.

At the end of design phase, the final designs were shared with all the involved figures; if needed, designs were refined and, once completed, they were paired to related user stories on Jira to let developers start translating them in releasable products.

Sprint review and Sprint retrospective

The further step was a Sprint review, a meeting where the Scrum team presented the completed work to stakeholders and they provide feedback, to adjust the product backlog.

At the end of the cycle, a Sprint retrospective was held to reflect on the past sprint and to identify future opportunities for improvement.

Design

Many different features to create a cutting-edge product

When I was tasked on Tipster project, the platform was online since few months.

The amount of subscriptions was increasing week by week, altough at that time Tipster was more like a bets repository than something else. The attention of the company was really high, considering Tipster as the springboard to success in Betting industry.

A never stopping research at the core of the project

As the only UX/UI designer at the beginning of the project, I mainly worked on manteinance and developers’ requests; I started performing comparative analysis on different social networks, because I saw the potential evolution of the platform that way, one of a kind. I was intrigued by the creative challenge of bringing social network’s dynamics into a brand new product, without forgetting to guarantee conversions.

During 2021, the need to carry out a deep phase of research with users became central, and it was the right moment to involve an external partner (Conflux) to perform a research activity with users, in order to bring out cues from their needs and validate those feature that, on business prediction, could represent the evolution of the platform.

Here all the features I worked on, designing and leading Tipster project:

Tipster Reward: An automated mechanism, related to the received replay of shared tips, that allow users to receive a prize based on volumes (turnover) generated by their tips.

Tipster Filtering: A filtering system to provide users with the possibility of conducting more detailed searches

Tipster “Light” for Retail: The integration of a light Tipster version on Sisal stores’ physical devices.

Tipster Shared Bet: A feature allowing users to create shared bets.

Tipster P2P Challenge: A function to let users challenge each others.

Tipster Gamification: A series of features to set up typical gamification dynamics.

Tipster My Tipster: The setting up of a private area and a feed, along the lines of social networks, allowing users to search tipsters to follow according to their interests and preferred game modes

Tipster Avatar Customization: A feature allowing users to customize their avatar with those offered by the platform or with personal pictures.

Tipster Banners: Design of dedicated banners for different breakpoints.

Goals

The planned functionalities, emerged from the first round of research by Conflux, were deepened and validated through a second round, held at the beginning of 2022 by H-Farm, also crossed with research material of our project dedicated team.

I personally took part in a two-days workshop, facilitated by H-Farm, alongside important stakeholders of the company, as a UX Betting specialist.

Goals could be summarized in:

Acquisitions: Increasing the user base and attracting new users
Retention: Customer retention and increased life time value
Increased activity per user: Encouraging users to increase the use of Tipster platform
Top users management: Increasing engagement of active and experienced users
Engagement: Involving and increasing interaction with and between users
Special initiatives: Creating new revenues with extra activities

A close and honest collaboration at the base of success

An eye to the business, another to development. In the middle me and my team working closely to give Tipster a cutting edge design, a great usability and to offer to the market the most innovative way of translating a strong intuition of the business.

Tight deadlines, clear requests and a long list of productions, working shoulder to shoulder with product owners, designers, researchers and developers, made Tipster a challenging but also the most satisfying professional challenge of my working experience.

Outcome

Since launch, Tipster have had a great impact on Italian market.

In October 2021, Sisal Tipster has been awarded as “Best in-house product innovation” at EGR Italy Awards 2021, and Sisal has also been awarded as “Best Operator of the year 2021”.

In September 2022, the statistics said:

more than 100.000 subscribers
8 millions tips shared on the platform

In June 2023, It’s been recorded the higher odd (100) for a win, the biggest ever on sports betting, on a tip shared by 6000 users.

18 Gennaio 2024

Banco BPM – YouApp / YouWeb

Banco BPM

Client > Sisal Group

Industry > Gaming

Project Goal > UX/UI Product design

Timeline > Dec ’20 – Mar ’22

My Role > Sr UX/UI Designer

Responsibilities:

Research, Data Analysis, Wireframing, Prototyping, UI Design, UAT, Agile Collaboration

Tools > Miro, Adobe Suite, Axure RP, Sketch, Appbot

overview

Banco Bpm, the third largest banking group in Italy

BancoBPM is a solid entity in the Italian banking industry, with over 20.000 employees, 1.500 branches and around 4 million customers; in terms of assets, it has a deeply rooted presence in Northern Italy regions, including those with the highest industrial concentration in Europe.

YouApp and YouWeb are its online banking platforms.

problem

When UX maturity is low, designers become UXD ambassador

Due to a low UX maturity of the context (hypotetically about 3rd stage on NN/g scale), the main challenge was to underline the importance of an user-centered approach and to clearly communicate efforts, workflows and advantages to non-design stakeholders.

Since every evolution needs time, the designer’s role involves gradually introducing new tools into the process, to demonstrate which value they could add to a final product.

process

A widely used method with a linear approach: the Waterfall methodology

Requirements ->

Design ->

Implementation ->

Testing ->

Manteinance

requirements

From identification to analysis, to create a functional requirements document

This was the first crucial phase of the client’s methodology, because it set the foundation for the entire project by defining what the system is expected to achieve.

The relationships between designers and functional analysts were central to the processes at BancoBPM; analysts, in a dedicated team of 10, were in charge to interact with business stakeholders, to establish a clear and unambiguous understanding of the project’s goals and deliverables, then shared with design team.

The requirements were documented in detail, creating Requirements Specification documents (funtional analysis); this document served as a reference for the entire project team and it is used to guide subsequent phases of the process.

design

Requirements were ready to become design solutions

Once requirements were completely documented and approved, design phase could start in order to create detailed, clear and (why not) appealing design solutions and specification for how the system will be built.

We usually started from the functional analysis’ parsing, to figure out which business needs to meet and how analysts assumed to integrate them into the product; the more accurate was the functional analysis, the easier would have been to turn requirements into design solutions.

As already mentioned, among the plots of the project a good designer should advocate for UCD and demonstrating the value through the rationale behind the choice of other instruments, to get always more appropriate solutions; in the particular case of this client, I put competitive analysis into the process, sure it could really add value to the project, to align the product on the market and to spot specific design pattern.

Some competitors taken into account:

All the gathered information gave me the wider vision I needed, especially where the functional analysis showed possible frictions on user flows.

It was time to wireframe.

Although wireframes’ definition usually stands out in 3 different qualities (low, mid and high-fidelity), it can often happen, for time and budget limits, to directly start designing at a mid-fidelity. This often happened on this client.

So, to avoid jumping to simplistic solutions, I also put few fast rounds of testing in this phase (Guerrilla) to test designed solutions with some users.

This testing step reduced the risk of developing solutions not properly aligned to user needs, thus lowering additional costs and issues in the further development process.

Designer should always take responsibility of increasing the UX maturity of a company; this is why, when I had the opportunity, I performed other integrative tools I considered useful to include in BancoBPM workflow.

In addition to those already mentioned, I performed:

UX Audit
Benchmarking
Mapping
Card sorting
Usability test (Guerrilla, Moderated, Recording, Sorting)
A/B test
UX Microcopy

design

During the collaboration with BancoBPM, I’ve been tasked to design several features of YouApp/YouWeb, such as:

Credit transfer feature
IBAN sharing feature
Touch ID & Face ID
Prepaid card subscription
Cookie policy settings
Credit/debit card section

Final review and approval: everything was ready to move on next step

The detailed designs were reviewed by stakeholders, to ensure they aligned with previously approved requirements.

Once the project was deemed to meet business expectations, it was formally approved.

Design phase transformed the requirements into a detailed designs and relative documentation that guides the further implementation phase; it offered developers a roadmap to follow, making sure the system was built according to the specified architecture and requirements.

If any bugs were found in designs, designers would have been involved again to fix them; differently, they’d have been provided access to a test environment during the Testing phase, to perform UAT.

When everything was tested and bug-free, It went live and “moved” to Mantenaince stage, the last of the Waterfall model, where the product is monitored, updated, and fixed after being released to users.

outcome

After deliverying, all the features designed by design team (during my consulting period) went live within the following 12/18 months.

Starting from 2021, they’ve been observed:

a net decrease of customers complaints to internal contact center
a marked improvement in user satisfaction and rating of both BancoBPM online platforms
a 26% increase in YouApp downloads, still climbing in 2022

Lastly, the confidence of stakeholders in UCD and designers’ workflow increased significantly, leading Design team to be more (and early) involved in business processes.

12 Gennaio 2024

Manga Comics Market

Client > Manga Comics Market

Industry > E-commerce, Publishing

Project Goal > E-commerce Redesign

Timeline > Dec ’22 – May ’23

My Role > Experience Designer

Responsibilities:

Research, Data Analysis, Personas, Scenarios, Empathy Mapping, IA, Wireframing, Prototyping, Design System, Testing

Tools > Miro, Google Form, Adobe Suite, Figma

Overview

Manga Comics Market: an emerging reality, an interesting challenge

Manga Comics Market (MCM) is an Italian B2C and B2B e-commerce platform, operating in the field of publishing, more specifically in the world of comics and related articles.

With a user base of over than 20,000 people (2022), MCM is a well-known and appreciated reality in the Italian comics market.

The platform allows customers to buy articles from one of the largest comics offering in Italy, as well as it allows sellers to operate on its digital marketplace, digitalizing their physical shops.

Problem

A poor user experience: not exactly what this platform would deserves

The client (MCM) came up with several complaints from its users about a poor experience on the platform.
Indeed, they were aware of not succeeding in offering an appropriate browsing experience, and not making the most from the several and useful functionalities of their e-commerce.

process

An iterative process, based on Design Thinking Methodology

01 Discover

Stakeholder interview

The project started with the stakeholder interview: the goal was gaining insights and perspectives from the client regarding the current state and future direction of their comics e-commerce platform.

This phase led me both to better realize what my client’s expectations were and what were the challenges browsing the current website; I could also identify at this point already some potential opportunities and areas for growth.

Let’s see a few numbers in detail:

2 Stakeholders

20.000 Registered users

12 Months of activity

35.000 Items on catalogue

+25%

Target 2024-25

01 Discover

Market research

Once identified my client’s needs, I started performing a market research focused on comics industry in Italy, to gather information and insights about this particular niche, such as its size, demographics, trends, preferences and behaviours.

This approach helped me to provide data and insights that could support strategic decisions related to product development, marketing, advertising, and to target their customers, identifying opportunities and threats in the market.

KEY FINDINGS

Expenses for Comics purchases

47,3 Millions

+23,7% in 2022-21

Comics Sales growth (on trade channels)

+95% in 2021-20

+58% in 2022-21

Market share for copies

12,7%

Comic titles average assortment

5.500 pcs

(2021)

01 Discover

Competitive analysis

Gathering information about competitors, with the purpose of understanding their strengths, weaknesses, strategies and performance is absolutely important; this is the way to analyze design, features and functionalities of competing products or services in the same industry.

This research helped to identify best practices and potential areas of improvement, as well as understanding user expectations and preferences about this specific market.

KEY FINDINGS

Analyzing the competitor’s touchpoints quickly emerged that, given the large amount of products, typologies and genres in the specific niche of comics, a particular attention is paid to the organizational aspect of these products, to give users a high-value experience of consultation, and the opportunity to perform deep researches, being able to manage several search features in complete autonomy.

Some competitors can’t offer to users a coherent hierarchical and organizational structure that can avoid them a frustrating consultation experience.

Furthermore, a recurring information overload bring together different platforms, by wrongly using an important amount of visual contents and texts instead of offering level-structured menus; this approach can cause a disproportional cognitive load, getting users away from their goals.

01 Discover

Heuristic analysis

I decided to perform an heuristic analysis, based on Nielsen’s principles, before submitting a survey to their user base.
This was done previously to have a technical vision of the product and also to better understand the cues that surely would have been emerged from the survey. Of course this helped me at the same time to learn the platform and products in a deeeper way, without getting any kind of bias from users.

I took advantage of this step to also visual-map the AS-IS platform and flows.

KEY FINDINGS

84 Identified issues

Most impacted: Aestethic & minimalist design

Less impacted: Help & Documentation

01 Discover

Survey

A very important point of this research phase is taking into account that this platform, although being not very intuitive and completely lacking of a coherent information organization, has however reached 20,000 subscriptions in about 12 months.
For this reason I decided to deepen the research on the existing user base, sure that the necessary information to improve the platform were available among their registered users.

I submitted a 16 answers survey to the MCM existing customer base and, to however have a wider and more correct vision, to a comics online community members as well.

KEY FINDINGS

28,1% of users

have encountered problems browsing the website, of whom >

19,2%

found it hard to search products they’re looking for and >

14,6% of users

had generic issues to navigate, not due to technical problems

02 Define

Personas

Once the information is collected through the survey, I helped my client to better understand needs and preferences of their target customers, and design products and services that meet their needs more effectively by creating Personas.

I decided to deepen the research by crafting three different Personas, and it delivered excellent results; users are passionate, generally skilled about the product and the market; they complain a poor experience and difficulties to move on the platform, which is an obvious evidence of a not enough structured IA.

02 Define

Scenarios

After getting Personas by combining different tools during the research phase, I put them in some Scenarios to assume how they could interact with the product.
Scenarios are useful to explore and understand user needs and behaviours, and to identify potential pain points, opportunities, and design solutions.

02 Define

Empathy mapping

Almost at the end of this phase, I had all the information needed to create an Empathy map for the three Personas created.

By gathering and synthesizing data about users, I could create more effective and user-centered solutions that better meet the needs of the target audience.
In the end, Empathy maps are also useful for validating design decisions and communicating user insights to stakeholders.

02 Define

Problem statement and HMWs

The research phase was coming to an end and it was the right moment to take advantage of what emerged as tangible problems of MCM’s customers.

The combination of research insights, feedbacks, market trends, survey’s results and some stakeholder inputs highlighted both pain points and unmet needs, identifying problems that surely needed to be addressed.

I was able to state problems clearly; below, some statements I wrote to focus the effort on solving specific problems:

Problem statements

Users are encountering difficulties in finding specific comics on the website, which is causing frustration and potentially sales loss.

Users struggle to find product-related information on the website, leading them to search for it elsewhere.

Sellers find it difficult to use the platform’s features to create and enrich their online shops.

I then framed the statements into questions, to better inspire myself in the ideation phase going to start:

How Might We

How might we improve the navigation and search functionality on the website to make it easier for users to find and purchase specific comics, reducing frustration and potentially increasing sales?

How might we redesign the website’s information architecture and search functionality to empower users in easily locating and accessing product-related information, reducing the need for external searches and enhancing the overall user experience?

How might we simplify and enhance the platform’s features to empower sellers, making it easier for them to create and enrich their online shops, fostering a more intuitive and user-friendly experience for sellers on the platform?

The actual overview on user’s needs allowed me to jump to ideation phase with a clear idea of where and how taking actions.

03 Ideate

Information Architecture

When we talk about IA we have, in this project, to take into account one specific factor: the existing structure, paradoxically, met the requirement from a layout point of view, while we mostly needed to work on navigation and labelling that entailed a poor user experience. These cues clearly emerged during the research phase.

We took into account the main areas of IA, which are:

Organization – How you categorize and structure information
Labelling Systems – How you represent information
Navigation Systems – How users browse or move through information
Search Systems – How users look for information

Deeply working on Personas and Scenarios helped to identify the main goals of users, so it is now clear we need to:

Reduce cognitive load: Avoid giving too much information on a screen, with no clear pathway; It could create difficulties to focus. Too many options can lead to choice deferral where a user chooses not to make a decision at all.

Speed up the process of finding the right information: With the right organization, users are able to easily locate what they are looking for with clear navigation choices. It can keep users focused on the task they are trying to achieve.

Provide a coherent visual navigation path: Users always need to know how they are moving on the platform and where they are in a specific step of a flow.

Reduce frustration and contacting support: If a user clearly knows where to find what he needs, there is no need to request help.

Based on these evaluations, I identified menu structure, taxonomy and labeling as critical issues to deal with.

03 Ideate

Early Prototyping & Usability Test

It’s time to prototype.

I identified all the critical flows and translated them in mid-fidelity prototypes.

Designing flows is useful for two main reasons:

The approach works fine with stakeholders, because they are able to “touch” something similar to the final product.
The flows can be tested by users to understand if crafted solutions were in line with their mental models.

At this stage, performing a usability test (according to client’s budget and time) is consistent with an iterative approach (design-test-iterate) to validate the job done, before moving on creating all the components of the user interface.

KEY FINDINGS

A feature to contact sellers has been added in the product page.
The product card for listing pages has been lightened by removing some information, considered as not useful.
“Create a listing” feature has been iterated and improved.
Some elements have been reviewed to guarantee a better usability.

04 Prototype

Prototyping

Once got some cues by testing our low-fi prorotypes, and after a short period of iterating solutions, I moved on, taking prototypes to the next level, so by creating hi-fi deliverables.

Figma prototypes have been designed with the highest possible accuracy, to ensure that experience and interaction could be as close as possible to the reality during the final stage of testing.

04 Prototype

Design System

This is the moment to talk about the importance of a Design System, a collection of design guidelines, principles and reusable components that are used to create and maintain a consistent and cohesive user interface across a range of digital products and platforms.

Obviously, a design system is created at the beginning of the project and grows as the projects goes on, until becoming a complete set of standards and guidelines for typography, color, spacing, imagery, as well as pre-designed UI components like buttons, forms and navigation elements that can be used to build new interfaces quickly and efficiently.

The design system also includes documentation and other resources to support designers and developers in building and maintaining the product.

Indeed, ensuring consistency and coherence across products is a core topic for any digital project, as well as improving efficiency and reducing design and development time.

05 Evaluate

Usability Testing

I have to admit that being able of working on such a wide user base has been the strength of this project.

This allowed me to test twice (early prototypes and then high-fi designs) and validate the final outcome before the delivery to the development team; iterating tests is the key of a good result.

I asked users to perform some specific tasks on hi-fi prototypes; they were completely free to think aloud, a good way for me to gain additional insights of their way of thinking and to observe their first feelings in interacting with the new product.

I often prefer to perform test in person, because it gives the possible to also perceive physical action of an user, like behaviors and gestures.
I give users a goal, some context and, if needed, additionl information that could help to perform the task.

Below, some details about the testing session:

12 users

20 minutes each one

10 task to perform

For customers (B2C)

Find a specific product using the main menu
Search for a product applying specific filters
Add a product to cart
Perform a checkout process

For sellers (B2B)

Find a specific product using the main menu
Search for a product applying specific filters
Add a product to cart
Perform a checkout process

KEY FINDINGS

0 issues in complex flows

9 minor errors

4 cues for improvement

10 on 12 considered the experience beyond expectations

The tests generated very positive results, gathering cues and feedback useful to iterate and refine some proposed solutions.

The lack of significant flow problems confirms the importance of conducting prior testing on low-fidelity prototypes.

Process

What comes next

The redesign of Manga Comics Market has been completed and shared with the working group in early May ‘23; the development team has estimated 10 months to carry out the project.

The further two stages, not less important than the previous ones but outside the perimeter of design, will be:

Staging – The implementation will be evaluated, if it coherently respects the designs as created, and feedbacks will be provided.
Post-Launch – Analyzing data and monitoring the live product to identify future improvements and determine if the project goals have been achieved.

24 Ottobre 2022

CED | Civil Engineering Design

Client

CED | Civil Engineering Design

Project Date

2023-24

Category

1. UX/UI · 2. No code CMS

Industry

Engineering

NDA

No

My Role

Experience Designer

Responsibilities

Design Process Management

ToV & Brand consistency

Content writing

Policies compliance

Prototyping

Development (CMS)

Tools

Miro

Figma

Adobe Photoshop

Adobe Illustrator

Elementor

WordPress

CED | Civil Engineering Design is a civil engineering company, providing services for private customers, companies and public administrations.

Challenge

Online since 2016, the company website needed to be refreshed in terms of tone of voice, visuals and brand consistency, to offer a more modern interaction between customers and company.

Process

Based on the needs, the work started by identifying how the brand evolved in the last 8 years, from the viewpoints of how its market has grown, the way its customer usually interacted with, the tone of voice used to speak with potential leads.

Once identified an appropriate template structure, I wrote dedicated contents for the four sections of the website, keeping ToV consistent with new visual choices and images.

Also cookie and privacy policies have been refined to be compliant to new standards.

The main intent has been to give more freshness to the message and, by using a variety of micro interactions, to offer a smooth and pleasant interface.

After few rounds of iterations of prototyping, the final structure came to life, satisfying all the expectations in terms of information, user experience, correct visualization on different breakpoints.

Once evalueted by stakeholder and tested by a pool of users, the website has been refined and went live on January 1, 2024.

Outcome

The result will be to offer a smooth navigation and a pleasant and modern product, through a clear and intuitive user experience and a ToV appropriate to different kinds of customers, as privates, companies or public administrations.

Interested in further discuss this project?

Drop me an email at hello@alessiobocchino.cloud

Sisal.es – Cashout

Client

Sisal Group

Project Date

2020

Category

Industry

Gaming

NDA

Yes

My Role

Sr UX/UI Designer

Responsibilities

Design Process Management

Prototyping

Usability

User Interface Design

Agile Collaboration

UAT

Tools

Sketch

Invision DSM

Invision

Jira

Cash Out is a new feature by Sisal, that lets users decide when to cash out their winnings, without waiting for the end of all the matches on their tickets, receiving a recalculated amount depending on the odds.

Challenge

I was commissioned to work on the inclusion of this functionality, within the interface of the game ticket, preserving its usability, readability and safeguarding the linearity of user flows, making the function consistent with the context.

In addition, special attention was due to the legal aspects of the function (at that time, Cashout feature was designed and developed only for the Spanish market, given the regulatory restrictions imposed on the Italian market, which has adapted only later, by Decree-Law 145 of 1 August 2022, entered into force on 22 October 2022).

Process

Based on the functional analysis provided, I analyzed the pre-existing context in terms of use and interface elements, to create a user experience as agile as possible.

I created interface elements consistent with the design system in use, also integrating additional existing elements

Issues related to accessibility, mobile usability and legal regulations were explored.

The processes were shared with the work team (Product owner and development team) at recurring intervals, to be validated and tested in the pre-development phase.

Once designs were completed (the feature required, for its completeness, more than 150 artboards for Desktop, Tablet and Mobile breakpoints) we created related stories on Jira, each one provied by their interactive prototypes.

Finally, support was given during the UAT phase to ensure completeness and correctness of the work before the final release.

Outcome

The Cashout feature allows users to decide whether to enjoy an additional possibility of finalization, which makes it a particularly appreciated tool in the betting market.

The company has its return in practical terms, being able to align with foreign operators that could already offer same functionality.

Interested in further discuss this project?

Drop me an email at hello@alessiobocchino.cloud

FridayPeople.it

Client

Friday

Project Date

2022

Category

1. UX/UI · 2. No code CMS

For this customer I started implementing a CX strategy, starting from the research stage, identifying a tone of voice appropriate to the target audience, personas and scenarios, conveying a message in a different way by competitors and comparable, with a deep employee-centric approach.

Online touchpoints have been designed (company website and LinkedIn page), as well as several offline materials, to be part of the welcome kit for new employees.

Tools: Miro, Figma, Adobe Photoshop, Adobe Illustrator, WordPress

PickUApp

PickUApp – A smart carpooling app

Client

Personal project

Project Date

2018

Category

Sisal.it

Sisal.it – UX/UI Responsive Design

Client

Sisal Group

Project Date

2020-21

Category

As Senior UX/UI designer, I worked on full responsive upgrading of the entire platform, as well as on designing experience and interface of many features related to the website Sisal.it.

I performed expert analysis, crowd testing, mapping, A/B test, UAT and target selections for user tests.

Some projects I worked on: features related to ticket (details optimization in worst cases, sticky command, filters, My Bets) Form on Demand, Instant Games, icon sets, improvements to physical device interfaces (SelfyDuo, Loyalty Light etc), Virtual Games, porting functions from full responsive to app; all these projects involved the continuous updating of the design system.

All the above listed projects have been managed in agile mode, closely collaborating with product, marketing, content and development teams, as well as external providers.

Tools: Miro, Sketch, Invision DSM, Invision, Figma, Jira

Italgas

Italgas – Knowledge Base

Client

Italgas

Project Date

2022

Category