Website Maintenance
Designing a User-Centric Website Maintenance Landing Page
Maintaining a website involves making regular updates and fixes to ensure it remains secure, functional, and user-friendly. It's a way of making sure the website operates smoothly and stays current. Blue Ocean Global Technology introduced different plans and packages for website maintenance to guarantee optimal performance, security, and regular updates for businesses and organizations. Our dedicated landing page not only communicates the value of these plans but also offers a seamless and convincing user experience to encourage conversions.
This case study explains our approach on how the Website Maintenance page was designed end to end for Blue Ocean Global Technology. We communicated to users the importance of regularly monitoring website performance for the success of their business.
Roles
I assumed the following roles designing this webpage:
-
User Experience (UX) Designer
-
Interaction (IxD) Designer
-
User Interface (UI) Designer
-
Visual Designer
Deliverables
Interaction Design: High-fidelity interactive prototypes for key tasks on desktop, and mobile
UX/UI Design:
-
Research
-
Competitive analysis
-
One-on-one interviews
-
Site map
-
Personas
-
Task flows
-
Journey maps
-
Low-fidelity wireframes
-
High-fidelity mockups and prototypes
-
Usability tests and findings
Project Specifications
Duration: 2 months
Tools:
-
Figma
-
FigJam
-
Miro
-
Photoshop
Business Needs
Similar to the 22+ pages that I have designed for the existing website for Blue Ocean Global Technology, I led the design for the website maintenance page solely collaborating closely with product managers, content creators, SEO team, and the stakeholders.
The goal is to create a dedicated landing page that not only effectively conveys the value of the website maintenance plans we offer. It also ensures a smooth and convincing user experience to encourage conversions.
Over the course of around 2 months, I led efforts to evolve the webpage and address customer pain‐points with the aim to attract clients and assist them in finding the most suitable website maintenance plan and package for their needs.
This case study showcases how I designed the website maintenance page to provide web pages with the necessary support for attracting customers and prospects.
Exploring the problem
The Main Problem
-
Blue Ocean Global Technology introduced website maintenance services and sought to attract users while encouraging conversions.
The Other Problems
-
Attract new clients to the platform.
-
Increase client engagement with the webpage.
-
Make users aware of our services, plans, and the risk factors associated with website maintenance.
-
Provide clients with a quick way to reach out and get customized plan.
Design Approach
-
Implement a strong SEO strategy in the design.
-
Create sections that allow users to interact with the webpage and check the current working status of their website.
-
Provide informative and relevant content to guide potential clients in the right direction.
-
Design a responsive webpage to make it easier for users to raise queries and guide them toward getting a customized plan.
Initial Explorations & Research
This UX case study for the website maintenance landing page involved a thorough analysis of competitors, including industry leaders like Sucuri, to understand how they present detailed plans. Initial research, conducted by the SEO team, focused on optimizing keywords and creating a comprehensive site map strategy to consolidate information on a single page, aiming to enhance client retention and avoid unnecessary redirection. Subsequent research explored the implementation of a risk meter, allowing clients to interactively assess their website's risk status for a dynamic and engaging user experience. Valuable insights from competitor analysis and collaboration across teams informed the design decisions for our website maintenance landing page.
Some of the significant points we focused on were:
-
Who are the major competitors?
-
What information would we like to keep on the website maintenance page?
-
What top navigation features would be on the webpage?
-
How to make the webpage interactive for the users?
-
How do the clients perceive the services we provide?
-
How to best represent the company through this page?
Ideation:
-
Interactive URL Audit: We can allow users to input their website URL in the header that provides a convenient and straightforward method for obtaining an instant audit, simplifying the process for users.
-
An upfront “Audit” in the header section captures users' attention.
-
Risk Meter Feature: A user-friendly risk meter engages visitors, allowing them to assess their website's risk intuitively.
-
Founder's Video Introduction: A personal touch with a co-founder video builds transparency and trust in our maintenance process.
-
Testimonial Section: Strategically placed client testimonials throughout the page bolster credibility and user confidence.
-
Detailed Plan Section: Clear breakdowns of plans foster transparency, aiding users in informed decision-making.
-
Constant Call-to-Action Buttons: Strategically positioned buttons prompt user engagement, encouraging tailored audits and plan exploration.
-
FAQs for Clarity: An FAQ section addresses user doubts, providing clarity and aiding decision-making in website maintenance services.
One of our goals is making our website maintenance web page reach more clients, who intend to buy one of our plans for their business.
.jpeg)
Started from Sketches
Brainstorm Session
Hence, our objective became:
.png){kind=small}
"Create a website maintenance landing page with a user-centric approach, integrating interactive tools and transparent information. The goal is to actively engage visitors, drive conversions, and build trust in our services."
Heightening User Empathy
We believe that our primary users are business owners and website administrators seeking reliable website maintenance solutions to ensure optimal performance, security, and regular updates for their online platforms.
The first look might make it seem like everyone wants to save time and money when looking for website maintenance. However, digging deeper into user research uncovered different reasons people are interested in these services. Creating personas helped a lot in understanding these varied needs, guiding us as we developed new features. As I worked through the research and design, I focused on two main personas, each with their own priorities. This focus played a crucial role in shaping the features we created to meet the different needs of our users.
"Smooth website maintenance fuels my business growth."
Defining Important Tasks
To better understand users, we focus on their daily tasks. For Sarah, the main task means easily finding a website maintenance plan that suits her small business. The webpage provides clear details on different plans, making pricing and services transparent.
For Alex, the main task is monitoring website performance. The webpage lets him quickly access performance reports, helping him make informed decisions and address any issues promptly.
(Click to enlarge)
(Click to enlarge)
Creating Structure:
The site map we created is the result of the response from stakeholder interviews with the majority of the Blue Ocean Global Technology team.
The website's structure is designed with simplicity in mind. As visitors land on the homepage, they encounter clear options like the Audit and Pricing tabs, both seamlessly scrolling down to the relevant sections on the same page. This intentional layout aims to retain users, minimizing the need for redirection and promoting a smoother conversion experience. For additional information, users can explore the Blogs, About Us, and Contact Us tabs, providing a comprehensive yet straightforward navigation experience.
Creating Site Map for Website Maintenance
Identifying Design Patterns Through Rapid Sketching
Multiple rounds of quick sketching underscored the challenge of keeping essential tasks straightforward. To meet the requirement of displaying audit results on the same page, we introduced an expandable header. Users can now input their website URL to instantly view their website screen along with the audit result, expanding the header. For the detailed plans table, a collapsible design was added, with the first category open by default for a clean landing page. Users have the flexibility to expand additional categories as needed, aligning with the principle of progressive disclosure in design psychology. Iterative sketches refined the design, including the risk meter and its checklists.
Through sketching, I discovered that the most effective approach involved clearly organized sections with ample negative space, employing predictable design patterns for easy information browsing and navigating the plan selection process.
Sketching the ideas for Website Maintenance
Designing Information Hierarchy
Due to time limitations, I moved directly from sketches to black-and-white high-fidelity prototypes. This approach allowed me to identify issues related to scale and information hierarchy. Designing responsive mobile wireframes in this manner helped me decide which elements could be prioritized or made secondary due to space constraints.
By testing these wireframes I discovered designing the information hierarchy for the website maintenance webpage involves a thoughtful process focused on enhancing user experience. Key tasks, such as selecting maintenance plans and accessing audit results, are given priority. Strategic positioning is crucial; after the header, users encounter content about website maintenance, including a video from our co-founder. The flow then guides them to plans and pricing, the risk meter, client testimonials, a detailed checklist table, bullet points highlighting risk factors, and FAQs. The intentional emphasis on plans and audit-related content ensures a clear and intuitive navigation experience, aligning with effective information hierarchy design principles.
.png)
Creating Low-Fidelity Screens
Design system
Blue Ocean Global Technology has a set of guidelines for user experience that cover topics such as color, typography, grids, and photography, but only from a very high-level perspective.
I created an additional UI kit because the appointment checkout process and information hierarchy are crucial to the project's success. Details like button states and form elements needed clear definition. This new UI kit is intended to supplement the existing one.
Where it made sense, I leaned into core elements of the existing UI, such as relying on the palette’s primary blues, the global use of Poppins, and a responsive grid with typical breakpoints.
Where I felt I needed expansion included typographic hierarchy; button formats, sizes, states, and variants; form elements; greater detail with regards to grids; and an approach for iconography.
Blue Ocean Global Technology UI Kit - Modified for Website Maintenance
Understanding What Works and What Doesn’t Through High-Fidelity Prototype Testing
High fidelity prototypes allowed me to test the key user tasks I identified in my research. Collaborative efforts with the technical and development teams ensured a seamless design process, reflected in the lo-fi prototypes' resemblance to the final product. Discussions with developers at each step ensured alignment before extensive coding in the high-fidelity stage. On the flip side, areas for improvement include the implementation of tooltips for better user understanding of risk metrics, a testimonial section redesign for enhanced emphasis, an inversion of the risk meter for clarity, refinement of error messages for invalid URLs, and a more user-friendly layout for the pricing section and using pricing psychology to show discounts.
High Fidelity Design Mockups
Left to Right: Enhanced High-Fidelity sections
Testing With Users
As planned, the new web page went live, showcasing the new products and features it was designed to support. The launch was successful.
Testing with employees
Summary
Initiated to enhance website maintenance services, our project aimed to align user needs with business goals. Focused on creating an intuitive landing page, we prioritized key tasks like plan selection and audit access. Implementing an expandable header for instant audit results and a collapsible table for plans optimized the user experience. Throughout the process, iterative sketches, user testing, and collaboration with technical teams fine-tuned the design.
The hierarchy prioritized content strategically, emphasizing plans and audits. The final webpage integrates tooltips, a testimonial redesign, and a risk meter inversion, addressing user feedback. In summary, user-centric research and iterative design shaped an optimized webpage, meeting both user expectations and business objectives for effective website maintenance services.
Lessons Learned
-
Don't worry too much about the details. Earlier in my journey, I made the mistake of worrying about the look of the UI. Taking a step back and reassessing the user flows helped me to reprioritize the UX.
-
And because the resulting site is as collaborative and flexible as the process itself, iterations can be made easily and often, keeping the design fresh and responsive to whatever the user needs and business goals might arise.
-
Strategic Information Hierarchy: Careful consideration of content hierarchy enhances user understanding and navigation, contributing to a seamless experience.
Read More of My Case Studies
DivaTales
Girl Power USA
iGuardian