top of page
Black_White_Simple_Website_Coming_Soon_Instagram_Post__1_-removebg-preview.png

Sea-eye
Web and mobile redesign

A redesigned Sea-Eye Participate website section with a refreshed design. 

Overview

Sea-eye is an association for the rescue of fleeing people in the central Mediterranean.

Challenge

During the UX-Design course I choose to redesign the aspect of the webpage of a charity I support.

Solution

I decided to redesign the "Participate" section of Sea-eye.org, to give it a more organized and linear design, and also I tried to add some new features to give the website a modern aspect.

Role

Role: UX Designer

Timeline: aug23-oct23

Tool

Adobe XD

Approach

Users interviews

Competitive and comparative analysis

Usability tests

Results

A refreshed website without the accessibility problems it had before.

User research

I conducted some research to fully understand the target users of the client. After that, I grouped them in two user personas to point out their needs and the pain points they have while using a charity website.  In particular I focused on the "Join us" process, considering that on the Sea-Eye website the navigation has been defined by users a little confusing. I realized a competitor analysis to understand their strenght and their weakness about their presence on the web.

User Persona:
Laura

_Yellow Professional Gradient User Persona Company Presentation (1).png

User persona: Jannik

_Yellow Professional Gradient User Persona Company Presentation.jpg

Usability study: findings

  • Most of users don't like the language setting.

  • Part of users feel confused about the onshore page. They found it too full of information.

  • A part of users want to see more images or videos to know about the charity more in-depth.

I conducted a moderated usability study with 6 people: 3 females and 2males from 25 to 35 years directly on the main website. The main findings are:

Starting the design

Ideation

I started off with some sketches to understand how the various components may be disposed across various screens. 

1696325188092.jpg
1696325188076.jpg
1696325188099.jpg
1696325188084.jpg
1696325188103.jpg
1696325188111.jpg

Digital wireframes

Using Adobe XD I started to develop low-fidelity wireframes, designing for smartphone and tablet as well. 

CLICK TO FULL SCREEN

Final Design

The hoverable buttons chosen on the header didn't pass the color contrast checker. I modify them with a design in which they are only underlined, improving the accessibility. Moreover, a language bar has been added. 

I also modified the general aspect of the main section, inserting videos instead of photos to draw the attention of the users.

 

Presentazione senza titolo (6).jpg

An interactive image has been added on the offshore page to show the ship roles, instead of another collapsible menu.

The footer has been minimized, inserting social media icons.

Presentazione senza titolo (7).jpg

An interactive image has been added on the onshore page to show the local groups, giving the user the opportunity to immediately visualize in which state they can be found  instead of many images.

The contact person section has been enlarged and centered.

Presentazione senza titolo (8).jpg
Screenshot 2023-10-03 123048.png

High-fidelity Prototype

What I learned

My primary goal was to streamline the participate section of Sea-Eye.org, maintaining the essence of the existing website. The inclusion of videos will allow users to better understand the purpose of the onshore and offshore crew.  

I developed a design strategy that focused on giving the website a better usability, considering the changes I made about the language bar, the header and the footer.  

Thank you for visiting my portfolio!

Let's connect

Feel free to give me your feedback or to contact me to get in touch.


Email: tomarchiosimone@gmail.com

bottom of page