thumbnail_JT.png

JT.png

## How Rhapsody created an international web and e-commerce solution for an iconic car brand

**Launching a new version of an iconic product invariably presents major challenges for a brand. Will the latest version gain as much traction as the original? To what extent will its design and functions change? What visual tools should be used to showcase the new product while staying true to the brand’s DNA? How do you successfully market it to a new generation of consumers? With this in mind, we re-designed the MOKE website for the launch of their electric version of the iconic vehicle.**

## The MOKE car – the story of an iconic beach buggy in brief
Back in the late 1950s, when Sir Alec Issigonis designed a low-weight all-terrain vehicle for the British Army, no one suspected that this was the birth of one of the most iconic car brands. Over 60 years later, MOKE remains the vehicle of choice across luxury resorts worldwide and a coveted four-wheeler for freedom seekers and adventure lovers. Its lifestyle credentials and open body have made it the perfect choice for a cruise along a sea front or for beach outings with friends.
In the years that followed its creation, the vehicle was adored by those in the fields of media and pop culture, as well as by leading art figures. From the late 1960s to the early 1980s, the MOKE Californian and, later, the BMC Portuguese were driven by members of The Beatles and Brigitte Bardot; secret agent James Bond also raced around in a MOKE in some of his films. Despite disappearing from the market in 1993, the brand made a successful comeback 25 years later, becoming the favourite vehicle of surfers.

