Pine
Pine blog cover e1613648836607

Website Design & Implementation for a wildlife conservation foundation: Artemis case study

Read about how we organised, scoped, delivered and implemented a fully fledged website design for Artemis.

THE CLIENT

Artemis is a foundation that was established for the purpose of conserving wildlife and managing natural ecosystems and habitats.  The Foundation’s aim is to make scientific and educational writings, news, events and opportunities available to professionals and university students in the field of wildlife management, raising awareness around such topics and educating people to act responsibly and respectfully towards nature. To do so, they got in touch with Pine to help them with the website design and implementation.

artemis mockups

PROJECT GOALS

The goal of this project was to create an end-to-end design of their main website and implementation thereof. The website will act as their main channel of communication of all their conservation efforts and activities. More specifically, Pine was assigned with the following tasks: 

  • Specification of all the user flows 
  • Information architecture and navigation
  • Visualization of all the user flows 
  • Pixel perfect design for all screen sizes
  • Copywriting (in Hungarian & English)
  • Handover of the final designs to the development team
  • Implementation on WordPress
  • Final Delivery and client Training

ALLOCATED TEAM

Design Consultant 

Effectively acting as a project manager, the design consultant bridged the communication between the client and Pine’s internal team, always making sure to align the interests of all stakeholders involved in the process. 

UX Designer

Accountable for the wireframes, helping the researcher’s work and keeping a clear communication between the departments.

UI Designer 

Responsible for the creation and delivery of all the assets, the pixel-perfect designs, and any other visuals that were required.

UX Copywriter

For the particular project, Pine was asked to create the copy for the text on the website, both in English and Hungarian. Our in-house content team handled this, allocating a UX copywriter that is fluent in both languages to take care of this.  

Web Developer

The web developer was handed the technical specifications of the design and they were responsible for delivering the final product, launching it online. 

STEP-BY-STEP 

Kick-off Workshop

As always, the kick-off workshop was an integral part of this project. It is the official initiation of any project and, at Pine, we give a lot of importance to this step. It is where we hold hands with the customer and look at the whole business holistically. It is the point at which knowledge is shared between the two parties, Artemis sharing their future vision that they want to see communicated through their digital front, and Pine guiding the way by asking the right questions and focusing on the moments that matter. 

Research

Our lead UX Designer in this project carried out important research to pinpoint the navigation and the information architecture on the site, as well as to segment the different types of content, which was one of the challenges that we faced. This research provided inspiration and also gave us an insight into what similar companies usually do, which gave us an edge in designing something unique and customized for Artemis. 

Wireframes

Screenshot 2021 02 16 at 13.41.57Screenshot 2021 02 16 at 13.36.30
wireframes vs website desktop design

After sharing some of our research findings with the client and getting their feedback, we went back to the whiteboard and started ideating. We established some basic components of the website and what they would include and then dove deeper into the content, the way to differentiate it, and where to show it. 

UI Design

This is the exciting part of the design phase, especially for the clients! It is when all the fonts, styles, shapes, and colours come into effect, giving life to the wireframes, which otherwise may look pretty dull and uninviting. The challenging part of this step in the case of Artemis was that the branding had not been finalised yet. We had an idea of what colours to work with more or less, but still, this was subject to modifications.

For time-saving purposes, the client decided to proceed with the design and iterate accordingly as the branding progressively molded into its final version. So after the first version of the design was completed, we went back to the artboards and iterated it based on the new brand that was finalized mid-way through the design phase. 

Implementation

After a few rounds of iterations and modifications during both the UX and the UI phases of the project, all of Pine’s work was finally approved by the client, for all types of screens (desktop, tablet & mobile). The final step of the process was to create a list of functional specifications and handover the project to the development team for implementation. The website was built on WordPress using Elementor, and it was carried out smoothly with no major delays. 

RESOURCES

Here is the list of some useful resources that helped us deliver this project: 

Project management: Asana

Workshop: Jamboard

UX & UI: Adobe XD

Implementation: WordPress / Elementor Pro

CONCLUSION

This project was ongoing for a few months, as there were several aspects that stifled its development. Due to the lack of branding when the project kicked-off, it was hard to establish an identity in the designs at first. This led to an increased number of revisions and iterations, but ultimately, like any successful project, the client’s expectations were exceeded when the final version was delivered. 

Read more case studies from Pine

Costis L.

As a co-founder of Pine and a curious and passionate design-thinker, I always use my current knowledge to create new things. For instance, I learnt that tomato is actually a fruit, so I risked it all and used it in a fruit salad. It worked.

Add comment