Smooth Scroll
This will hide itself!
This will hide itself!
Platform
Website
Software Tools
Figma
Design Framework
Atomic design principles
Industry
Marketing, Advertising
Role
Product Designer, Researcher
Skills
Visual design, Prototyping
NEBULA NEXUS
[Case Study 02 - Full Services Agency]
24 February 2024
PROJECT OVERVIEW
01
ABOUT
01
The original Nebula Nexus website, while ambitious in scope, suffered from a lack of cohesion and clarity that ultimately hindered its effectiveness. The site's architecture was convoluted, making navigation challenging for users. This complexity, coupled with an outdated visual design, failed to engage visitors, resulting in low traffic and poor conversion rates. The website did not reflect the innovative spirit or the comprehensive range of services offered by Nebula Nexus, thus failing to capture the essence of the brand and its market positioning.
PROBLEM
02
Nebula Nexus faced significant online presence challenges, including complex site navigation, an outdated design that failed to reflect its innovative services, low user engagement and conversion rates, and an ineffective showcase of its comprehensive offerings. These issues highlighted the critical need for a website overhaul to improve usability, modernize the visual identity, and more accurately represent the agency's full-service capabilities, aiming to reposition Nebula Nexus as a leader in the digital and creative industry by prioritizing a user-centric design approach.
SOLUTION
03
Recognizing the pivotal role of user-centric design, we embarked on a comprehensive redesign process, starting with in-depth user research. This initial phase was crucial for understanding the pain points, preferences, and behaviors of Nebula Nexus's diverse audience. Our findings informed every aspect of the redesign, from streamlining the site architecture for ease of navigation to choosing a vibrant, engaging color scheme that captured the brand's innovative essence.
OUTCOME
04
The redesigned Nebula Nexus website represents a significant leap forward in terms of both form and function. By placing the user at the heart of the design process, we were able to create a digital platform that not only meets the needs of its audience but also embodies the brand's forward-thinking ethos. The new website is positioned to drive increased traffic, engage users more effectively, and ultimately boost sales and conversions, marking a new chapter in Nebula Nexus's online presence.
RESEARCH PLAN
+ INTERVIEWS
02
THE INTERVIEW PROCESS STARTS WITH CREATING A RESEARCH PLAN.
THIS OUTLINES 7 KEY COMPONENTS:
PROJECT BACKGROUNDS/PROBLEM
RESEARCH GOALS
RESEARCH OBJECTIVES
RESEARCH QUESTIONS
METHODOLOGIES
HYPOTHESIS
TIMELINE
PROJECT BACKGROUNDS/PROBLEM
01
Nebula Nexus's current website lacks clarity, usability, and an updated design, which has led to low engagement and poor conversion rates. The site fails to effectively communicate the agency's innovative services and value proposition, impacting its ability to attract and retain clients.
RESEARCH GOALS
02
The primary goal is to understand the user experience of the current website, identify key areas for improvement, and gather insights on user expectations for a digital agency’s online presence.
RESEARCH OBJECTIVES
03
To evaluate the current perception of Nebula Nexus's website among the target audience.
To identify the usability issues and content gaps in the existing website.
To understand the features and information most valued by users on a digital agency’s website.
RESEARCH QUESTIONS
04
How do users perceive the current design and usability of the Nebula Nexus website?
What features or information are users unable to find or use effectively on the current website?
What are the key expectations of users from a digital agency’s website in terms of content, functionality, and design?
METHODOLOGIES
05
User Interviews: Conduct in-depth interviews with a diverse group of target audience members to gather qualitative insights into their experiences and expectations.
Competitive Analysis: Analyze competitor websites to identify best practices and opportunities for differentiation.
Heuristic Evaluation: Perform a heuristic evaluation of the current website to identify usability issues based on established usability principles.
HYPOTHESIS
06
We hypothesize that the current website's usability issues and outdated design significantly hinder user engagement and conversion rates. By addressing these issues and aligning the website more closely with user expectations, we can significantly improve the user experience, thereby increasing engagement and conversions.
TIMELINE
07
Week 1-2: Recruitment and preparation for user interviews.
Week 3-4: Conduct user interviews.
Week 5: Perform competitive analysis and heuristic evaluation.
Week 6: Analyze data from interviews, competitive analysis, and heuristic evaluation.
Week 7: Synthesize findings and develop recommendations for the redesign.
Week 8: Present findings and recommendations to stakeholders.
USER PERSONA
02-A
Name
Emily Thomson
Age
32
Location
London UK
Occupation Small Business Owner
Emily is the driven owner of a boutique interior design business. With a flair for design but limited time to dive into the digital world, she seeks a reliable agency that can manage her business's digital marketing, web design, and tech needs. Emily's goal is to expand her online presence and customer base without losing focus on her passion for interior design.
"I'm looking for a digital partner that makes the complex simple and helps my business shine online."
GOALS AND NEEDS
Seeks a full-service agency offering comprehensive digital solutions tailored to her business's unique aesthetic and objectives.
Values clear, jargon-free communication about how services can drive her business forward.
Needs to see evidence of success with similar businesses to feel confident in her choice of agency.
PAINS AND FEARS
Overwhelmed by the demands of managing a digital presence on top of her business, fearing it might detract from her primary focus.
Concerned about finding an agency that understands her niche market and can deliver personalized, effective solutions.
Worried about investing in digital services without a clear picture of the return on investment.
USER MOTIVATIONS
Expand Business Reach
Preserve Passion for Design
Establish a Distinct Brand Identity
USER NEEDS
Tailored Digital Marketing Solutions
Clear Communication
Evidence of Agency Success
research key findings
02-B
KEY INSIGHTS
High Demand for Personalized Services: Small business owners, particularly in creative sectors, seek digital marketing and web design services tailored to their unique brand identity and goals, underscoring the importance of customization over generic solutions.
Clear, Jargon-Free Communication: Effective, straightforward communication from agencies, free of technical jargon, is crucial for business owners to make informed decisions and feel confident in their digital strategy choices.
Evidence of Success and ROI Concerns: Prospective clients prioritize visible proof of an agency's success with similar businesses, alongside clear expectations of ROI, to ensure their investment in digital services will drive measurable business growth.
IDEATION
03
A BUILDING NEEDS A FLOOR PLAN BEFORES IT'S BUILT. THAT'S WHAT I
CONSIDER THIS PAHSE OF THE PROJECT TO BE. THIS STEP BUILDS A STURDY
FOUNDATION FOR THE REST OF THE PROJECT TO BUILD OFF OF.
THIS OUTLINES 5 KEY COMPONENTS:
CARD SORTING
SITEMAP
TASK FLOW
USER FLOW
WIREFRAMING
CARDSORTING EXERCISE
01
The budget for this project was pretty small, to organise and create the card sorting exercise, I arranged and collected feedback from some volunteers and had them sort 20 cards into the hybrid categorisations.
These cards were then categorized based on user expectations and preferences revealed through the hypothetical card sorting exercise. Here are the 20 cards and how they contributed to the content organization across the three main website pages
These cards were then categorized based on user expectations and preferences revealed through the hypothetical card sorting exercise. Here are the 20 cards and how they contributed to the content organization across the three main website pages
Digital Marketing
Web Design
SEO Services
Social Media Management
Branding & Identity
Content Creation
E-commerce Solutions
Mobile App Development
User Experience (UX) Design
User Interface (UI) Design
Analytics & Reporting
Email Marketing
Paid Advertising
Creative Campaigns
Technology Consulting
Cloud Services
Cybersecurity Solutions
Project Management
Customer Support
Training & Workshops
ABOUT US
COUNT: 03
Branding and Identity
95%
Project management
90%
Training and Workshops
85%
CONTACT US
COUNT: 01
Customer support
100%
PRODUCTS AND SERVICES
COUNT: 16
DIgital Marketing
100%
Web Design
87%
User Interface Design
95%
SEO Services
95%
Content Creation
93%
Social Media Management
95%
Email Marketing
95%
E-Commerce Solutions
95%
Mobile App Development
100%
User Experience Design (UED)
89%
Analytics and Reporting
90%
Paid Advertising
91%
Technology Consulting
96%
Cloud Services
98%
Cybersecurity Solutions
85%
Creative Campaigns
100%
SITEMAP
02
Nebula Nexus Website Sitemap
├── Home
├── About Us
│ ├── Company Background and Mission (Branding & Identity)
│ ├── Our Team and Culture (Project Management, Training & Workshops)
│ └── Success Stories
├── Products and Services
│ ├── Digital Marketing Services
│ │ ├── SEO Services
│ │ ├── Social Media Management
│ │ ├── Email Marketing
│ │ └── Paid Advertising
│ ├── Design and Development
│ │ ├── Web Design
│ │ ├── User Interface (UI) Design
│ │ ├── User Experience (UX) Design
│ │ └── Mobile App Development
│ ├── E-commerce Solutions
│ ├── Content Creation
│ ├── Analytics & Reporting
│ ├── Creative Campaigns
│ ├── Technology Consulting
│ │ ├── Cloud Services
│ │ └── Cybersecurity Solutions
│ └── Support and Training
│ └── Customer Support (also linked to Contact Us)
└── Contact Us
├── Get in Touch
└── Customer Support
This sitemap provides a high-level overview of the Nebula Nexus website's structure, organizing content into intuitive sections that reflect user preferences and the outcomes of the card sorting exercise. Each main category ("About Us," "Products and Services," "Contact Us") contains subcategories or pages that detail the specific offerings and aspects of Nebula Nexus, ensuring users can navigate the site easily and find the information or services they need efficiently.
TASK ANALYSIS
03
Identifying Potential Digital Agencies
Evaluate Agency Credentials
Understand Service Offerings
Assess Communication and Support
Initiate Contact with the Agency
Schedule a Consultation or Meeting
Make a Decision
Engage Services
By following these tasks, Emily aims to partner with a digital agency like Nebula Nexus that understands her business's unique needs and can offer tailored solutions. This partnership should allow her to enhance her online presence and reach her business goals while still focusing on her passion for interior design.
USER FLOW
04
Open Site
NAVIGATING TO SERVICERS
EXPLORING DIGITAL MARKETING SERVICES
VIEWING SUCCESS STORIES
DECIDING TO BOOK A SERVICE
INITIATING BOOKING
COMPLETING THE BOOKING FORM
CONFIRMATION AND NEXT STEPS
This user flow outlines a straightforward, goal-oriented path for a user like emily, from initial interest in digital marketing services to successfully booking a consultation, ensuring a seamless and satisfying experience on the Nebula Nexus website.
WIREFRAMING
05
Wireframing serves as the architectural blueprint for the Nebula Nexus website, providing a visual guide that outlines the skeletal structure of the site's pages. This crucial step in the design process focuses on layout, content placement, and functionality, without the distraction of design elements like colors and typography. For Nebula Nexus, wireframing begins with defining key components such as the navigation bar, which includes links to "Home," "About Us," "Products and Services," and "Contact Us" pages, ensuring users like Emily and Alex can intuitively navigate through the site.
Each wireframe is crafted with the user's journey in mind, from landing on the homepage to completing actions such as reading about the company's ethos, exploring service offerings, or booking a consultation. The homepage wireframe highlights the agency's unique selling points and provides clear pathways to explore services or contact the agency directly. The "Products and Services" page wireframe organizes services into easily digestible sections, with CTAs encouraging deeper engagement. Meanwhile, the "Contact Us" page is designed for simplicity, focusing on form fields and contact information to facilitate easy communication.
Wireframing for Nebula Nexus not only ensures that the website will be user-friendly and aligned with the goals of potential clients but also lays a solid foundation for the visual design phase. It allows for the early identification and resolution of usability issues, ensuring that the final design is both aesthetically pleasing and functionally robust, ready to meet the needs of its users and drive the agency's online success.
PROTOTYPE
04
THIS IS WHERE THE PROJECT COMES TO LIFE. IT'S THE MOST EXCITING
PHASE BECAUSE IT'S WHERE RESEARCH AND DESIGN MEET. FACTS AND
IMAGINATION LIVE TOGETHER TO MAKE A PRODUCT BECOME A REALITY
THIS OUTLINES 4 KEY COMPONENTS:
BRANDING
UI KIT
DESIGN SCREENS
HIGH-FIDELITY PROTOYPE
BRANDING - MOODBOARD
01
In the UI kit section dedicated to mood boards, we curate a visual inspiration space that sets the tone and style for Nebula Nexus's digital presence. This section is a collection of carefully selected images, color palettes, typography, interface elements, and design inspirations that embody the innovative and user-friendly ethos of Nebula Nexus. It serves as a foundational guide for designers and developers, ensuring consistency and coherence across all digital products and services offered by the agency.
The mood board is designed with Emily Thompson's preferences in mind, reflecting a blend of modern aesthetics with clear, intuitive navigation paths. It incorporates vibrant colors like #EB42D0 to capture attention and stimulate creativity, balanced with neutral tones for clarity and professionalism. Typography choices are geared towards readability and sophistication, supporting jargon-free communication that Emily values. Visual elements and layouts emphasize simplicity and elegance, mirroring the seamless user experience that clients like Emily seek when engaging with digital platforms.
This mood board section in the UI kit not only inspires the design team but also ensures that every digital solution Nebula Nexus develops resonates with the target audience's expectations and the brand's unique identity. It's a crucial step in translating the agency's vision into tangible designs that captivate and convert potential clients.
UI KIT
02
INTER
HELVETICA
128 BLACK
18 REGULAR
90 BOLD
64 REGULAR
AA
AA
BLACK
02-A
#
08090a
HOT MAGENTA
02-B
#
EB42D0
SEASALT
02-C
#
F4F7F5
DESIGN SCREENS
03
HIGH-FIDELITY PROTOTYPE
CHECK OUT
THE PROTOTYPE
PERSONAL
AND UNIQUE DESIGN
SOLUTIONS FOR
EVERY CLIENT
I strive to create intuitive, elegant user experiences
and interfaces that enhance engagement, simplify
complexity, and elevate brands in a digital-first
world.
©2024
JOSEPH
SOH
1°17′N 103°50′E
I AM BASED IN SINGAPORE
DESIGNER
