In 2019, Granite City Food & Brewery set out to rebrand their company from the ground up. The total scope of the rebrand included a completely updated brand guidelines featuring a new logo, updated color palette and font library, a new restaurant menu design, a total responsive website redesign, and a mobile app redesign.
Our team of two was tasked with leading the rebranding effort throughout the research, concept drafting, design and implementation.
Tools: Adobe Photoshop, Adobe Illustrator, Adobe Xd, Wordpress, Powerpoint, Excel
Methods: Wireframes, User Research, Scenarios, Presentation to Stakeholders, Interaction Design
design CHALLENGE
On the right is Granite City's homepage prior to the rebranding. One frequent comment heard from management was that the restaurant's website conveyed the feeling of a dark, sophisticated dinner club that serves beer, whereas the restaurant fit better into the category of a modern, casual brewery with fresh made chef created food. We analyzed the current website against competitor's websites to map out key features, design styles and UI tactics that could benefit Granite City's new website. We identified the main goals of the web redesign as to create a bright and engaging homepage by highlighting current specials, online ordering functionality, event spaces, and the text-to-join special offer SMS club.
RESEARCH
We began our research with a comprehensive competitive analysis to gain strategic insight and identify the current industry trends. We used our findings to develop a set of goals for the finished website to accomplish, and a plan of action to reach those goals.
After gleaning insight from our competitors, we took our findings back to the current website and created user personas and mapped user flows to highlight pain points with the structure of the current website, and identified design strategies that competitors used to alleviate those pain points for a better customer experience.
CONCEPT
Armed with knowledge from our research, we set into developing a concept for the brand redesign. We started with forming a new brighter color palette, with secondary and tertiary colors reserved for special use cases. Then, we developed a new logo lockup for the brand, along with an updated brand font library.
Once we had the new branding solidified, we began creating the concept for website. We began with creating page maps and layout sketches while considering the website goals we wanted to accomplish and the previous pain point we needed to solve. We then moved into developing basic low-fidelity wireframes, presented for management feedback, consulted with the development team, edited and then moved into mid-fidelity and high-fidelity wireframes.
IMPLEMENTATION
With the help of our development team, we took the high-fidelity wireframes and began coding the structure of the website. By looping in the development team early in the concept process we were able to minimize development timeline pushback by ensuring all website features were able to be coded within the project time constraints. Featured below is the final live version of the Granite City homepage.
IMPROVEMENT
Although it is easy to think you've crossed the finish line once the website redesign has been pushed live, the key to having the best product possible is to be continuously improving. After going live we tracked web analytics to gain insight on page time, customer action, KPI success rate, and traffic rates. We took this new data and compared it against data from the old website to identify which design changes were successful and which could be improved. We took that knowledge back to the drawing board to form a plan for future website enhancements.
