Case Study

Here are some of the work I have done for my clients. Simply click on the desired case study thumbnails below to view them.

Redesigning Noshu website for 
a multi region experience

PROJECT F
championing women
in technology

THRESHOLD
(WATCH THIS SPACE)

Castaway
(WATCH THIS SPACE)

Redesigning Noshu website for 
a multi region experience



Noshu is an Australian-owned innovative foods company committed to developing low sugar products that enhance your life in a positively delicious and healthier way. They are looking to redesign their website as a multi-site to serve multiple regions as they seek to expand their brand internationally to New Zealand, United States and United Kingdom. We were also tasked to conduct User experience research focusing on Information architecture, user journey and site performance with the goal to reduce bounce rate and increase traffic flow to their website.

Team Member + Roles

Jeremy Blassan
- UX research & UI Designer

Tools

Teams, Google Forms(Survey), Figjam, Figma, Google Docs, Adobe Suits

Timeline

8 weeks (Jan-Feb 2022)

Challenges/ Problems Statement

The current site adopted a simplistic approach. However, the website was previously built without having the user in mind. It serves predominantly as a catalogue site with content placement that does not make sense. The information architecture need to be redesigned as their user finds it hard to navigate to the intended content.
 The need to redesign the website arises when Noshu decided to expand internationally. This opened an opportunity to analyse how we can optimise the user engagement with the brand, product and website. The current user’s main issue is difficulty navigating the site while they are up and about. Understanding the user’s behaviour of when, why and how they interact with the site will determine how we restructure the information architecture and how we redesign the website.

"How might we increase traffic and users interaction with Noshu's website so that there is a greater awareness of their brand as they expand internationally."

Research/ Analysis

We conducted both qualitative and quantitative research in order to better understand our user needs and their pain points. This research includes:

Online Survey

The survey will inform our IA process which includes 2 demographic questions, 4 health and habits questions, 8 website habitual and preference questions and 4 navigation questions.

1:1 Interviews


We interviewed 12 candidates based on Noshu’s 3 target audiences: Health Needs, Health Advocates and Health Conscious Parents. We also screened them based on their country of origin; AU, NZ, UK and US to ensure we had perspective from the markets we are expanding to.

Affinity Mapping


After we identified insights from the online survey and 1:1 interview, we combined them in our next process – Affinity Mapping, where we cluster the data into themes  to drive our direction.

Card Sorting


Through our insights, we then conducted card sorting and proposed a new IA.

Google Analytics


We also analyse data from the Google Analytics in order to understand the current user behaviour and validate some of our earlier assumptions.

Key insights

From the research sessions conducted over 3 weeks, there were 4 identified key insights which will inform our next step in redesigning Noshu's website.

1. The Importance of Mobile

Our research identified that the majority of users primarily use mobile (iPhones in particular) to browse websites, as it provides quick and convenient access to search for information. This insight led us to a mobile first design.

"I'm definitely on my phone more and a lot of times when i'm browsing, I'm usually commuting standing in front of the shops deciding what to buy."
‍Emily | 25 | UK

2. Cultural Nuances

Currently, there are users browsing the Noshu website from NZ, US and the UK which demonstrate existing interest. From our findings, here are some opportunities to address:

  • Surface different product list/navigation for different regions. 
  • The country selection settings need to be updated automatically. 
  • We also need to ensure our stockist integrations are localised. 
  • Localise the content by being aware of the cultural and regional trends.

3. Brand Credibility

As Noshu enter the new market space, we need to build credibility. When designing the multi region website, we should consider the points below:

  • Users feel that having a face to a brand adds a touch of humanity and trust.
  • Based on the GA, a total of 4,442 people visited Noshu’s website from a link in Instagram. This validates the need to use social media to drive users to our site.
  • Authors name and their qualification matters on blog page.
“Being able to see what ingredients healthbrands put into their products makes them more trustworthy.”
Camilla | AU | 31 | F

4. Navigation

Our findings from surveys, interviews and GA shows that:

  • Built-in search functionality is important.
  • Clear categorisation of products will ease users confusion.
  • 47.1% of users click outbound to a supermarket despite not knowing they can click through the retailer sites from the logo displayed. This proof user’s desire to know where to purchase the product. Therefore, the retailer’s logo need to look and feel more like a button
  • Feedback, social media links, contact us, and subscribe button need to be constantly available.
  • First time users who visited the website would like to know what/who is Noshu and what products(s) do they offer.

