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.
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
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.
Accountable for the wireframes, helping the researcher’s work and keeping a clear communication between the departments.
Responsible for the creation and delivery of all the assets, the pixel-perfect designs, and any other visuals that were required.
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.
The web developer was handed the technical specifications of the design and they were responsible for delivering the final product, launching it online.
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.
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.
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.
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.
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.
Here is the list of some useful resources that helped us deliver this project:
Project management: Asana
UX & UI: Adobe XD
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.