Brand design, User Experience, User Interface
#ngo
#womensright
#genderequality
#war
Lygiai
Lygiai is a Lithuanian non-governmental organisation whose main areas of activity are the dissemination of science-based information, issues of gender equality, tolerance, and the prevention of violence and coercion.
Throughout the war in Ukraine, the association "Lygiai" has gathered support and is providing comprehensive assistance to women and girls who have experienced sexual violence in Ukraine.
The website is an essential window to discovering their activities and projects; offering different ways to support their causes and delivering assistance. Crucially, the former website was made in a hurry and without a specific focus on usability, which is why the redesign has been, after one year of activity, so significant.
Role:
Brand designer, User Experience & User Interface designer
The Website design has been developed by the internal IT team of Lygiai on Zyro.com.
Scenario
After one year of activity, the NGO Lygiai contacted me for the redesign of their website. I've also proposed a full rebranding together with a new User Experience design,
Rebranding
As it stands, Lygiai doesn't have any brand guidelines. Fortunately, the organisation is growing, and by implementing new branding followed by a proper brand guideline we can help it become more recognizable and expand its possibilities.
I've worked closely with the team and learned from their experiences to find the values the organisation embraces and define the perfect tone for the brand in different circumstances.
Before proceeding with the logo design, I analysed the pain and opportunity I found in the previous logo with an emphasis on creating a new logo that would fix the old problems.
New logo
I've insisted on creating a flexible and characteristic brand mark, usable in different situations and customizable with the colours of the nation Lygiai is acting in.
Colors
The palette colour is close to the one used in the previous branding to ensure that the old users will not feel disoriented and can seamlessly transition into the new brand. However, I have slightly adjusted the colours for better readability on the user interface.
Icons
To a preexistent set of icons, I've attached some new illustrations useful for dealing with themes often censored by social media during women's periods.
Typography
Lygiai utilises different kinds of communication, some more institutional and some more provocative (especially on social media). This is why I've proposed two different typefaces, complimentary to the brand’s dual approach.
We have implemented the Work Sans family for the website and official institutional communication, whereas we’re using a more casual and friendly Monotalic to entertain people on social media and attract their attention with unusual letters.
Guidelines
Together with the branding, I've added photographic guidelines for the brand. Not only indicating how photographic content should be treated but also how the photo should interact and blend with the logo and brand mark.
U.X. (User Experience)
Previous website
The previous website was essentially graphic-less with only a sequence of pages and text. Accordingly, I've proceeded with a professional heuristic analysis to highlight all the problems present in this user interface and arrived at 4 hypotheses validated by a survey and thorough usability test.
1- With a more characteristic design, we can increase the memorability of the brand.
2 - By distinguishing between sections we can help the user navigate the site.
3- We can take action to increase the conversion rate of donations and form completion.
4-By effectively displaying different information we can increase the perceived trust of the brand.
Users
Our users are primarily young Lithuanian women. However,as an international NGO operating around Europe, our secondary users will vary., Subsequently, I've created three user personas that could identify them and be used as the base to build the user journey.
The current user journey has big problems when it comes to navigation and the brand's memorability.
I've taken this opportunity to change the architectural information of the website, and after the restyling, I've designed a new User Journey for two of our personas.
U.I. (User Interface)
I've started the User interface design process by elaborating on a low-quality wireframe to help me identify priorities and disseminate information. This now shows an understanding of how and where we need to present these factors on the main page.
Following this, I’ve established the basis for the typographic, light basic design system. There are slight differences between the mobile and web scales regarding typography.
The following step has been to draw a high-quality wireframe of the page to test the usability and navigation between the pages, being sure that the calls to action were always clear and visible.
U.I.
Final design
desktop
U.I. (User Interface)
I've also utilised a vivid colour scheme to create a rhythm and differentiate the various sections.
The final design and prototype has a modern look without looking too fancy or insincere, with clear graphic guides to assist the user in navigation.
U.I.
Final design
mobile
Mobile navigation has also been optimised, offering a full search experience which competes with well established websites in the same sector.
U.I.
Prototype
desktop
U.I.
Prototype
mobile
Further Development and Next Steps
I recommend conducting three different tests to evaluate different parameters of the site and compare the new design with the old one:
Tree testing -To evaluate the ability to find all the relevant information on the new website in the expected places.We should especially focus on Lygiai in the media, Data for reference, and Psychological support.
Usability test - To evaluate if users are running into problems, specifically when it comes to donating or completing forms.
Focus group + Survey - Presenting both versions of the website and letting the users compile a format with two outputs: appreciation of the website and levels of trust.
As a NGO, currently, there is an extremely limited budget for this kind of test, but hopefully, with the further expansion of the organisation, we’ll see more development in the near future.
Conclusions
As a
male designer, this journey into the universe of female rights and women-related issues within the scope of the Ukrainian war has been a formative and humbling experience. First I had to confront my own personal sensibilities,, then reshape my design skills in a way that does the organisation and its goals justice.
I have also had to deal with a no-code low-budget environment, but been resolute in delivering a final design which does not compromise.
Most importantly, the client has been extremely enthusiastic about the proposal and has immediately set about implementing it at
lygiai.org
