Challenge Summary
Welcome to the „SiWC Brewery Design Concept Challenge”! In this challenge we are looking to come up with creative designs for a responsive brewery website, where customers can discover a broad range of beers and order their favorites. The design should be bold and unique and stand out from the competition.
Please read the challenge specifications carefully and let us know if you have any questions in the forums
Challenge Objectives
Application Overview
Audience
Persona
User Story
George is a beer lover. He likes some particular flavour of beer with particular malts, however is not able to filter on any of the existing brewery websites how to quickly find those beers that include these flavours. He is looking for that unique flavour of beer, a beer created without any compromise. He runs into SiWC Brewery website which looks cool and fun and has a great experience. Here, he learns about the different types of beer SiWC brew and can filter by ingredients, ABV or beer type. He discovers new types of beers to order at home and he even discovers a pub nearby him where he can try those beers with his friends.
We need to design the experience for George in this challenge.
Design Goals and Principles
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
Glossary
SiWC = Sheep in Wolf’s Clothing Limited (it is the company’s name). Read more of the branding documentation to understand its meaning better.
Brewery = a brewery company is a business that makes and sells beer
ABV = Alcohol Body Volume – is a standard measure of how much alcohol is contained in a given volume of an alcoholic beverage (expressed as a volume percent). Interval values are from 0 to 20%.
SRM = Standard Reference Method - is a systems used to specify beer color and is measured in intensity levels (numbers). Interval values are from 0 to 70+.
Hops = ingredients that help keep the beer fresh for a longer period of time and retain its flavour
Malt = grain (barley or wheat) that has been specially prepared for brewing
Background
SiWC needs a website. Their aim is to become the UK’s best low and no alcohol brewery(short term), and bring back the ‘local’ whilst doing it. In the long term, they plan to introduce alcohol beverages as well. To accomplish this, given the impact of Covid-19, they will require the best brewery website in the world. The website will be their first opportunity to interact with their client base. The importance of making an impact, representing the brand, company values, and ensuring people want to come back time and time again could not be more critical. It is also going to be where customers can follow the development of the brand, brewery and ‘the local’ locations.
SiWC plans to open a top of the range brewing facility and taproom. This will then be followed by several pubs which will be called ‘The Local XX’ (where XX denotes the first alphanumeric characters of the UK postcode the pub is located in).
SiWC will be fully accessible for people with physical and learning difficulties from the start. This means patrons and staff will be able to access the locations without any cost to their dignity. This will mean split height bars so whether you are tall, short, wheelchair bound you can order one of our world class beers with no compromise required.
The 12 month aim is to have at least five beer ranges live and for sale online:
The thinking behind this is that we want to pivot away from ‘no alcohol’ or low alcohol being a compromise - we will have lager, pale, ipa etc options but these options will cover the alcohol content range. As time goes on, more options of beer will be added.
To understand better the company values, go over the branding documentation and read more there. There is content you can pull over from there.
At a high level we envision the following pages for the site:
In this challenge, we are focusing only on the pages listed in the requirements, but the list above can help you plan the navigation.
Screens Requirements
1. Landing Page (Desktop)
The landing page offers the viewer the first impression into the website and should catch his attention very fast. It should contain a couple of elements such as:
2. Shop (Desktop)
This is the page the user is going to actually select the beer he is interested in to buy. It should contain:
3. Beer Details (Desktop)
This page will show all the details about a particular beer. The details to be shown for each of them are:
For all the pages above, the content shared is for reference only. Do your research on similar sites and see what other content you can add and plan the best way to present them, while keeping the style bold and fun (sheepy!)
4. Join the Pack (Desktop)
This page is about asking visitors to sign up to become members. In addition to using a form for this (name, email, password) we would like to make the page more special and show them why they should become members (our values, beliefs, best beer in the world, fun concept, pubs to try the beer with friends, potential discounts in the future). We’d like this page to be fun and creative, engaging for the viewer.
Key Ideas When Designing
Websites We Like
Breweries:
Others:
Style:
Assets
Branding Guidelines
Size
Stock Photos and Icons
Marvel Prototype
Final Deliverables
Please read the challenge specifications carefully and let us know if you have any questions in the forums
Round 1
Submit your initial designs for checkpoint review. Feel free to add any screens which are necessary to explain your concept.- Landing Page (Desktop)
- Shop (Desktop)
- Beer Details (Desktop) - optional
Round 2
Submit your final designs plus checkpoint feedback implemented. Feel free to add any screens which are necessary to explain your concept.- Landing Page (Desktop)
- Shop (Desktop)
- Beer Details (Desktop)
- Join the Pack (Desktop)
Challenge Objectives
- Responsive website
- 4 screens to be designed in desktop format
- This is a concept challenge
- We’re looking for bold and unique designs, that follow the branding guidelines and stand out from the competition
- The user experience should be intuitive and provide a seamless flow to complete user goals.
Application Overview
- The purpose of this website is to make an impact representing the brand and ensure people are coming back to order more beer
- The brand should stay in people’s mind as bold, unique and fun
- The brand values should be clearly stated on the homepage
- The users should be able to follow the development of the brand, brewery offer and the expansion of locations
Audience
- Beer consumers from UK
Persona
- Name: George
- Occupation: any
- Goals:
- Quickly discover the new SiWC Brewery and their products
- Be impressed with the quality of products and branding and return to order more
- Discover different locations/pubs where SiWC Beer is served
- Frustrations:
- Can’t find a proper craft beer he enjoys based on varied alcohol content (ABV), intensity and flavors he likes
- There is no brand which truly stands out
- No place to go out with friends and enjoy this great beer which has a sense of community
- Wants:
- A way to explore and order the SiWC beer fast and effective
- Different pub locations to taste the SiWC beers with his friends
User Story
George is a beer lover. He likes some particular flavour of beer with particular malts, however is not able to filter on any of the existing brewery websites how to quickly find those beers that include these flavours. He is looking for that unique flavour of beer, a beer created without any compromise. He runs into SiWC Brewery website which looks cool and fun and has a great experience. Here, he learns about the different types of beer SiWC brew and can filter by ingredients, ABV or beer type. He discovers new types of beers to order at home and he even discovers a pub nearby him where he can try those beers with his friends.
We need to design the experience for George in this challenge.
Design Goals and Principles
- We’re looking for a bold, unique, fun and creative design (check out branding documentation and reference to pop art style)
- Simple and clean design over complex and flashy.
- Photography is highly encouraged.
- SiWC branding is mandatory
- Sheepies! Check the branding documentation
- The site needs to be accessibility friendly to people with disabilities as well. Think about this when deciding on the contrast to use, font sizes, colors, etc.
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
- Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 9
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 7
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- Branding: 10
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
Glossary
SiWC = Sheep in Wolf’s Clothing Limited (it is the company’s name). Read more of the branding documentation to understand its meaning better.
Brewery = a brewery company is a business that makes and sells beer
ABV = Alcohol Body Volume – is a standard measure of how much alcohol is contained in a given volume of an alcoholic beverage (expressed as a volume percent). Interval values are from 0 to 20%.
SRM = Standard Reference Method - is a systems used to specify beer color and is measured in intensity levels (numbers). Interval values are from 0 to 70+.
Hops = ingredients that help keep the beer fresh for a longer period of time and retain its flavour
Malt = grain (barley or wheat) that has been specially prepared for brewing
Background
SiWC needs a website. Their aim is to become the UK’s best low and no alcohol brewery(short term), and bring back the ‘local’ whilst doing it. In the long term, they plan to introduce alcohol beverages as well. To accomplish this, given the impact of Covid-19, they will require the best brewery website in the world. The website will be their first opportunity to interact with their client base. The importance of making an impact, representing the brand, company values, and ensuring people want to come back time and time again could not be more critical. It is also going to be where customers can follow the development of the brand, brewery and ‘the local’ locations.
SiWC plans to open a top of the range brewing facility and taproom. This will then be followed by several pubs which will be called ‘The Local XX’ (where XX denotes the first alphanumeric characters of the UK postcode the pub is located in).
SiWC will be fully accessible for people with physical and learning difficulties from the start. This means patrons and staff will be able to access the locations without any cost to their dignity. This will mean split height bars so whether you are tall, short, wheelchair bound you can order one of our world class beers with no compromise required.
The 12 month aim is to have at least five beer ranges live and for sale online:
- Lagers (0.5%, 2.8% and 4.5%+)
- Pale Ales (0.5%, 2.8% and 4.5%+)
- IPAs (0.5%, 2.8% and 4.5%+)
- Stouts (0.5%, 2.8% and 4.5%+)
- The others, a mix of sours and random beer styles across different ABV values (up to 8 total)
The thinking behind this is that we want to pivot away from ‘no alcohol’ or low alcohol being a compromise - we will have lager, pale, ipa etc options but these options will cover the alcohol content range. As time goes on, more options of beer will be added.
To understand better the company values, go over the branding documentation and read more there. There is content you can pull over from there.
At a high level we envision the following pages for the site:
- Landing page
- Shop
- Beers
- Beer Details -> Shopping Experience
- Merchandise
- Beers
- Blog
- About
- Who we are
- Values
- Mission
- Inclusivity Symbol
- Contact Us
- Social media embedded (instagram primarily, facebook and twitter too)
- Where are We, find locations which sell our alcohol and our premises and if we aren’t near you recommend your local pub
- Join the Pack (website membership)
In this challenge, we are focusing only on the pages listed in the requirements, but the list above can help you plan the navigation.
Screens Requirements
1. Landing Page (Desktop)
The landing page offers the viewer the first impression into the website and should catch his attention very fast. It should contain a couple of elements such as:
- Navigation (planned based on items above) + option to login (members could benefit of discounts) + shopping cart
- Our Values: Inclusivity, Community and Sustainability (as described in the branding documentation)
- Highlight that this is the best brewery website in the world and our focus in entirely on high quality
- Show a method for the user to find locations/pubs around him to try our beer
- Promote our non-alcoholic beers (images and assets can be taken from provided assets files below)
- The user should be encouraged to go to the shopping page
- Anything else? Shopping offers, different gifts, etc? These are just a couple of suggestions, but we’re looking to your ideas and creativity for best content that can be laid down here
2. Shop (Desktop)
This is the page the user is going to actually select the beer he is interested in to buy. It should contain:
- A list of all existing beers
- Each beer should have the name, price, option to view details and add to card
- Search
- Sort by option
- Filter by:
- Beer Type (we could have multiple types of same beers with different concentrations of alcohol)
- Price Range
- ABV
- SRM
- Hops type (we like the symbols used on the boxes)
- Hops intensity
- Malts type
- Malts intensity
- Vegan type
- Any discount there might be applied to particular beers
- Anything else? Up to you!
3. Beer Details (Desktop)
This page will show all the details about a particular beer. The details to be shown for each of them are:
- Beer name
- Cost
- Description
- ABV
- SRM
- Hops
- Malts
- Vegan
- Ingredients
- Allergens
- Option to add to card (quantity + button to take actions)
For all the pages above, the content shared is for reference only. Do your research on similar sites and see what other content you can add and plan the best way to present them, while keeping the style bold and fun (sheepy!)
4. Join the Pack (Desktop)
This page is about asking visitors to sign up to become members. In addition to using a form for this (name, email, password) we would like to make the page more special and show them why they should become members (our values, beliefs, best beer in the world, fun concept, pubs to try the beer with friends, potential discounts in the future). We’d like this page to be fun and creative, engaging for the viewer.
Key Ideas When Designing
- Quality
- Pop Art (Lichtenstein)
- Our Values are upfront and lived
- Beer is created with no compromise
- To match our brand (see branding documentation)
- Sheepies (see branding documentation!)
Websites We Like
Breweries:
- https://brewdog.com
- https://athleticbrewing.com/
- https://surrealbrewing.com/
- https://lordhobobrewing.com/
- https://www.newbelgium.com/
Others:
Style:
Assets
- You can find all assets mentioned above in this Google Drive folder.
Branding Guidelines
- Follow the SiWC Branding Documentation for colors, style, typography, sheepies, etc.
- Use the SiWC Logo from Assets folder
- Fonts: use same fonts as in the documentation: Heavitas and Barlow Condensed (fonts are provided in the assets)
- Sheepies: are fun! You can see them in several packages and in the documentation. We would like to see them integrated in the side design as well (either static, or animated, up to you)
Size
- Desktop Application: 1440px width x height as much as needed
Responsive Mobile Application: 1242 px width x 2208 px height (Iphone 6,7,8)OUT OF SCOPE
Stock Photos and Icons
- Photos are allowed only from free websites (Public Domain Archive, Unsplash, Pexels)
- Icons: you can use icons as allowed by Topcoder Policy
- Fonts: use only the fonts provided in the Assets file: Heavitas and Barlow Condensed
Marvel Prototype
- Upload your screens to Marvel App.
- Send your marvel app request to keyla. blue1@gmail.com or ask in the forums
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
Final Deliverables
- An archive called Source.zip file to include:
- All original source files created in Sketch, XD, Photoshop, AI, Figma.
- An archive called Submission.zip file to include:
- All your design files in PNG or JPG format
- MarvelApp link for review and to provide feedback
- Your declaration files to include any notes about fonts usage, photo and icon declaration and link to your Marvel project
- Create a JPG preview file of 1024 x 1024 px
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.