Scalable Instruction Guide for Website Template Kits
Duration: 2 Months, Launched September 2023
Industry: Professional Services
Target Audience: Women of Color entrepreneurs in the U.S. between the ages of 25 and 45 with service-based businesses.
Kroxie Digital is a visionary web design company specializing in custom-designed, drag-and-drop website templates using the Elementor WordPress plugin. Catering to women of color entrepreneurs, Kroxie Digital understands the unique challenges these business owners face, particularly when launching or enhancing their websites.
Contributions:
- Instructional Design
- User Experience Design
- Project Management
- Technical Writing
- Video Production
- Visual Design
- Front-end Development
- Accessibility and Inclusivity
Problem Statment
Kroxie Digital was challenged to provide clear, user-friendly instructions for their custom-designed, drag-and-drop website templates. Users of various skill levels utilizing the Elementor WordPress plugin often found the installation process complex due to the templates’ unique functionalities and custom designs.
Proposed Solution
To address this, we developed HTML-based instructional guides. These guides included embedded video tutorials for each step of the installation and customization process, ensuring clarity and ease of use. The goal was to create adaptable instructions that would be effective across different template styles.
Design Process
Empathize
Getting to know your brand and audience.
Define
Finding ways to help your audience.
Ideate
Brainstorming tangible solutions with you and your team.
Prototype
Creating visuals that resonate with your brand and audience.
Test
Refining visuals and ideas through feedback and iteration.
Implement
Launching a minimum viable product for your audience.
Empathize
My engagement with Kroxie Digital began with a deep dive into the needs of their main audience – women of color entrepreneurs using the Elementor WordPress plugin. Through user interviews, particularly with solopreneurs, I discovered a prevalent view of WordPress as overly complex, highlighting the need for more accessible design solutions.
Deliverables:
- User Interviews
- Research
Tools:
- Pen and Paper
- Google Sheets, Google Docs
Define
We identified the key challenge: to simplify the use of Kroxie Digital’s custom-designed templates. Our goal was to create user-friendly instructions that made the installation process accessible to users of varying technical levels, while maintaining versatility across different template designs.
Deliverables:
- Document Installation Process
- Find Supplemental Information
- Source and hire video editor and developer
Tools:
- Pencil and Paper
- Google Sheets, Google Docs
Ideate
To address this, we proposed the development of HTML-based instructional guides incorporating both written and video tutorials. Recognizing the scale of this undertaking, we strategically hired additional resources – a professional video editor and a front-end developer. This decision ensured that we could produce high-quality, comprehensive guides to meet our instructional design and user experience objectives.
Deliverables:
- Storyboard Video
- Screen Record Process
- Design HTML Layout
Tools:
- Pencil and Paper
- Screencastify
- Figma
- Google Sheets, Google Docs
- Monday.com
Prototype
We meticulously documented the installation and customization steps of the templates, followed by designing an instructional layout in Figma. This design was then converted into a responsive HTML document using Bootstrap. Simultaneously, we produced and edited detailed video tutorials, enhanced with timestamps, and hosted on YouTube for user accessibility.
Deliverables:
- Final HTML File
- Final Edited Videos
- Timestamps and Descriptions
Tools:
- YouTube Creator Studio
- Figma
- Sublime Text
Test
During the testing phase, we customized the guides for different template kits and conducted user testing to ensure the effectiveness of our instructions. Feedback gathered was crucial for refining the guides to meet user needs better.
Deliverables:
- Accessibility Scan
- Front-end Development
Tools:
- IBM Equal Access Accessibility Checker
- Contrast Checker by WebAIM
- Keyboard Testing
- Google Sheets, Google Docs
- Sublime Text
- HTML, CSS
- Bootstrap
Implement
Managing external resources effectively was a key aspect of this project. Collaborating with a video editor and front-end developer was instrumental in aligning the project with our instructional goals. The project culminated in creating customized HTML and template zip files, significantly improving the user experience for Kroxie Digital’s clients.
Deliverables:
- Customized HTML Files
- Final Packaged Template Zip Files
- Promo Photos
Tools:
- Figma
- Adobe Photoshop
- HTML, CSS
- Sublime Text
Results and Insights
This case study showcases our user experience design, instructional design, and resource management strengths. By transforming complex template functionalities into approachable and user-friendly designs, we empowered Kroxie Digital’s clients to confidently manage their web projects, contributing significantly to the digital literacy and usability landscape.
