More

NNG Website Case Study

NNG makes mobility simple with next-generation location-based solutions.

The Problem

Our client NNG specializes in navigation engineering services. They faced a challenge in effectively showcasing their expertise, product portfolio and attracting and educating potential customers through their existing website.

The website’s design needed a facelift, the narrative seemed hard to follow, and the navigation structure didn’t represent the evolution of the product realistically and thus became illogical.

Our objective was to revamp the website, creating a user-friendly and visually engaging platform highlighting NNG’s expertise in navigation engineering while refreshing its online visual presence.

NNG found the CMS/backend hard to edit and to add new content, so in order to solve this issue we also needed to provide a smooth and collaborative content management system as the backbone of the project.

No items found.

What We Did

Our process began with in-depth research and analysis to understand the client's industry, target audience, and unique value proposition. Through collaborative workshops with stakeholders from all departments, we gained insights into their services, goals, and desired user interactions. During this stage, we aimed to bring different organizational participants (product, marketing, sales, HR, etc.) and stakeholders together - so that they can define their vision and the mission of the website together.

With a joint buy-in in our pocket, we shifted focus to the website's interface and information architecture to streamline the optimal user journeys. We developed a brand-new visual concept granting NNG a fresh and unique look and feel that they could relate to while being distinguishable from their competitors. Clear and concise messaging was implemented, emphasizing NNG’s unique capabilities and product offerings.

Based on gathered data, we’ve designed a mobile-first website while aiming for responsiveness, enabling users to access the content seamlessly across various devices and screen sizes.

On top of these, we also added light/darkmode support for optimal viewing experiences depending on the users’preference.

Not only was the front-end rebuilt, but we’ve implemented a brand new, easy-to-use CMS to ensure future editing of subpagesand even the creation of new pages by the user. We also prepared anarchitecture for multi-language content editing for the future.

Services

Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance

Results

The new visual direction was a huge success with NNG stakeholders, our 3D animation was used not only on the website butfor different communication materials as well.

We’ve managed to reduce the number of navigation elements by almost 50% while focusing on the new narrative so that visitors could find the content more easily which resulted in increased engagement.

Multiple content editors from different regions and time zones are using our CMS solution in parallel with great success.

No items found.
No items found.
NNG Website Case Study
No items found.
No items found.
No items found.

Clients Quote

Services we provided

Research
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
UX Design
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
Branding
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
UI Design
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
Content Production
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance
Development
Stakeholder Interviews
Competitor Analysis
Ideation Workshops
Moodboard
Content Planning
Concept Development
Storyboarding
Animation
3D Modeling & Rendering
Customer/User Journey
Information Architecture
Sketching
Wireframing
Look & Feel
UI Design
Design System
High Fidelity Prototyping
Specification
Development
Testing
Acceptance and Deploying
Support and Maintenance

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Project contributors

Stereogram Team

András Pop
Founder, Design Lead
Csilla Varga
UX Designer, Project Manager
Bence Vitárius
UI/UX Desinger
Miklós Kádas
UI/UX Designer
Roland Nagy
Junior UX Designer
Balogh Dániel
Project Manager / Coordinator
Verba Gergely
Project Lead
Pataki Gergely
Head of Marketing

Client Side

András Pop
Founder, Design Lead
Csilla Varga
UX Designer, Project Manager
Bence Vitárius
UI/UX Desinger
Miklós Kádas
UI/UX Designer
Roland Nagy
Junior UX Designer
Balogh Dániel
Project Manager / Coordinator
Verba Gergely
Project Lead
Pataki Gergely
Head of Marketing

Take a look at the finished product

You may also like these
Kinepict Website

Revolutionizing x-ray angiography and making it safer for patients and medical staff

Hajógyár

Connect the Hungarian pop-culture scene from the underground all the way up to the mainstream.

Let’s build something together

If you have a project in mind, we would be happy to have a chat about how we can help.

Book a 30 minute time slot to meet with us virtually and talk about the potential project.

András Pop
Founder, Design Lead
+36 30 528 7599
andras@studiostereogram.com