Soup Surreal
Website Redesign
​
If you’ve ever spent some time in Stratford, Ontario you have probably heard of Soup Surreal. This restaurant is not only a local favourite but a favourite among the Waterloo Stratford campus. However with their long menu and an abundant amount of info, their website does not match up to showcase their amazing soups.
The Problem
In our Digital Imaging for Online Application class, we were tasked to redesign and code a new potential website for Soup Surreal using HTML and CSS that would not only be more visually appealing but had strong web navigation.
My Role
During this project, I worked collaboratively in a team of five. I held the role of the HTML lead where I was tasked to ensure the execution on the HTML side of the project.
​
Meet my teammates:
​
Project Lead: Julia Guida
UX Lead: Maddie Stymiest
HTML Lead: Boyun Leung
CSS Lead: Nancy Tran
Research and Strategic Analysis
We began our process by reviewing their current website and identifying possible user pain points. With our initial observations, we noted some key points that we could easily improve on.
​
- The home page is unnecessarily text-heavy making it hard to find the key information that people come looking for
- They use full pictures for the background and colours in situations that can cause strain on the eyes
- There are two different menu pages with both repeating information
The current landing page is very text heavy making it hard to locate important information.
One of the two menus holding repeating information.
Items in the footer could be improved for better user navigation. The bright colours are straining to see.
The current landing page is very text heavy making it hard to locate important information.
The Current/Original Website
We followed up by performing a competitor analysis. We researched the state of other competitor’s websites to understand their strengths so that we could bring that into our redesign. In order to reorganize their current website, we created a much simpler site map with only the pages that we felt were necessary. This included combining both menus into one to solve that issue.
​
To read our team’s full strategic analysis click here.
Brainstorming and Conceptualizing
We began the brainstorming process in deciding what our new website should look like by firstly, individually creating our own low fidelity and mockups.
​
For my individual wireframes, I decided to solve the issues stated above by:
​
- Removing most of the text that I found was unnecessary or repetitive. This allowed for the most important information to be highlighted such as creating a clear spot for the location
- Creating more white space by using images to create supporting visuals rather than the main background.
​
We felt it best for us to each illustrate our own ideas to see what parts we like best and pull aspects of each of our designs into the final one.
My low-fidelity wireframes created on Balsamiq
My quick mockups created on Photoshop
For our final mockup, we took concepts from each of our wireframes. We collectively decided on using a green primary colour to reflect a “fresh” theme. We decided to still use large photos but as a top header and we re-organized the information into appropriate sections.
​
During this process, we encountered another issue where we noticed the business had multiple different logos. We decided to cut the confusion by choosing to use just one of their logos that best fit the design we were working with.
Collective Final Mockup
Final Process
During this process, I worked closely with The CSS Lead to code our final design as shown. As this was one of the first websites I have ever coded and the first time I worked on code in collaboration with other people it was a challenging but insightful process. One of the lessons I learned during this was the importance of keeping the code organized so that we could easily transfer it between people.
Final Coded Website
Our final website improved usability by creating a clean, easy to read design that promoted their values of being fresh, local, and delicious. We scrapped the hard to understand tab titles with a clear navigation bar and condensed windows such as “Surreal Soups” and “Creative Cuisine” into one menu tab.
Moving Forward
Reflecting back, I wasn’t fully satisfied with our final design of the website. Due to our time restraint, we weren’t able to flush out and explore more design options. As an individual challenge, I decided to explore another design route and create a high fidelity design of what I would do differently.
Sketching Alternative Design Ideas
Alternative High Fidelity Design created in Figma
Although I initially liked the idea of using green as the primary colour, I decided to go back to a warm colour that I felt better reflected the warmth and coziness I would expect from a soup restaurant. I also liked the idea of playing around with the daily changing menu by showcasing those soups on the landing page. Finally, I designed a much simpler and modern logo.
Learnings
My biggest takeaway from this project is the importance of creating mockups before starting to code. As a visual person, this was extremely important. Code can be stubborn and it doesn’t always do what you expect it to do. Knowing what the final outcome should look like makes it easier to figure out how to make something work. We also realized that sometimes we needed to be clever and find alternative ways to do something. When one way doesn't work the way we expect it the best solution may be to just find an alternative path.
​
Overall I greatly appreciated this experience. Coding has always seemed intimidating and something that you do by yourself. This project has taught me differently. When you break down the process and communicate with your team you can create something you never knew you could do.