Our approach

Here are some of the main approaches we adopted into the Noshu website, which is driven by the 4 key research insights. Over the following 5 weeks, we implemented several UI methodologies (Crazy 8's, wireframing, prototyping, and A/B testing, several iterations from our learnings and designing a Design System) before handing it over to the development team to develop.

1. The Importance of Mobile

  • We also adopt PWA (Progressive Web App) approach which allows the website to look and behave more like native apps. This approach gives us the opportunity to design functionalities specifically for mobile users and serve it to them at an earlier stage.
  • Majority of our users view the website through iPhone. Taking that into account, we positioned our navigation bar at the bottom of the page to be in line with the new Safari standard where the search bar is now located at the bottom of the page for accessibility purposes.

2. Cultural Nuances

  • We surface different product list/navigation for different regions based on their preferences that comes from our interview findings. i.e Australians prefer Bars and Donuts while New Zealanders prefer Cake mix.
  • The country selection will update automatically based on the IP address.
  • Local stockist will be shown based on the various regions. i.e Woolworths, Coles and IGA will be shown in AU where as Countdown and PAK'nSAVE will be shown in NZ.

3. Brand Credibility

  • Showcase the founder (Rachel Bajada) on the about us page with a dedicated section.
  • Include authors name and qualification in articles posted on the blog section.
  • Include product description, ingredients and health information for every product – consider how we write the description to include taste.
  • Enforce the Social Media presence by having it on every page prior to the footer.

4. Navigation

  • Built-in search functionality made available on all main pages.
  • On the landing page, we have 2 clear sections - "Ready to Eat" and "Ready to Make" which allows users to easily choose the desired categories. Positioning of the 2 categories went through a couple of A/B testing and the side by side option was the preferred setup.
  • Retailer’s logo now nested in an interactive subtle rotating stamp which makes it look clickable without resembling the other buttons on the page.
  • Feedback, social media links, contact us, and subscribe button is now available on all page footers. Users commented that this helps them share interesting news articles and/or products easily.
  • Landing page now showcases top products,  2 main product categories followed by about us section.

FInal design

NEXT STeps

The Noshu website for Australia has been launched in September 2022. Click here to view the page https://noshu.com/au/ . The development team is currently building the websites for other three regions – NZ, US and UK.

OTHER CASE STUDY

PROJECT F - championing women in technology

Founded in January 2019, Project F runs a B2B accreditation program for organisations to achieve a gender-balanced workplace in technology. They also offer membership to women in the technology space, linking them together through their community platform. As they grow their business, Project F is looking to redesign their website with a laser focus on - clarity in their program offerings and ensuring that their member portal add values to their individual and corporate members.

Team Member + Roles

Jodie Moule - Service Designer
Jeremy Blassan - UI Designer

Tools

Zoom, Teams, Figma, Google Docs, Adobe Creative Suits

Timeline

6 weeks (Apr-May 2022)

Challenges/ Problems Statement

Some of the main challenges Project F have with their current website includes, no clear steps and description to the various stages of the programs they are offering. Besides the confusing naming convention and CTA, there is no clear direction on what they wanted the website to do as they currently offer gender equality programs for organisations, event bookings, mentoring platform and even an e-commerce shop selling merchandise. Not much thought was poured into the purpose and information architecture when the website was built several years ago in Squarespace.

Two main concerns demonstrated by potential clients triggered the need for change. They are listed below:

These two concerns resulted in the need to rebrand and restructure their current websites to include both Public Facing site and a Member Portal which will allows them to be more technology enable and scalable in the future.

"How might we better understand Project F client’s experience for both current and prospective customers so that, we can better meet their needs and expectations, and minimise any pain points through updates to their current product offering and website"

Research/Analysis

We conducted both qualitative and quantitative research in order to better understand our user needs and their pain points. This research includes:

1:1 Interviews

We interviewed 37 candidates over a period of 3 weeks with 14 from organisations, 8 prospective customers, 10 Project F customers and 5 website review teams where we identified 4 main personas (business leaders, HR professionals, DEI drivers and employees).

Customer Journey


This section highlights the main steps in the customer journey - Before / During / After - Project F engagement. Several pain points were identified during this process and will be addressed in our key insights.

Heuristic Evaluation

To understand how we could improve the current website, we identified several opportunities of improvement when analysing the current site.

Card Sorting


Through our insights, we then conducted card sorting and proposed a new IA

Google Analytics


We also analyse data from the Google Analytics in order to understand the current user behaviour and validate some of our earlier assumptions.

Key insights

We have compiled and analyse all of our findings and identified 4 key insights that will inform the rebuild of Project F website.

1. Clarity in processes

Project F does not have a clearly articulated process that showcases what they do, the steps they take, and the key activities and deliverables for each stage of that journey.

“I just want to see the things that they will do at each stage so I can be clear what I need to do and what others need to do…”"
‍HR department/DEI Driver

2. Client want to tap into Project F resources and influence

Companies want Project F to help them win the war on talent with access to their network, and meet their diversity KPIs, so they can talk about it.

  • Want to be perceived to have better cultures and values than their competition
  • Branding and badging matter. They want to have a badge that says they focus on DEI, and figures they can report to shareholders and funders

3. Solidifying the brand

Reinforce the strength of the Project F brand instead of diluting it. Too many logo for various programs i.e. Program 50/50, F Factor, Help a Girl Out which ultimately lead to client misinterpretation and confusion.

  • Everything should hang off one strong brand. There are so many different offers within Project F that it is hard to know what brand is the dominant.
  • We need to stop diluting the offer with too many options that ultimately lead to client misinterpretation and confusion.

4. Member Portal reinforcement

The power of the Member Portal is missed by most of the clients that have access. More guidance and work is needed in this area to highlight the value within. This is a missed opportunity .

  • Unfortunately, no one reads it. We need to reintroduce the Portal, linking the key content areas to the key steps in our process, and then helping them understand when to use these useful artefacts, while simultaneously rolling out the Roadmap with them - or letting them self-guide.
  • Ideally, as noted, the dashboard will be a personalised experience, that showcases the journey of that organisation.
“It would be good to have the time to look at it. I’m not taking advantage of the stuff in there - I just want easy to send out reports that save me doing the work…”
DEI Driver

Our Approach

We have compiled and analyse all of our findings and identified 4 key insights that will inform the rebuild of Project F website.

1. Clarity in processes

  • On the landing page, we have incorporated Our Process section in a clear and simple visual representation. There is also a click through button to Our Process page which has a more detailed - step-by-step section of every process.
  • We have updated the Health check function to a simpler form called Pulse check which acts as lead generator. This will ensure the user does not drop out due to any inability to answer the long questions found in the previous Health check form.
  • The consistent use of CTA languages across the website will avoid confusion.
  • With Pulse Check being the first point of contact, it is now served early in the landing page with a click through to the form with only 6 fields to complete before submission.

2. Client want to tap into Project F resources and influence

  • We also added Work With Our Partners section in the Individual Member Portal to promote job vacancy within the Project F community.
  • Accreditation Badges is now added into the Organisation Member Portal Roadmap which will allow easy access to upload them into LinkedIn or other Media portal.
  • Project F resources are easily accessible in the Member Portal and can be filtered based on types or through the search functionality.

3. Solidifying the brand

  • Project F brand is the main brand shown on the website with the programs and other initiative like the F Factor or Program 50/50 carrying the same branding/look and feel as the main brand.
  • The Member Portal also host a downloadable Media Kit which contains a key introductory write up, logo and branding for PR purposes.

4. Member Portal reinforcement

  • There are 2 type of Member Portal - Individual and Organisations Member Portal.
  • The Organisation Member Portal has a roadmap on the first section. The roadmap can be viewed as a timeline which will help the user understand which part of the program they are currently at.
  • The roadmap can also be viewed in a "list view" if the user chooses to do so for reporting or printing purposes.
  • The Individual Member Portal serves as a resource page, a job listing page, community page (mentor/mentee) and also a page to showcase Project F next events.

NEXT STeps

The Project F website has been launched in November 2022. Click here to view the page https://www.projectf.com.au. We have also added Clarity in the backend to see how the website performs.

other CASE STUDY

Let's Talk

Thanks again for visiting and if you like what you see, do email me for a copy of my resume or to organise a phone chat. I can be contacted via my email or LinkedIn link below.

jeremyblassan@gmail.com
© 2023 Jeremy Blassan. All rights reserved.