![MOKE_ Image-1.png](https://rhapsody.ams3.digitaloceanspaces.com/042882feaa0c9671cfe48fbac9afd6e4.png)

As the automotive industry faces its biggest technological revolution since the patenting of the internal combustion engine, MOKE is unveiling an electric version of its iconic vehicle. Rhapsody was tasked with the design and implementation of the new product’s website, which needed to be tailored to the demands of present-day consumers. 

## The starting point to designing a website: understanding the consumer
Brands that have built their reputation over decades need to carry out rebranding carefully and with a clear understanding of the target group. As a brand that has changed its image more than once in over 60 years while always targeting the ever-changing market segments, MOKE was well aware of this. 

## Rebranding using specific UX/UI tools
We started working on the website with a comprehensive branding strategy that had been designed by the client. At the heart of it were the user personas that had been developed by the brand’s marketing team.

![MOKE_ Image-2.png](https://rhapsody.ams3.digitaloceanspaces.com/e3b3a3daf0b4b47c134e7c7b7fc066a6.png)

The electric MOKE is targeted at active, modern consumers who consciously choose electric vehicles; not only do they feel at ease navigating digital environments, but they also like to actively spend time at the beach. The website set out to build an attractive image of the electric MOKE, while also facilitating access to important information and offering an online order solution. Our aim was to enable customers to reserve their MOKE by paying a deposit via an easy online payment system. 
During a creative UX/UI workshop with the client, Rhapsody’s designers developed a site map to establish the key points of contact between the consumer and the offer. This workshop resulted in a detailed buyer journey that showed the step-by-step pathway of the prospect’s purchase.

![MOKE_ Image-3.png](https://rhapsody.ams3.digitaloceanspaces.com/5e140ce67be1daeb2b058fa31eb1de2a.png)

Designing a visual language with photography, a colour palette and a lifestyle vision
We selected the colour palette, fonts and image style based on the branding guidelines that had been agreed with the client. Guided by the keywords lifestyle, beach life and summer vibe (while bearing in mind the brand identity), we developed a comprehensive visual language for the new product. 

These choices were designed to help boost brand recognition, to establish visual consistency and to sit in line with the tastes and expectations of the present-day consumer. This became the starting point for the design work we carried out on the website’s architecture and for the selection of relevant programming technology.

## A functional website with a mobile-first approach
When rebranding, even the best-designed strategy will not be successful if the website’s basic functionalities and technology are overlooked. Responsiveness, the mobile friendliness of a platform and website architecture that has been fine-tuned for SEO are all factors that will help attract new audiences. 

Buying products on a smartphone has become so natural for most of us that it has become hard to imagine a website that is not mobile-friendly. Because of the changes that search engines have pushed on web developers in recent years, a significant proportion of professional web design now begins with mobile solutions.

![MOKE_ Image-4.png](https://rhapsody.ams3.digitaloceanspaces.com/11449aed3f3fc326fa266b49c5bdf954.png)

Research shows that 89% of today’s consumers are willing to recommend a product following a positive brand experience on mobile devices. A “mobile first” approach not only creates a point of contact with existing buyers, but also becomes an opportunity to win over entirely new consumer groups. This is especially important for brands – like MOKE – that have to redefine their audience.

## SEO-friendly solutions on a WordPress-based website
Having a mobile friendly website will never be enough to establish a brand’s position if online visibility is neglected. Online visibility is not simply achieved through a noticeable rebrand: it also requires tailored and well-thought-out SEO activities. These lead the consumer from their first search engine query (sometimes with a well-positioned adwords ad) to the purchase form, via the website’s clear, user-friendly content.

Adopting these basic rules will not only make the product visible on the web and engrave it on potential prospects’ minds, but will also make the product stand out against those of competitors or, as has happened with the iconic Mini Moke, sub-standard imitations.

In order to provide MOKE with flexibility, maximise the brand’s SEO footprint and allow its team to manage content more easily, we opted for the responsive and intuitive WordPress CMS as the development platform. 

## A functional and multi-language platform
Besides allowing for easy content management and its powerful SEO optimisation capabilities, WordPress has yet another important advantage: it allows for the preparation and merging of multiple language versions into one universal platform, which can then be managed by people from specific markets or departments. 
For the [project with MOKE](https://www.rhapsodymedia.com/en-us/our-work/moke), this was all the more important because the car was to be extensively marketed in the UK, France and the USA. By adopting a multi-language approach, we not only helped minimise the client’s expenses for development, but also consolidated the entire promotional campaign within a single site.

## An e-commerce platform that elevates sales
Customers should always be able to navigate smoothly from reading about a product to buying it. It must be an intuitive and seamless experience with positive associations. 
When seeking to attract clients with a new car model, the key functionalities of e-commerce should include:
- an online car configurator,
- online orders,
- online payments.

These elements create a complete digital buying process based on emotions. Who wouldn’t want to customise their own dream four-wheeler? Not only that: they will also want to order and pay for it in just a few clicks while having the freedom to do so from any location, without having to make a showroom appointment. Understanding these consumer needs is of great importance, so that a brand can be adequately prepared to meet them.

![MOKE_ Image-5.png](https://rhapsody.ams3.digitaloceanspaces.com/1a1067861d5dbf0e70b365e0b9a41084.png)

To meet MOKE’s needs, we integrated Stripe (online payments) with WordPress (online car configurator). This allowed us to present the product in line with the brand’s strategy and it also gave MOKE the means to process individual payments. We also synchronised the entire system with Salesforce (online orders), enabling the brand to track customer orders and provide personalised offers in the future. 

A MOKE fan can therefore fulfil their dream of selecting and purchasing one of the brand’s coveted vehicles quickly and easily, before embarking on their next summer adventure.

## A website design tailored to consumer needs and expectations
Understanding the expectations of consumers is just one piece of the puzzle. You also need attractive design and photography, combined with a functional and easy-to-use e-commerce site. This is how you stand out in the marketplace and achieve brand longevity, especially when you’re tackling new challenges.

If you’re looking to build a group of loyal customers for your new product, you need to prove to them that the product is continuously changing alongside them and being adapted according to their ever-evolving needs. Let’s face it, in this day and age, you’re only going to be able to prove the point if your brand’s activities and communication efforts are optimised for search engines. Accessibility and a mobile-first approach should therefore always be the starting point in digital media.  

**Would you like to find out what web services we can provide for your brand?**
[Schedule a free meeting](https://www.rhapsodymedia.com/en-us/contact-us) with our team and let’s discuss the possibilities.

MOKE’s rebranding and new website – a British automotive classic reborn

### Why integrating prototyping into your product development process is a game changer

It can be challenging for products and services to be successful in a saturated market. Fierce competition and increasingly high consumer expectations mean that brands have to minimise the risks that are typically associated with a new product launch. To stay one step ahead of the competition, a brand must be sure that its product meets customers needs and it should also respond quickly to changing trends and any actions taken by its competitors. So, what’s the best approach?

### The Design Sprint process is an effective solution to overcome significant challenges

What is a Design Sprint? It is a working method that allows you to find answers to critical business questions in a short space of time. In five days, the team goes from an idea through to the creation and testing of a prototype in real market conditions. By applying the steps of a Design Sprint to a design process, it becomes possible to instantly assess whether a proposed solution is likely to succeed, especially in a highly competitive market. 

The Design Sprint process is worth using in the following situations: 

- You need a quick solution to a problem
- The challenge you face is extensive and complex
- Your team is stuck

Almost every company providing B2B or B2C services will, at some stage, face one or more of the challenges listed above. Whether you are working on a new product, you want to modify an existing product or you are facing an organisational challenge, the Design Sprint will therefore enable you to develop your concept further or help you to choose the optimal course of action.

### The benefits of using the Design Sprint
Do you have an excellent idea for a new product but you are unsure whether it is feasible and cost-effective? Design Sprints are invaluable in these kinds of situations. Here’s what you can gain from doing one:
- You will save money – after a Design Sprint, you move into the product development phase being almost 100% certain that it is going to be a profitable move. 
- You will save time – you spend only two days with [best marketing agency London](https://www.rhapsodymedia.com/en-us/) building a prototype product and testing its functionality in real market conditions. 
- You get to involve all team members in the project process.
Because the process focuses on usability and the final user, a Design Sprint has the advantage of being simple and efficient.

![casestudy-SmartLM-full-width-media-prototype.png](https://rhapsody.ams3.digitaloceanspaces.com/84b965d4a35edf56c55021f4bee3b72c.png)

### Boost creativity with Design Thinking, but act quickly and efficiently with a Design Sprint
The classic Design Sprint, which was developed by Google Venture in 2000, consists of five steps. Each step corresponds to one day of work, which means that you can go from an idea to testing a product prototype in only five days. Fast, right? This is one of the main ways in which a Design Sprint differs from the more widely known Design Thinking process, which has no defined timeframe or stages. The Design Sprint process, on the other hand, follows a particular methodology based on the question “How can one bring an idea to life in the most time- and cost-efficient way?”

The Design Sprint is based on teamwork: it is essential that each team member participates in full and that the process facilitator remains impartial. The joint efforts of those involved in the process almost always leads to spectacular results.

The five Design Sprint steps are: 
1. Understand 
2. Sketch 
3. Decide 
4. Prototype 
5. Test 

![casestudy-DCS-full-width-media-prototype.png](https://rhapsody.ams3.digitaloceanspaces.com/c843ef653d8b4f8e5ddd7111f09e7234.png)

### The Design Sprint takes you from an idea to prototype testing in just a few days
The success of the Design Sprint method relies largely on a set of specific rules. Following these rules allows you to go from an idea to a tested prototype in just a few days. These rules are:

- Getting started is more important than being right. Instead of meticulously planning every detail and strategising the best way forward, pick a way to get started.
- Rather than relying on creativity, think about execution. Focus on how the idea will perform in real market conditions.
- Minimise discussions! Structure your conversations and focus them on concrete objectives using the Design Sprint tools and tactics.
- Alignment. Solution. Validation. Align teams on the largest challenges of your project. Find a large amount of solutions. Create and test a prototype in just four days.

While there are rules to follow to complete the process in five days, the Design Sprint does also give you room to experiment and be flexible. You can simply tailor the Design Sprint to make the process as effective as possible for your team. At Rhapsody, we work with a proprietary method – Design Sprint 2.0 – that takes us from problem-solving ideas to the final product: a tested interactive prototype.

### The Design Sprint 2.0: get to know the Rhapsody way
The Design Sprint method is an integral part of our work philosophy. It is based around three pillars: strategy, project and development. We plan, design, test and select the best solutions so that the brands we work with can effectively achieve their business goals. 

Using the UX Design Sprint framework, [as a digital agency](https://www.rhapsodymedia.com/en-us/), we quickly and flexibly create user experience designs for digital products such as apps, websites, platforms and online shops. Our approach proves that this methodology can be successfully applied in situations where finding the best solution to a given problem in a short space of time is a priority.

We have developed an effective workflow based on the principles of the Sprint Design process. Our Design Sprint 2.0 method consists of four stages which correspond to four weeks of work that follow a strictly defined schedule. Weeks Two and Three, when we prototype and test a product or service, include activities that are typically part of a classic Design Sprint.

The Design Sprint steps we follow to achieve a set business goals
1. **The pre-flight workshop** – Research. In the first week, we develop a customer journey map, among other things. We set business goals, demographic targets and benchmarks with the client. We also analyse the problem we aim to solve.

2. **The Design Sprint** – Discover. We implement a workflow based on the principles of a classic Design Sprint in the second week.

3. **The Iteration Sprint** – Iterate. In Week Three, we remain in a sprint mode to refine the solutions that have been developed and to ensure that the chosen direction for product development is the best one.

4. **Development – Synthesise**. The final week is when our developers and graphic designers create an interactive, tested prototype and present product development plans to the client.

### The Design Sprint and Iteration Sprint aim: a thorough testing of the prototype
The two weeks dedicated to the Design Sprint and Iteration Sprint allow us to thoroughly test our ideas and safely move to the final stage, i.e. building an interactive prototype. At this stage, we already know that the product or service will be successful and that the client will not have to bear the costs of a product that does not meet the consumers’ needs.

Here is our workflow during the week dedicated to the Design Sprint: 

1. We define the challenges facing us, bearing in mind the client’s business goals. We also go over the problem we intend to solve during the week.

2. We discuss possible solutions that could lead us to the goal. We sketch out what we think are the best ideas.

3. We choose the best ideas out of the many that have been put forward. We then create a storyboard as a basis for the prototype.

4. We build a realistic prototype. At Rhapsody, these are usually virtual mock-ups created by our developers and graphic designers who take the user journey into consideration (a [UX Design](https://www.rhapsodymedia.com/en-us/design/user-experience-design-ux) Sprint).

5. We test the prototype in real market conditions.

We are still in sprint mode in our second week of the project. Our focus is on the following:
·   Evaluating the solutions developed and tested during the Design Sprint
·   Modifying these solutions to better meet the business objectives of the project 
·   Building a new product prototype
·   Testing the prototype under real market conditions

What do we gain from a fortnight’s worth of sprints? It gives us invaluable insight into whether an idea is likely to be a success and what business outcomes we can expect from it.

It’s easy to take the next steps if you have an interactive prototype, plus feedback from its users.

In the final week of Design Sprint 2.0, our developers and graphic designers build the interactive prototype of the product. Then, based on the results, we will provide recommendations on the steps to take for product development.

When you have a tangible version of your product and feedback from its users, deciding on the next steps becomes much easier. Many of our clients use a Design Sprint to map out the functionalities of their product before then going on to implement it with their engineering teams.

What sets Rhapsody apart from many other design agencies is that we can immediately continue on to the product development stage with our team of developers. In addition, our clients appreciate the fact that, by working with the Design Sprint method, we are flexible and constantly exchanging with them.

**This method allows you to try out different ideas in a short time and assess them in relation to real market conditions. Discover what Design Sprints are all about and how we apply them to achieve our clients’ marketing goals.**

Are you looking for a [Design Sprint agency](https://www.rhapsodymedia.com/en-us/design/design-sprints) [Reach out to Rhapsody](https://www.rhapsodymedia.com/en-us/contact-us) and speak to us about our Design Sprints. 

Prototype better products and services thanks to a Design Sprint

## The Essence of Prototyping
**Welcome to Rhapsody, where creativity reigns supreme and innovation is the driving force behind every project. In this article, we have decided to take a closer look at prototyping for one very simple reason: it is a game-changing approach in design sprints and product development. With over a decade’s worth of experience working with Fortune 500 companies, we’re not shy to say we understand the pivotal role that prototyping plays in shaping successful businesses. Let's explore why every executive should consider prototyping, how it benefits marketing managers, and why it's a solution you should consider.**

Every product or solution starts with an idea, right? Ideas translate into fully-fledged concepts. But how do we know whether a promising idea will become a successful, profitable solution? This is precisely where prototyping comes in. 

At its core, prototyping is about turning ideas into tangible, testable models. In [design sprints](https://www.rhapsodymedia.com/en-us/blog/prototype-better-products-and-services-thanks-to-a-design-sprint) and product development, it's the essential bridge between concept and reality. Prototypes can take various forms, from low-fidelity sketches right through to interactive digital models. The goal is to create something that can be tested and refined to ensure that the final product meets the users' needs.

## Who Is Prototyping For?
Good question. Prototyping is essentially for any forward thinkers who are responsible for a business or product. That being said, we firmly believe there are three groups that benefit the most from it.

### A Tool for Business Executives
For business executives, prototyping is a strategic investment that pays off. By prototyping early in the development process, executives can gain a clear understanding of how their ideas will translate into real-world products or services. Having this kind of insight minimises the risk of (costly!) mistakes and ensures alignment with market demands. Prototyping empowers executives. It means they can make informed decisions, enhancing the efficiency and effectiveness of the development process.

### Empowering Product Managers
Product managers thrive on innovation: prototyping provides them with the perfect playground for experimentation. It allows teams to visualise and test new ideas swiftly, ensuring that solutions and strategies resonate with the target audience. By prototyping, teams and managers can iterate rapidly, refining their approach based on user feedback. Having this agility is game-changing in the fast-paced world of product design and innovation.

### A Priceless Solution for Marketing Managers
Marketing is a broad field. One that spans concept, strategy and communication development. That’s why there’s an argument to be made for prototyping. Every time a team designs a campaign or conceptualises a certain market approach, prototypes can deliver a complete representation of the solution. This gives teams a great opportunity to analyse and evaluate their approach and strategies. 

**Prototyping shows logical connections. It involves certain data and metrics. It provides timelines and event sequences. It shows a bigger picture before the investment is made. And those are just a few of the reasons why it is great for marketing teams.**

![A prototype of a website - sketch.](https://rhapsody.ams3.digitaloceanspaces.com/73b1d50670e0286e9d720a68942d2827.png)

## Two Types of Prototypes: Low-Fidelity and High-Fidelity

Prototypes generally fall into two categories. 

### Low-fidelity prototypes

- **Low-fidelity** prototypes are basic wireframes. During design sprints they are invaluable for quickly sketching out ideas, exploring design alternatives, and aligning team members on a common vision. 
- **Lo-fi** prototypes are especially useful for development teams. Why? Because they give an understanding of the intended functionality and user experience at an early stage. This aids in efficient development planning and mitigates the risk of changes later in the process.

### High-fidelity prototypes

- **High-fidelity** or polished prototypes are more refined, interactive representations of a product. In other words, they closely resemble the final product's look and feel. 
- These **high-fidelity prototypes** are crucial for user testing as they provide a realistic experience that helps identify usability issues and gather valuable user feedback. 

### How are hi-fi prototypes used?

- **Development teams** can use polished prototypes to evaluate the technical feasibility of a design and make informed decisions about implementation. 
- **Business owners** can showcase polished prototypes to investors and stakeholders, securing buy-in and financial support. 
- **Strategic management** relies on polished prototypes to assess market potential and alignment with business goals.

A **prototype** of any kind is always going to be more useful than a static design as it takes into account the user journey and experience in an interconnected path. This allows each and every stakeholder to fully grasp all aspects of a solution and it removes any assumptions or misunderstandings. The approval of a prototype helps plant a flag that clearly states “this is what we can build”.

### The Key Benefit for Everyone: User-Centric Solutions
For all the groups we outlined, there’s common ground when it comes to the benefits of prototyping. The most significant benefit is the fact it allows for user-centric solutions. Instead of relying on assumptions, businesses can involve users from the outset. This approach fosters empathy and understanding. The result? Products and services that genuinely meet user needs. Prototyping also encourages collaboration, ensuring that all stakeholders are aligned with the end goals.

![Blog_Turn Ideas into Tangible Models.png](https://rhapsody.ams3.digitaloceanspaces.com/5074c243bc034646a0aff0743d26d4f2.png)

## Making Prototyping Work for Your Business
In conclusion, prototyping is not just a buzzword in design sprints and product development — as (we hope) you’ll have gathered, it's a transformative approach that can take your business to new heights. That’s why we and other [London marketing companies](https://www.rhapsodymedia.com/en-us/) are so keen for business executives and marketing managers to embrace this innovative tool to unlock the potential of their ideas. Let’s wrap it up.
London marketing companies

### Prototyping:

- aligns stakeholders (”this is what we can build”)
- removes assumptions and misunderstandings
- allows users to grasp the full concept/solution 
- forces you to identify bottlenecks and thus simplify complex areas 
- focuses the mind on HOW to achieve the goal rather then the goal itself
- prevents costly changes later on in the product development cycle
- allows for quick changes and iterations
- is an easy method of user-testing that yields great feedback
- generates more empathy and connection with your end-users   
- allows you to see into the future – you will gain insight into how users will actually use your product before you launch it
- leads to that A-ha! moment when a tester shares a better way of solving something or a totally different perspective on achieving the goal

Now that you understand the value of prototyping, you’ll want to know how to implement it effectively. Successful prototyping requires a collaborative approach, open communication, and a commitment to innovation. At Rhapsody, we specialise in guiding businesses through the prototyping process, from concept to realisation. Our experienced team will ensure that your ideas are transformed into user-centric, market-ready solutions. 

If you're ready to explore the world of prototyping, don't hesitate to [contact Rhapsody](https://www.rhapsodymedia.com/en-us/contact-us). We're here to turn your visions into reality, one prototype at a time.

**Pro tip: Creativity starts with a conversation. If you're ready to take your business to the next level, why not have a chat with Rhapsody? Find out how we can help your business as a [Design Sprint agency](https://www.rhapsodymedia.com/en-us/design/design-sprints)**


James Willard