Strategy is about making choices, trade-offs; it's about deliberately choosing to be different.
— Michael Porter
Following the buzz that our Product Design Process was already generating, moving forward with the development of a pre-order website was the next logical step. This would enable:
Branding
The first challenged we faced concerned the branding. The book has its own branding, but the content is tied up to Imaginary Cloud's Design Process. We had to evaluate what made sense in terms of branding for the pre-order website. Should it use Imaginary Cloud's branding? Should the new site use the book's branding?
Our first guess was to apply the branding of the book to the pre-order website, but since the beginning, it was clear that we needed Imaginary Cloud's social presence to spread the word. Creating social media accounts and a newsletter for the book alone was too demanding, and an operational nightmare for such a small team.
After a brainstorming session, we decided that following the branding of the book was the best option, but we had to also highlight that the social channels and newsletter being subscribed were about the creators of the book and not about the product itself.
Building a community
Past the branding step, but still in the planning phase, one of our main goals was to build a community around the book.
Our social channels are pretty active and cover a lot of details about the work of Imaginary Cloud, including the book itself. However, the type of audience that follows us because the book might not be as interested in other day-to-day activities.
We had to focus our most relevant content of the Product Design Process on one of the available channels and make it clear for the website visitors that it was the right one to follow. With this in mind, we picked our newsletter as the preferred channel.
The main reason for this choice was because we could direct users to subscribe to the newsletter over other social channels and we could also provide an incentive to do so, something relevant within the context of the book that they would value.
We designed, for this end, a cheat-sheet of the Product Design Process that is only obtainable by subscribing to our newsletter.
Managing payments
At this point, our branding was defined and we've secured the means to engage with the community. All that is left to plan is how to manage payments and the main challenge here was handling the VAT, which has an impact on the automatic processing of invoices.
Our idea to have it automatically processed on the website was abandoned after taking a deeper look at the EU legislation. As the percentage of VAT to charge depends on the address of the buyer, we concluded that the best solution would be to process VAT and issue invoices manually.
Although the number of pre-orders has been high, we do have installed capacity to deal with the manual generation of these documents. And once the book is live, most sales will be done via Amazon, Book Depository, and other online retailers.
We've completed the first phase and our pre-order website is planned, with a handful of issues solved up to this point. It's time to start the designing process, where we had clear objectives:
The Skeleton
The first step was to build the wireframes (visual guide that represents the skeletal framework of the website), thus creating a single page and structure that gives the best experience when navigating through the website.
We split the page in three sections: a brief description of the book on top, followed by a pre-order form and finally the newsletter subscription form. The most relevant information - the book and the pre-order discount - is highlighted to capture the user's attention about the main topic.
Branding Issues (reloaded)
At this point, we were not quite done with the branding, which appears here as a challenge on our project for the second time.
As we were using the branding of the book, the visual materials already had a good baseline. The biggest visual challenge was to use Imaginary Cloud's branding in the newsletter section without overriding the branding of the pre-order website.
To solve this issue, we seamlessly blended details of Imaginary Cloud's branding to the webpage. The solution looks simple: a grid as the background of the newsletter section, which is also the background used on Imaginary Cloud's page.
And because the devil is in the details, we designed an animation for when the newsletter subscription is completed:
We've planned and designed our pre-order website and it was at that point one step away from completion. All that was left was to implement.
At this final phase, we had to identify the non-functional requirements and check if something else was missing from the design materials (a pre-order dashboard, for instance). For a complete pre-order website, the following features were essential:
Researching and taking action
Before taking the next step, we needed to do our homework and research about existing e-commerce solutions that provide all the needed functionalities. Those platforms usually operate in a SaaS model and take a small fee for each item sold, which wasn't our ideal scenario.
It didn't take long until we realized that the costs of using this kind of platforms did not compensate for such a small website. So, we built it in Ruby on Rails, as we're pretty familiar with the framework and it offers a robust toolset for developing web applications.
Making the transaction real
For the payment gateway we went Stripe because it takes a low toll on each sale and has a well-documented API. It also has a widget that covers all the necessary validations and data does not pass through our servers.
This way we don't process credit cards, making our web site secure and PCI compliant at the same time. We were upon the ideal solution for our problem.
For transactional emails we went with SendGrid, a reliable and easy-to-configure provider that we already had used in the past. We needed it to inform our team when a sale was made and Sendgrid's free tier was enough for this website.
Newsletter Subscription
Mailchimp was our go-tool for newsletter management. This system was already in use for Imaginary Cloud's newsletter and the decision was straightforward. Pricing is good and it has a large variety of easy-to-configure features.
Back-office
Regarding the back-office, we decided to create our own, using an open-source library called rails_admin. This way we're able to see the details of every order and export the data to excel format - making the shipping of the book easier to handle.
And because we have full control over the code-base, we're letting the team know via Slack whenever a pre-order is done. This was not a requirement, but it's cool and didn't take much time to achieve.
A pre-order website is an excellent way to start promoting a product, allowing the community to take notice and get a special offer before it is launched. As we've seen, the process itself - planning, designing and developing - has some particularities, but it is not hard to accomplish.
The goals that we defined for this phase were successfully achieved and we love the final result. It also seems that we're not alone, since pre-orders have been flowing and people seem very keen to be taking advantage of the discount.
Feel free to take a look at the final result and let us know what you think: https://www.productdesignprocess.com
At Imaginary Cloud our goal is to deliver great digital projects through the fantastic work of our software development and UI/UX design teams. If you think you could use some help in your digital project, drop us a line here!
Found this article useful? You might like these ones too!
Content writer with a big curiosity about the impact of technology on society. Always surrounded by books and music.
People who read this post, also found these interesting:
.png)
