the WHAT

Blundell is the largest independent seafood supplier in Western Canada. I was engaged to redesign and develop their outdated website using the copy they had previously, creating something modern and easy to navigate.

the WHY

Blundell reached out to me because they did not have the expertise in-house to evolve and improve their current website in-line with digital trends. The company’s primary clients are from the hospitality industry and Blundell wanted to attract new customers with an online presence that reflects the high standard of their business.

the PROCESS

While many clients may not ask for an improved user experience, I believe that to ensure Blundell’s new website met their needs, now and ongoing, it was essential for me to focus equally on both the look and feel as well as UX.

DISCOVERY

1. Reviewing their old site

While reviewing their current website I found that:

• The visual design was outdated

• The content was text heavy

• The site had a complex structure

2. Project requirements meeting

The client and I discussed the scope of the work during an initial phone meeting, deciding on the following:

• That their new website should have a modern, professional and clean look overall

• Adding a button to their new online order form to improve their customer’s experience

• Improving the responsiveness of their website across all devices

Following the meeting, I sent out a list of questions regarding their target audience, competitors, and best selling products in order to better inform my design and development process.

3. User interviews

The business has a wide range of clients including chefs and restaurant owners. I interviewed them to better understand their needs such as the information present, the website’s functionality and which devices they use. The feedback I received directly informed the design and UX, enabling me to deliver a website to the client that meets their target audience’s needs.

4. Competitor research

I visited the websites of Blundell’s direct competitors. Based on this research and the feedback from those I interviewed I prioritised the following elements:

• A modern, professional and clean look

• Clear navigation and easy access to the online order link as well as the product list

• Easy to update product list for the client 

• Improved readability for all users, including those who are visually impaired

IDEATION

During the ideation process I start by:

1. Redesigning the site structure

I started by using card sorting to decide the hierarchy of information and the architecture of the site. This was particularly important for this project because the client had already written their copy but the layout had to be changed dramatically to improve readability.

2. Low-fidelity wireframes

I used icons and UI card designs to make the content easily scannable, as well as larger margins, increased line-height and more whitespace to balance the text-heavy content and improve legibility.

The company has an extensive list of products. I decided to keep the clickable pdf buttons to enable the client to update these lists with ease.

3. Medium-fidelity wireframes

Once the structure and functionality was decided I moved on to creating three designs to communicate different versions of what a modern, professional and clean website could look like. 

 4. High-fidelity wireframes