Pine

Case Study: Delivering a Fully-Fledged Website for Highlights of Hungary

Read about how we helped Highlights of Hungary design and develop their brand new online digital solution.

The Client

Highlights of Hungary is a non-profit organisation that aims to recognise and widely disseminate the best Hungarian creative achievements every year, along with the values ​​of excellence, patriotism and acting local patriotism, and to organise a community around their creators and shapers. They have a website which is the primary vehicle they use to showcase all candidates, achievements and past winners.


Project Goals

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

  • Specification of all the user flows 
  • Information architecture and navigation
  • Design Concept
  • Visualisation of all the user flows 
  • Pixel perfect design for all screen sizes
  • Implementation of website

Team Allocated for the project

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 picture-perfect designs and any other visuals that were required.

Developer 

The coding expert that brought it all together and translated the designs into fully-fledged, interactive web pages that effectively constitute Highlights of Hungary’s website.


STEP-BY-STEP 

Kick-off Workshop

The starting point was a kick-off workshop that defined the project’s scope and aligned all stakeholders’ interests. The workshop helped set clear goals and expectations for the rest of the design process and narrowed the deliverables into tangible assets.

Design Concept

To give a sense of Pine’s direction in the design, we shared a visual concept of what we would like the final product to look like. The idea of this was to help approximate design, outline the primary colours, fonts and styles used. After client approval, we moved into the UX phase.

Research

The design concept gave us a good idea of what we were working towards. Our lead UX Designer in this project carried out vital research to pinpoint the navigation and the information architecture on the site. This research inspired and gave us an insight into what similar companies usually do, which we used to create something unique and customised that would help Highlights of Hungary stand out.

Wireframes

After the initial discussions and setting the general style guide through the visual concept, it was time to jump into wire-framing. Our lead UX Designer worked on designing and perfecting all screens’ wireframes for fast and efficient delivery. Notice how the UX Designer defined the custom grid in which the candidates’ images would appear. You can see below the wireframes and their transition to the completed UI design.

UI Design

Usually, the phase when the client goes “wow!”. When all the colours, fonts and visual elements come into play and give life to the ordinary and unexciting 2D wireframes. Although UX can, in many cases, require more effort – it is only when the UI kicks in that most clients start to understand precisely how nicely everything works.

Interestingly, after a couple of weeks of having the website live and looking at the analytics, we realised that the client’s main conversion metrics could be higher. We decided to redesign the landing page to enable this, with the change ultimately proving to be very effective.

Implementation

After a few rounds of iterations and modifications during both the UX and the project’s UI phases, all of Pine’s work was finally approved by the client, remaining well within the project’s timeline. The final step of the process was to create a list of specifications and handover the project to the development team for implementation. Implementation was carried out smoothly, without any delays, and up to standard.


Conclusion

The project’s delivery was done within the estimated time, which is always a good indication of efficient workflows within a design agency. The client was left satisfied with the output and moved on to carry implementation in the month after handover. The site quickly launched, and the first visitors started landing on it. 

Once again, it became clear that the more involved the client is, the more optimal the final output will be. Pine would not be in a position to test with 1,000 users + in a week alone. Still, by publishing the website and tapping into their analytics, the client offered very actionable insights that Pine translated into new designs. This iterative process ultimately leads to the delivery of pixel perfect designs and implementations.

Costis L.

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