Spark

Marketing agency website revamp

Marketing agency website revamp

4 Weeks

4 Weeks

2023

2023

My Role

My Role

My Role

UX/UI Designer, Team Leader, Squarespace Designer, UX Researcher.

Client

Client

Client

Spark Creative Communications (Student-run marketing agency)

Team

Team

Team

1 x PM, 1 x UX Designer
2 x Graphic Designer,
1 x Marketing Coordinator

Tools

Tools

Tools

Figma, Miro, Adobe Illustrator, Squarespace, Otter.ai, Google Analytics.

Problem

Problem

Problem

Spark's old website failed to present its service offerings, confusing visitors, while weak storytelling resulted in low 29-second average user engagement, severely impacting business growth and brand perception.

Solution

Solution

Solution

This project focuses on two main things:

1. Making it easy for users to navigate with clear storytelling and direct calls to action.

2. Clarifying Spark's services to help customers and potential employees make faster decisions.

Impact

Impact

Impact

310% increase in average engagement time.
50% reduction in exit time.
125% increase in new user acquisition.

View Live Site

View Live Site

The Home Page

The Home Page

KEY FEATURES:

Service Buttons: Quickly understand and decide on services.

Project Summaries: Easy-to-read blocks explaining each service.

Grid Layout: Most information is in an easy-to-skim format.

Testimonials & Partners: Build trust with client reviews and partner logos.

KEY FEATURES:

Service Buttons: Quickly understand and decide on services.

Project Summaries: Easy-to-read blocks explaining each service.

Grid Layout: Most information is in an easy-to-skim format.

Testimonials & Partners: Build trust with client reviews and partner logos.

The Work Page

KEY FEATURES:
Image Grid: Visual project previews for quick ideas.
Project Details List: Easy-to-read, left-to-right format.

Project Carousel: Engaging navigation through projects.

Call to Action Buttons: Encourage decisions on every page.

The Services Page

The Services Page

KEY FEATURES:

Concise Service Descriptions: Understand each service provided by Spark easily.

Work Page Buttons: Navigate effortlessly to explore related work.

Call to Action Buttons: Make decisions faster with clear prompts.

KEY FEATURES:

Concise Service Descriptions: Understand each service provided by Spark easily.

Work Page Buttons: Navigate effortlessly to explore related work.

Call to Action Buttons: Make decisions faster with clear prompts.

My Design Process

My Design Process

The design process was iterative and included questions to explain the chosen approach. Please scroll down for a clear explanation of each step and the reasoning behind it.

Stakeholder Interviews

Stakeholder Interviews

Capturing business goals, user needs & technical constraints

At the first meeting, I concentrated on understanding users' and stakeholders' needs. Through targeted questions and my project management skills, I had insightful discussions. This in-depth UX research gave valuable insights for the project's start.

Learnings from multiple meetings:

1. Modernize and update the old website.
2. Focus on the user-friendliness of the website.
3. Storytelling is everything.
4. Customer Satisfaction and Trust building.

Interviews with 8 people including old clients, students, faculty, and future employees.

Interviews with 8 people including old clients, students, faculty, and future employees.

The Learning Outcomes after the interview:

  1. Primary Users: Potential customers and students.

  2. Navigation Issues: 5 out of 8 interviewees were confused about Spark's services.

  3. Text-Heavy: The old website loses user interest within 30 seconds.

  4. Outdated Projects: Showcased projects are old and not relatable.

Old Website

Old Website Vs

(Left Side)

(Left Side)

New Website

(Right Side)

(Right Side)

Analytics

Analytics

The Learning Outcomes from Google Analytics:

  1. Prioritize English, as most users prefer this language.

  2. Focus on desktop users, with mobile-friendly designs.

  3. Improve home page engagement to motivate users to explore other pages.

The Learning Outcomes from Google Analytics:

  1. Prioritize English, as most users prefer this language.

  2. Focus on desktop users, with mobile-friendly designs.

  3. Improve home page engagement to motivate users to explore other pages.

Card Sorting & Information Architecture

Card Sorting & Information Architecture

Card Sorting &
Information Architecture

Conducting card sorting sessions provided valuable insights into user perspectives and preferences, leading to iterative improvements in the Information Architecture (IA).

KEY TAKEAWAYS:

Always seek user feedback as what works for oneself may not work for others, highlighting the importance of incorporating user insights into design decisions.

Wireframes

Wireframes

The Learning Outcomes from Wireframes and Usability Testing

  1. Simplified services from 6-8 to 2-3 to reduce user overwhelm.

  2. Enhanced the Career Page with FAQs for better user insights.

  3. Added mission, vision, and values to convey the company's culture.

  4. Directly link services to their corresponding projects.

The Learning Outcomes from Wireframes and Usability Testing

  1. Simplified services from 6-8 to 2-3 to reduce user overwhelm.

  2. Enhanced the Career Page with FAQs for better user insights.

  3. Added mission, vision, and values to convey the company's culture.

  4. Directly link services to their corresponding projects.

The Impact

The Impact

The Impact

0

% increase in avg. engagement time

0

% decrease in exit rate

0

% increase in user acquisition