Blue Nova Digital
Multimedia design agency providing a broad range of design services to clients and businesses.
Project Duration
Jan - Apr 2019 (3 Months)
Role
UX Designer, UI Designer, UX Researcher
Category
B2B, B2C
Overview
Blue Nova Digital is a multimedia agency offering visual design services and template kits. The project aimed to improve the user experience for prospective clients, streamline inquiries, and boost engagement with the newly integrated template store.
Problems
Difficulty discovering the full range of services
Communication and collaboration gaps between clients and designers
Lack of clarity on policies, revisions, and timelines
Goals
Increase revenue via a template store
Improve returning customer inquiries
Boost engagement and customer satisfaction
Tools
Figma
Figma
Flowmapp
Adobe Photoshop
LucidChart
Wordpress
Elementor
Google Forms
Research & Insights
Competitive Analysis
SWOT evaluation of competitors revealed gaps in service discovery and usability.
User Research
Google Forms survey was utilized to gather user feedback
11 participants surveyed and interviewed.
45.5% said a broad showcase of past projects most influenced their choice of service.
36.4% valued website simplicity above all else.
Clients consistently cited confusion around design briefs and revision policies.
Key Insights
Users valued clarity in service selection and efficient communication channels.
Lack of clear information about revisions and returns caused friction.
Journey Maps
User journey maps were used to discover areas of specific phases, tasks, mindsets, pain points, and opportunities based on each participant. Opportunities recorded will be implemented towards the development of Blue Nova Digital.
Stakeholder Feedback
"This is extremely helpful insight to understand who our users are. Since we now understand user needs, mindset, and pain points, how can we stage this towards building out the site? What would you consider as logical next steps?"
"Reflecting on some of the business objectives, how can we define a success metric in the user journey?"
User Flows
I led the development of the user flow by leveraging insights gathered from our journey maps. This flow prioritizes users seeking information about logo designs directly from the homepage. Additional user flows are tailored to cater the diverse service options highlighted on the homepage.
Site Map
I strategically analyzed and structured the essential elements required for Blue Nova Digital's website using FlowMapp. This involved organizing information, key features, and functions to ensure optimal navigation for users.
Ideation
Low Fidelity Wireframes
I started the design process with low fidelity wireframes. This is typically how I begin ideating the necessary components and sections for the final design.
Mid Fidelity Wireframes
This stage serves as a progression from the initial low-fidelity sketches, allowing for a more detailed exploration of essential components and sections in preparation for the high fidelity.
Stakeholder Feedback
"We should make "Contact Us" a stand out CTA Button in the navigation header. We want to capture the attention of users and allow seamless access."
"For the "How It Works" section, strategize on 4 easy steps it takes to have a design created using us. Written content should be short and straight to the point."
High Fidelity Wireframes
The design process advanced into high-fidelity wireframes, building upon the foundation of mid-fidelity sketches. This stage marks a refined exploration, capturing intricate details of essential components and sections as part of the preparation for the final launch.
Usability Testing
User Insights
Three participants were used to test the direction of the website. The evaluation employed Jakob Nielsen's error severity rating scale, ranging from 0 (no usability problem) to 4 (usability catastrophe), providing a structured approach to prioritize identified issues.
The goal was to gain valuable insights into user interactions, pinpoint potential usability challenges, and determine the priority of improvements needed for an enhanced user experience.
Usability Test Report
Following the conclusion of usability testing, I compiled insights from the three participants to gain a deeper understanding of features that needed improvement. Analyzing user feedback revealed common friction points, primarily with task 2.
Task 2 highlighted the need to show the types of design service available in the request form. This would reduce the amount of effort required for the user to specify what type of design work they need.
Iterations were applied to the high-fidelity version, successfully addressing the issues identified by users during testing.
Design Doc
Created Design System
I aimed to have a consist design system for Blue Nova Digital. Below you will find colors, typography, buttons, iconography and other design components using Figma & Google Material Symbols. The design goal was aimed towards a simplistic user interface with minimal cognitive complexity.
Color System
Typography
Buttons
Icons
Final Iterations
Challenge 1
Stakeholders were presented with feedback from usability testing to gain their approval. There was a unanimous agreement to integrate the feedback obtained from the testing.
Dropdown menu to the inquiry form: This menu would list services such as logos, flyers, business cards, and more offered by Blue Nova Digital. The aim was to make it easier for users to select the service they need, and to help designers quickly identify the type of inquiry.
On the left you can view the before, while on the right you can view the updated version.
Stakeholder Feedback
"Usability testing revealed a lot from our initial high fidelity designs. We should include the drop down menu for service type. It would be a pain for the type of service to not be specified for both the user and business tracking."
"Usability testing revealed a lot from our initial high fidelity designs. We should include the drop down menu for service type. It would be a pain for the type of service to not be specified for both the user and business tracking."
Challenge 2
Further implementations were incorporated from usability testing. There was unanimous agreement to integrate the feedback obtained from the testing.
Navigation Bar Adjustment: User testing revealed the importance of clarity in the navigation bar, particularly renaming the "Templates" button to "Design Templates". This helps users easily understand the types of templates available on the website, reducing confusion and encouraging exploration.
Dedicated Design Templates Section: To optimize the effectiveness of the design template store, it was essential not only to mention the availability of templates in the hero section but also to create a dedicated section on the homepage. This allows for a focused presentation of benefits using design templates, targeting users with existing design knowledge.
On the left you can view the before, while on the right you can view the updated version.
Challenge 3
Creating a dedicated landing page to answer questions for our users.
FAQ Page: Ensuring clarity is a critical value for the business. The aim is to eliminate any uncertainties users might encounter during their site journey. Instead of addressing these questions on individual landing pages, it was crucial to establish a dedicated page that addresses high-priority inquiries, instilling confidence in our ability to meet client satisfaction.
Accessibility
AA Compliance
Before pushing the final high fidelity designs, a round of accessibility testing was administered. I aimed to create a smooth design system by carefully assessing how the chosen font colors and weights interacted with various background colors. To ensure accessibility for users with visual impairments, I conducted an accessibility test using accessible-colors.com, ensuring readability of elements remained consistent throughout their experience.
The goal was to be AA compliant for WCAG 2.0 accessibility standards.
Primary CTA Accessibility Test
Subheading Text Accessibility Test
Body Paragraph Text Accessibility Test
Project Results
Results after launch
Significant value was added by appealing to designers in need of design templates and customers who would inquire directly through the contact form.
Various metrics improved as a result of implementing the template store.
10%
Increase in returning customers (Month over month)
20%
Increase in client satisfaction (Month over month)
25%
Increase on homepage user engagement (Month over month)
42%
Revenue increase from template store (Year over year)
Key Takeaways
Transparency Matters
User feedback showed the need for the following.
Template use
Design policies
Revisions
Design timeline
Project updates.
Examples Help
Customers found it difficult to grasp the written explanation of their desired design.
Providing rough sketches helped streamline the workflow for a high-fidelity design project, reducing overall time and effort.
File Format Delivery
Some customers struggled to understand file formats like PNG, JPG, SVG, PSD, and AI.
By asking about their intended use, we provided the right format and educated them on how to optimize designs for future needs.
Learnings
Final Remarks
Once a final round of feedback between stakeholders were captured, iterations were delivered and implemented.
The project took 3 months to build out from Jan - Apr 2019.
What I could've done better
Although delivering the project was a success, I believe there were areas I could have done better.
I should have called for more user testing to discover other aspects of the site that would drive a better user experience. Although there was a ton of research initially, getting the product in the hands of users could have resulted in more innovative ideas.
Lessons I've learned
Bringing stakeholders into the design process and overall writing style for content.
Involving stakeholders in discussions about the significance of voice and tone earlier in the design process could have potentially altered the project's scope.
Other Projects
PlutoPay
SaaS
B2B
B2C
Digital Payment application that allows users to send, receive, and budget their money.
LearnHero
Education
Vocabulary learning application focused on users improving their knowledge in various industries.
Oko
HTML
CSS
JavaScript
Fully coded responsive website optimized for accessibility and performance across all devices.
Blue Nova Digital
Multimedia design agency providing a broad range of design services to clients and businesses.
Project Duration
Jan - Apr 2019 (3 Months)
Role
UX Designer, UI Designer, UX Researcher
Category
B2B, B2C
Overview
Blue Nova Digital is a multimedia agency offering visual design services and template kits. The project aimed to improve the user experience for prospective clients, streamline inquiries, and boost engagement with the newly integrated template store.
Problems
Difficulty discovering the full range of services
Communication and collaboration gaps between clients and designers
Lack of clarity on policies, revisions, and timelines
Difficulty discovering the full range of services
Communication and collaboration gaps between clients and designers
Lack of clarity on policies, revisions, and timelines
Goals
Increase revenue via a template store
Improve returning customer inquiries
Boost engagement and customer satisfaction
Increase revenue via a template store
Improve returning customer inquiries
Boost engagement and customer satisfaction
Tools
Figma
Figma
Flowmapp
Adobe Photoshop
LucidChart
Wordpress
Elementor
Google Forms
Research & Insights
Competitive Analysis
SWOT evaluation of competitors revealed gaps in service discovery and usability.
User Research
Google Forms survey was utilized to gather user feedback
11 participants surveyed and interviewed.
45.5% said a broad showcase of past projects most influenced their choice of service.
36.4% valued website simplicity above all else.
Clients consistently cited confusion around design briefs and revision policies.
11 participants surveyed and interviewed.
45.5% said a broad showcase of past projects most influenced their choice of service.
36.4% valued website simplicity above all else.
Clients consistently cited confusion around design briefs and revision policies.
Key Insights
Users valued clarity in service selection and efficient communication channels.
Lack of clear information about revisions and returns caused friction.
Journey Maps
User journey maps were used to discover areas of specific phases, tasks, mindsets, pain points, and opportunities based on each participant. Opportunities recorded will be implemented towards the development of Blue Nova Digital.
Stakeholder Feedback
"This is extremely helpful insight to understand who our users are. Since we now understand user needs, mindset, and pain points, how can we stage this towards building out the site? What would you consider as logical next steps?"
"Reflecting on some of the business objectives, how can we define a success metric in the user journey?"
User Flows
I led the development of the user flow by leveraging insights gathered from our journey maps. This flow prioritizes users seeking information about logo designs directly from the homepage. Additional user flows are tailored to cater the diverse service options highlighted on the homepage.
Site Map
I strategically analyzed and structured the essential elements required for Blue Nova Digital's website using FlowMapp. This involved organizing information, key features, and functions to ensure optimal navigation for users.
Ideation
Low Fidelity Wireframes
I started the design process with low fidelity wireframes. This is typically how I begin ideating the necessary components and sections for the final design.
Mid Fidelity Wireframes
This stage serves as a progression from the initial low-fidelity sketches, allowing for a more detailed exploration of essential components and sections in preparation for the high fidelity.
Stakeholder Feedback
"We should make "Contact Us" a stand out CTA Button in the navigation header. We want to capture the attention of users and allow seamless access."
"We should make "Contact Us" a stand out CTA Button in the navigation header. We want to capture the attention of users and allow seamless access."
"For the "How It Works" section, strategize on 4 easy steps it takes to have a design created using us. Written content should be short and straight to the point."
"For the "How It Works" section, strategize on 4 easy steps it takes to have a design created using us. Written content should be short and straight to the point."
High Fidelity Wireframes
The design process advanced into high-fidelity wireframes, building upon the foundation of mid-fidelity sketches. This stage marks a refined exploration, capturing intricate details of essential components and sections as part of the preparation for the final launch.
Usability Testing
User Insights
Three participants were used to test the direction of the website. The evaluation employed Jakob Nielsen's error severity rating scale, ranging from 0 (no usability problem) to 4 (usability catastrophe), providing a structured approach to prioritize identified issues.
The goal was to gain valuable insights into user interactions, pinpoint potential usability challenges, and determine the priority of improvements needed for an enhanced user experience.
Usability Test Report
Following the conclusion of usability testing, I compiled insights from the three participants to gain a deeper understanding of features that needed improvement. Analyzing user feedback revealed common friction points, primarily with task 2.
Task 2 highlighted the need to show the types of design service available in the request form. This would reduce the amount of effort required for the user to specify what type of design work they need.
Iterations were applied to the high-fidelity version, successfully addressing the issues identified by users during testing.
Design Doc
Created Design System
I aimed to have a consist design system for Blue Nova Digital. Below you will find colors, typography, buttons, iconography and other design components using Figma & Google Material Symbols. The design goal was aimed towards a simplistic user interface with minimal cognitive complexity.
Color System
Typography
Buttons
Icons
Final Iterations
Challenge 1
Stakeholders were presented with feedback from usability testing to gain their approval. There was a unanimous agreement to integrate the feedback obtained from the testing.
Dropdown menu to the inquiry form: This menu would list services such as logos, flyers, business cards, and more offered by Blue Nova Digital. The aim was to make it easier for users to select the service they need, and to help designers quickly identify the type of inquiry.
On the left you can view the before, while on the right you can view the updated version.
Stakeholder Feedback
"Usability testing revealed a lot from our initial high fidelity designs. We should include the drop down menu for service type. It would be a pain for the type of service to not be specified for both the user and business tracking."
"Usability testing revealed a lot from our initial high fidelity designs. We should include the drop down menu for service type. It would be a pain for the type of service to not be specified for both the user and business tracking."
Challenge 2
Further implementations were incorporated from usability testing. There was unanimous agreement to integrate the feedback obtained from the testing.
Navigation Bar Adjustment: User testing revealed the importance of clarity in the navigation bar, particularly renaming the "Templates" button to "Design Templates". This helps users easily understand the types of templates available on the website, reducing confusion and encouraging exploration.
Dedicated Design Templates Section: To optimize the effectiveness of the design template store, it was essential not only to mention the availability of templates in the hero section but also to create a dedicated section on the homepage. This allows for a focused presentation of benefits using design templates, targeting users with existing design knowledge.
On the left you can view the before, while on the right you can view the updated version.
Challenge 3
Creating a dedicated landing page to answer questions for our users.
FAQ Page: Ensuring clarity is a critical value for the business. The aim is to eliminate any uncertainties users might encounter during their site journey. Instead of addressing these questions on individual landing pages, it was crucial to establish a dedicated page that addresses high-priority inquiries, instilling confidence in our ability to meet client satisfaction.
Accessibility
AA Compliance
Before pushing the final high fidelity designs, a round of accessibility testing was administered. I aimed to create a smooth design system by carefully assessing how the chosen font colors and weights interacted with various background colors. To ensure accessibility for users with visual impairments, I conducted an accessibility test using accessible-colors.com, ensuring readability of elements remained consistent throughout their experience.
The goal was to be AA compliant for WCAG 2.0 accessibility standards.
Primary CTA Accessibility Test
Subheading Text Accessibility Test
Body Paragraph Text Accessibility Test
Project Results
Results after launch
Significant value was added by appealing to designers in need of design templates and customers who would inquire directly through the contact form.
Various metrics improved as a result of implementing the template store.
10%
Increase in returning customers (Month over month)
20%
Increase in client satisfaction (Month over month)
25%
Increase on homepage user engagement (Month over month)
42%
Revenue increase from template store (Year over year)
Key Takeaways
Transparency Matters
User feedback showed the need for the following.
Template use
Design policies
Revisions
Design timeline
Project updates.
Examples Help
Customers found it difficult to grasp the written explanation of their desired design.
Providing rough sketches helped streamline the workflow for a high-fidelity design project, reducing overall time and effort.
File Format Delivery
Some customers struggled to understand file formats like PNG, JPG, SVG, PSD, and AI.
By asking about their intended use, we provided the right format and educated them on how to optimize designs for future needs.
Learnings
Final Remarks
Once a final round of feedback between stakeholders were captured, iterations were delivered and implemented.
The project took 3 months to build out from Jan - Apr 2019.
What I could've done better
Although delivering the project was a success, I believe there were areas I could have done better.
I should have called for more user testing to discover other aspects of the site that would drive a better user experience. Although there was a ton of research initially, getting the product in the hands of users could have resulted in more innovative ideas.
Lessons I've learned
Bringing stakeholders into the design process and overall writing style for content.
Involving stakeholders in discussions about the significance of voice and tone earlier in the design process could have potentially altered the project's scope.
Other Projects
PlutoPay
SaaS
B2B
B2C
Digital Payment application that allows users to send, receive, and budget their money.
LearnHero
Education
Vocabulary learning application focused on users improving their knowledge in various industries.
Oko
HTML
CSS
JavaScript
Fully coded responsive website optimized for accessibility and performance across all devices.