Website UI & UX re-design
My role: the whole re-design process
1. SUMMARY
The Working Group on Parrot protection is an Austrian non-profit company. The work that they do is concerned with the protection of parrots and the improved keeping conditions for parrots in human care. They provide phone consulting, a free email newsletter, recommendations from specialized veterinarians. For members they offer dating agency for parrots, parrot news via post, holiday care for parrots and parakeets and parrot mediation. It looks like the Working Group on Parrot protection has a monopoly situation in Austria, as this is the only organization that is offering this kind of service.
Used tools
UX design
Surveys, User research, User personas, Competitive analysis, User stories, User flows.
UI design
Wireframes, Hi-Fi mockups, Design mockups, Preference test, Usability test, Interface prototype.
Branding
Mood board,
Color palette,
Typography,
Style guide.
2. Challenge
The Working Group on Parrot protection lives from donations and sponsorships. It is very important to have a good website because the first impression is determinative. The organization starts already from one disadvantage: not many people have an interest in birds in general. The majority of people still have more connection to a dog or to a cat. To raise more attention the organization needs to have a better promotion. The sponsorship of the big companies is one of the main financial sources and to get this the company has to look serious. The first and most important step should be to change the whole UI and the UX design of the website, then make it look good on a mobile device as well.
3. solution
The Working Group on Parrot Protection solves two crucial problems for both sides – animals and humans.
Animal:Â they provide better habitat for the parrots and parakeets which were kept previously as pets. Parrots are extremely socially monogamous birds. As wild animals, they can rarely get used to living a life without their species. The human substitute partner can never really replace a fellow species, even if the bird becomes trusting and imitate the human language. The organization provides partners for these birds and an environment where they can keep their mental and physical health.
Humans:Â The organization provides information for bird lovers; what does it mean to have a parrot as a pet at home. The ones who would like to adopt a parrot can have a trial day with the animal caretaker in the institute and see if they can handle the amount of work that a pair needs. They explain why is it better for parrots in the wild, in their habitat and basically why those beautiful animals are not meant to held as pets alone.Â
4. Design process
01. Discovery
02. User research
03. Information Architecture
04. Visual design
05. Development
01. Discovery
Austria is a small, wealthy country. The times are already passed by when parrot pets were trendy in the households. Nowadays people pay more attention to the wellbeing of animals. However we should not forget that a parrot lives much longer than a dog. The average age for a parrot is 60 years. Most parrot owners bought them when they were in their 30s and the birds overlived their owners or the owners got too old to take care of them. So they ended up at the organization. This is the only organization that provides that kind of service in Austria.
02. User research
Surveys & User research
A user survey was conducted to collect information and data points about user’s needs and factors that influence their decision. I wrote the questions in German, I was expecting more responses if I contact the users in their native language. It gave me metrics about the engagements of members about parrot protection in Vienna, how much do they get involved with the organization and how often they donate. Furthermore how often do they check the website about new events and if there is any kind of service given by the organization that they miss. It helped me identify my potential users and their level of understanding with technology, pain points & frustrations, needs and wants. The User Survey pointed out some key characteristics of how engaged people are with this organization. I received 4 responses from 25.
Summery & analysis of responses
How often Do you Visit the Website?
How did you hear about Working Group on Parrot Protection?
How do you support the organization?
How often do you donate at this organization?
Where do you inform yourself about news at the organization?
Does the website need improvement?
User personas
Based on the survey respondents and after identifying my potential users, I interviewed few of them to know more about their connection to the organization; is there something what they miss from the service in particular, what considerations they make, what inspires them to choose to help parrots, and if they are willing to suggest improvements for the non-profit organization. I clubbed similar users into one bucket and created three unique user personas to summarize their goals, needs and their frustrations regarding parrot protection in Vienna.
“ I think the organization offers great service but the website needs improvement. I get the news from Facebook because the web is not that up to date in my opinion “
Â
Katharina lives in Vienna and she is a real bird lover. Her job as a Marketing Manager is flexible, she can work 2 times per week from home. She is divorced and has a 10-year-old daughter. She also shares her home with 2 budgies and takes a sponsorship for Elvis who is a 50 years old Ara parrot. “
I want to make Elvis’s remaining time good. I would love to travel to Brazil and see his kind in the wild.
It would be nice to have more events at the organization with the parrots.
” It is an amazing work that they do at this organization. I am so happy that I could be part of this team in my internship. “
Peggy studies at the Veterinarian University in Vienna and she will finish her studies in a year. She finds exotic animals very interesting from the professional point of view. She donates monthly to the Working Group of Parrot protection and she has a sponsorship over a cockatoo pair, Coco and Lucia. She got to know about the organization via friends. She likes to hang out in hip bars and cafes in her free time with her friends.
I want to learn about diseases and sicknesses that occur at exotic animals. Exotic animals are super interesting in my opinion.
More international projects would be great. I find some when I visited the website, but they were all outdated.
“It is great that there exists such an organization. I was not aware that so many big parrots were kept in Austria as pets”
Gerhard works in IT, he is a software developer. He is an entrepreneur and works most of the time from home. He is married and has 2 children and a dog. Gerhard loves to spend time in nature with his family. He got to know about the organization through a friend who owns 2 parrots.
I like to donate. I wish to do something for a good cause. Those birds are truly special and I would provide for a pair a home if I would have more space.
Not many people are aware of that organization. Most of us get to know it through a friend who loves parrots or who is a parrot owner. Better marketing and a more serious website could reach out to more people.
Competitive analysis
As I mentioned already above there are no other non-profit companies focused on parrot protection in Austria. However many other non-profit companies compete for donations and support worldwide. In my research I focused only on the organizations that specialized in parrot protection and I realized we can talk here about 2 main groups:
1. the ones who work on wildlife conservation. Big companies sponsor their activity but they also depend on donations.Â
2. is the ones that work more or less like an animal shelter. They take in poorly treated parrots and they also offer a wide range of services for their members. They depend more on donations or adoptions. The Working Group of Parrot Protection falls into the 2nd group.
03. Information Architecture
User Stories
USER STORY
- I would like to know about the services
- I would like to know about the mission of the organization
REASON
- It might helps in my issue
- Decision of donations
USER STORY
- I would like to know about the events
- I would like to know about news
REASON
- I would like to be part of the community
- I find it interesting
USER STORY
- I want to know about the parrots
- How can I help
REASON
- If I invest I want to see the result
- I want to do something meaningful
User flows & Site map
User Flows are flowchart diagrams that explain the different processes involved in accomplishing a task from your MVPÂ (Minimum Viable Product). It lays out steps & actions in a particular order and sequence that the user needs to undertake to get to the end of the task.
The page function is mainly providing information about the parrots and services.
Several user-flows explain how other tasks are to be done. Besides, the sitemap explains the skeleton on what the site is built upon.
Site map & user flows
Wireframes & Hi-Fi mockups
To create the wireframes I used the Balsamic cloud tool.
As the original website looks very messy my goal is to organize the content in clear structures so the user can easily find the searched information.
04. Visual design
Design mockups
I did some changes to the visual design compared to the wireframes. As I focused more on the functional features at the wireframe design, I had to modify a few design features at the visual representation.
Preference test
I conducted a few preference tests via Usability Hub to determine what design style regarding certain UI components was the most preferred one. The first design was preferred by some, I received most of the likes on the second design. A couple of examples down here.
MooDboards
I tried to capture the feeling of an exotic nature in my mood boards. I used vibrant colors and strong contrasts. The base color is dark green. I choose a darker color because the trend in 2020 will be dark mode, but I still wanted to stick with green because for me it is representing nature. I wanted to make sure that when the user is looking at the website, knows immediately whats the purpose of it and what kind of animals are we talking about here. That is the reason why I chose a parrot picture for the home page.
Moodboard
Logo & content
I reused the logo and the content from the original website. The illustrates two flying african gray parrots. I find the logo nice and fitting to the content. My goal was to make the website more user friendly and to create a more appealing design. From the user research I know that the users are happy with the service and would not change it. I restructured a bit the content and took out some outdated services. Some other services like the online shop or emergency ticket I redesigned. I hope in the future the organization will launge them again. Especially the online shop. I find it very convinient for the users to support the birds from their home.
Color palette
The visual consistency of a website’s UI design will depend almost entirely on the color scheme and the colors combinations you choose, which is why navigation menus are usually light, the same as the background which contains all essential elements for users to see and understand. I combined a bright (a bit transparent) background on top of the dark one to make the contrast more sharp and dramatic, so even color blind people to make out the images and text used on the website.
The primary color palette is made up of darker green color so it will make a contrast with the pictures and with the content. The secondary color palette consists a mix of colors each one suiting a specific purpose in the context.
Logo Colors
Primary colors
TypograpHy
I use just one typeface for Working Group of Parrot protection website, namely Tahoma. I chose this one because I find it very elegant, modern and light.
Tahoma is one of Microsoft’s new sans serif typeface families. It consists of two Windows TrueType fonts (regular and bold). While similar to Veranda, Tahoma has a narrower body, smaller counters, much tighter letter spacing, and a more complete Unicode character set.
Since the Tahomas are TrueType fonts, they can be rotated and scaled to any size, and anti-aliased by the rasterizer built into Microsoft Windows 95 and
Microsoft Windows NT 4.0. These features give the fonts significant advantages over bitmap system fonts such as MS Sans Serif.
Designed by world renowned type designer Matthew Carter, and hand-instructed by leading hinting expert, Monotype’s Tom Rickner, Tahoma sets new standards in system font design. It is ideal for use in User Interface Scenarios and other situations requiring the presentation of information on the screen.
05. Development
Prototype & user testing
The final stage was to develop an Interactive prototype of the service.
Since the whole prototype contained a lot of screens and there were so many important tasks a user could perform within the service, I developed 5 tests in the Usability Hub where the user is given a script to complete a particular task.
Analysis:
Webpage Design feedback:
- Upvote: Very nice and easy to use.
- Downvote: I was missing some videos and more information about news
Parrot introduction:
- Upvote: Nice design and nicely organized all the information about t he birds.
- Downvote: The cards are a bit small, would be nice to be able to click on them and make them bigger on the screen.
Donate, adopt, sponsor:
Upvote: makes it easy to adopt or sponsor a choosen parrot. The process is fast and easy.
- Downvote: If you could add more information to become a member than it would have been enough one click to exectute the action (no need to fill out an additional form).
Services:
- Upvote: The buttons are styish, its nice transparent design.
- Downvote: I would have liked more if all the content is on one page and if you click on the button it jumps to that particular content (or I can just simply scroll down).
Usability Hub Test:
- Upvote: it was easy and fun to do the tasks.
- Downvote: some of the tests were a too complex
5. Conclusion
This was my first UX/UI project that I have done all by myself for a customer. I have spent 4 months working on this project starting from brainstorming to deploying the interactive prototype and finally making an account of each process in this case study. During the user research we could see that the service is satisfied with the users and would not change it. The goal was to create a visually more appealing website. I would like to show you the original website so you can see better the changes I have done.
http://www.papageienschutz.org
I am confident that the design solution I have developed can solve the problem that users are facing with the existing website.
Some lessons I’ve learnt through the project:
- If you’re having a tough time getting people to complete your surveys, try offering incentives to boost your completion rates. Its important to express your genuine appreciation for their participation.
- Adding extra features is always tempting but this can burn your time and energy and it can lead to a never ending project. Stick to the MVP goals throughout the project phase
- Don’t skip the part of sketching wireframes on a paper as the first step. It is a very good way of brainstorming and it is less likely that you have to rearrange your design functionality created in a design tool.
- Take into consideration different screen sizes and design accordingly.
I hope the implementation of my design solution will boost the motivation of the people to decide to help in any way for the parrots in Austria!
