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
.png)
User persona: Jannik
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.
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.
.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.
.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.
.jpg)
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