Salt
Redesigning Vancouver's leading food and cultural website
Salt is a fictional client based off the popular Scout magazine, Vancouver’s leading food and culture website. Their main objective is to ‘scout out’ and promote the things that make Vancouver such a sweet place to be. To celebrate their commitment to local food and culture, we were tasked to redesign their local guides section.
*This website redesign is a student design concept. It is no way supported or endorsed by Scout Magazine.
ROLE
Branding, UI Design
TOOLS
Sketch, Invision
DURATION
4 weeks
FEATURED IN
Challenge
Our client wanted to redesign the existing website to create an engaging experience exploring Vancouver’s food and drink eateries. Through our initial audit, the current website lacked intuitive and consistent information hierarchy.
The goal of the redesign is to simplify the navigational system while leveraging Salt as a curated and visually enticing experience.
Existing design of Scout’s landing page. © Scout Magazine
Research
Our demographic target are young professionals early 20s to late 30s looking to try something new and add some adventure in their daily lives. They are technologically savvy and used to having any and all information that they need right at their fingertips.
Art Direction
We wanted to showcase Salt’s curated content through bold colours, typographic hierarchy and visually compelling photography. Taking inspiration from the Pacific Northwest, our photographic treatment and colour palette reflects this moody and lush region through mute, earth tones with a pop of brighter hues.
Visual Art Direction & Colour Palette Moodboard
Lo-Fi Sketches
We wanted Salt to entice users into further exploring Vancouver’s local food and culture.
In our initial lo-fi sketches, we streamlined Salt’s layout and structure with an emphasis on concise and clearer headlines, a shorter footer as well as featuring content relevant to each page.
wireframe sketches
Salt’s Archives page has a wealth of posts full of diverse information, however, in our initial audit,
it was a challenge to distinguish their metadata. We optimized this page as a Search Results page and included the use of filters to sift through a vast amount of content such as tags, cuisine type, price range and distance.
Previously, Salt’s posts were lengthy and would take time to scroll through in order to view all of its contents, especially in their Top 10 features posts. To mitigate this, we truncated the content and included a summary list of all the 10 places, giving users the option of spending more or less time interacting with the content information.
Mid-Fi Wireframes & User Testing
After transferring our sketches to digital wireframes, we conducted usability tests with users from our target demographic group. We gave them the task of searching for a single post and asked them to think aloud as they completed the process.
Using our heuristic analysis and results from the usability testing, we identified some frequent issues in our initial design such as vague link and button names, which were addressed by renaming them in our final design.
Mid-fi wireframe layouts
UI Style Guide
UI Style Guide
Prototype
Taking the feedback received from our usability testing, we implemented changes into our final prototype. In our Top 10 page, we implemented a descending countdown as a marketing strategy to have users spend more time going over each ranked item before reaching our top recommended eatery. We also made adjustments to the typographic overlay on photographic elements in our prototype.
Homepage
Search result archive
Top 10 article post
Mobile website screens
Outcome
The final design was well-received with our target audience, whom noted the improvement in the ease of navigation along with a clearer information hierarchy as well as the addition of filters in the archives search results page. We also had a special shoutout for our Error 404 page! (see if you can find it in our desktop prototype)