How We Created our New Website with the Design Sprint

From the Idea to the Prototype in Four Days

Luca Spezzano
Nov 12, 2019 · 10 min read
Image for post
Image for post

What is the Design Sprint

The Design Sprint is a proven process, that can be from four to five days in its full version.
It is a process for validating ideas and solving significant challenges through prototyping and testing ideas with customers.
It is developed by Google Ventures and increasingly used by large companies. It is one of the most effective ways to quickly find solutions to complex problems in teams as an alternative to classic exhausting meetings and long work sessions that often prove to be less productive.

The Design Sprint in Starteed (our company)

The Desing Sprint methodology is well defined and shared, but over time different versions of the process have been born and, after an in-depth analysis of the various proposals, for our project we have decided to follow the AJ & Smart method (already used by companies like Ebay, Red Bull, Salesforce, Slack and others) structured in four days. The material made available by AJ & Smart on their website and their Youtube channel was very clear and the one most suited to our case.

But how are the single days of work structured?

Let’s see it together.

Day 1 — Monday, Define the Challenge

During Monday morning the following are defined: the long-term goal of the company, also called “HMW” (How might we?) And the map of the actions performed by the customers to arrive, in our case, to purchase one of our products.

Long-term goal

The work session started with a quick but effective brainstorming during which the team had 20 minutes to ask questions about Starteed’s mission, its ideal target, its products and the way they are offered to the public.
At the end of the brainstorming, each member of the team was asked to write on a post-it which should have been, according to him, the result achieved by Starteed at two years starting from that day in the best possible scenario, imagining then to be succeeded in that time to overcome every possible obstacle and find the solution to all market demands.

Image for post
Image for post

How might we?

Once we defined our Long Term Goal, it was time to ask ourselves a different kind of question, how can we reach the goal we set ourselves? With the same methodology used just before each team member had 20 minutes to write his HMW, the goal was to write what obstacles and problems Starteed should have been able to overcome and resolve to achieve its long-term goal.
After the presentation of the HMW and the voting process, some of the most chosen were the following:

  • “Will we be able to intercept the right target?”
  • “Will we be able to show our experience in the market?”
  • “Will we be able to pass the concept that we create a crowdfunding campaign quickly and easily?”
Image for post
Image for post

The map

We first had to identify the set of starting “actors”, the individuals who use Starteed, and the point of arrival of the map that in our case is reached by purchasing one of our solutions for the crowdfunding.
Once the actors have been established, in our case a “customer B2C” and a “customer B2B”, and the point of arrival of the map we then analyzed the acquisition channels of the single individuals (web searches, advertising, referrals, direct sales, etc.) and the actions performed by them in the Starteed ecosystem (site visit, contact request, trial activation, etc.) to reach the arrival point, the purchase of one of our products.

Image for post
Image for post
Image for post
Image for post

Lighting Demo & Notes

After the lunch break, each participant was asked to search and analyse the competitors’ websites to identify up to 3 elements or concepts that, according to him, made sense to use as a starting point for the prototype of the new site.
After each member of the team then presented the elements identified and the reasons for his choices; then followed the well-established voting phase from which the elements and concepts to be surely used in the future prototype.

Sketching

The time had come to put on paper what had been discussed so far. The sketching phase provides a series of exercises aimed at creating a first “concept” of the final prototype, one of these is called “Crazy eight”.

Crazy eight

Each participant had precisely eight minutes to design eight different versions (on a single A4 sheet divided into eight equal parts) of his ideal site prototype or even just a part of it. Obviously given the limited time available, it was not possible to do well on the aesthetic part. The exercise was very useful (as well as very funny!) To let the most different ideas come out of all team members and to prepare for the prototyping of future “Solution Sketches”.

Image for post
Image for post

Solution Sketch

The Solution Sketch is the result of the first day. Using three or four A4 sheets united in a single design, each participant had an hour to make their concept for the future prototype; to do so, everyone had to keep in mind what emerged during the first part of the day and the interesting or useful elements or concepts of other websites taken for example.
When creating your Solution Sketch, it was essential to keep in mind the three rules indicated by AJ & Smart:

  • Words are important (words are important)! To support the drawings it was necessary to add a post-it to describe verbatim more in detail any flows or concepts that are difficult to express through the drawing;
  • Give it a Nickname (give it a Nickname)! Solution Sketch would be analysed the following day anonymously; in order to avoid valuations that were not sincere, it was important to explain the various concepts referring to them with proper names instead of associating them with the people names.
Image for post
Image for post

Day 2 — Tuesday, Decide and Storyboard

Arriving at the office on Tuesday, after the morning coffee, we immediately set to work to evaluate the individual Solution Sketches.

Image for post
Image for post

User Test Flow & Storyboard

Now that we had defined the fundamental elements from which to start developing the prototype of the new site, all that remained was to identify the set of actions that users would perform on our website starting from their landing to the purchase of one of the products of Starteed, called “Storyboard”.

Image for post
Image for post

Day 3 — Wednesday, Prototyping

The prototyping phase, unlike the previous ones, does not follow precise rules and does not include a series of pre-defined exercises. At this point each team is free to organise the development phases of the prototype in the way that it considers most appropriate, the important thing is to keep the decisions taken during the previous two days and to avoid setting in motion new decision-making processes that at this point of the sprint would be deleterious.
New ideas arising at the time during prototyping may indeed be exciting but would put in doubt everything that has been decided during the sprint.

Day 4 — Thursday, Test!

During the previous days of sprinting, the person in charge of the final tests had scheduled appointments for Thursday with the testers selected in the meantime.
We then asked each tester to browse the prototype of the homepage and perform a series of precise actions that would allow us to understand the behaviour of a user on the website and its interactions with the proposed actions.
During the test, two of us set aside the negative and positive feedback that emerged during the navigation of the prototype; these feedbacks turned out to be very useful for the refinement of some areas of the homepage of the site that we had imagined.

Conclusion

From the first day, each participant was enthusiastic about experimenting with this innovative work method and fully entered into the collaborative spirit of Design Sprint.
Every important decision, starting from the long-term objective of the company to the design of the final prototype, was in fact defined together and voted fairly; the targeted and timed discussions foreseen by the sprint have also allowed each team member to acquire the set of fundamental information of Starteed’s business (the target, the positioning of the products offered, the advantages of the developed technology, marketing and communication) which are often taken for granted or incorrectly attributed to only part of the team.

Image for post
Image for post
Image for post
Image for post
Starteed website

NotOnlyCSS

This publication includes original articles and tips about…

Sign up for NotOnlyCSS

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store