<iframe width="100%" height="400" src="https://supercut.ai/embed/zheniavasiliev/PjrrxdIvFjbPKMZIJ1nux6?embed=full" frameborder="0" allowfullscreen> </iframe> ## Project Overview I led the complete website redesign for SRA Screening, a US-based background screening company that helps businesses make smarter hiring decisions with fast, reliable background checks. What started as a simple request for some color illustrations quickly evolved into a full digital transformation that repositioned them as a strategic HR partner rather than just another vendor. ![[sra_home_page_screenshot.png]] *Website home page screenshot.* ## The Challenge SRA Screening was struggling to communicate their value proposition online. Their existing website didn't effectively showcase what made them different, and it wasn't serving their three main audiences well: busy HR managers, job applicants checking their status, and CEOs of staffing agencies. They needed a digital presence that could actually convert visitors into clients. ## My Research & Discovery Process **Visual Research That Actually Mattered** I started by creating mood boards in Illustrator that explored what their core values really meant visually. Speed wasn't just about fast delivery—it was about active energy, movement, the feeling of progress. Reliability meant trust symbols, security, the confidence that comes from working with experts. I even studied how Atlassian approached similar B2B challenges to understand what resonated in this space. ![[241212_SRA-Screening_proposal.pdf]] *Illustration Moodboard.* **Competitive Analysis With a Purpose** I analyzed 9 key competitors' websites and found some interesting patterns. Everyone was doing the same thing: big hero message, then breaking down into 3-4 key features. But most were using generic stock photos and playing it safe. I also studied [http://Rippling.com](http://Rippling.com) (not a competitor, but a complex SaaS platform) to understand how successful companies handle intricate service offerings without overwhelming users. ![[241213_SRA-Screening_photography.pdf]] *Competition Visual Research Moodboard.* **Information Architecture That Makes Sense** Instead of guessing what users needed, I built an interactive site map that let the client collaborate with me in real-time. We created a SharePoint document that became our single source of truth for all copy—no more version control nightmares. The structure was logical: Homepage, 6 focused service pages, integrations, resources, pricing, and contact. Simple, but strategic. ![[250114_SRA_sitemap.jpg]] *Sitemap in Octopus.* ## My Design Strategy & Implementation **User-Centered Design That Actually Works**: I developed three distinct personas—HR managers who needed quick answers, job applicants checking their status, and CEOs of staffing agencies evaluating partners. Each had different pain points and knowledge levels about background screening. Since 50% of their traffic was mobile, I went mobile-first, creating experiences that worked beautifully across desktop, mobile, and tablet. **Smart Content Strategy**: Here's where things got interesting—I used ChatGPT to generate initial copy drafts based on specific prompts I created for each section. This gave the client team structured, contextual content to work with instead of staring at blank pages. We also collaborated through a shared Adobe Stock account to curate photography that reinforced their positioning as trusted experts, not just another service provider. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 800px;"> <div> <img src="250109_accomodation.PNG" alt="Accommodation" style="width: 100%; height: auto; border-radius: 5px;"> </div> <div> <img src="250109_reliability.PNG" alt="Reliability" style="width: 100%; height: auto; border-radius: 5px;"> </div> <div> <img src="250109_speed.PNG" alt="Speed" style="width: 100%; height: auto; border-radius: 5px;"> </div> <div> <img src="250122_Verifications-hero.png" alt="Verifications-hero" style="width: 100%; height: auto; border-radius: 5px;"> </div> </div> *Spot Illustration Concepts.* **Technical Design That Delivers**: I built a comprehensive design system in Figma with reusable components and custom illustrations that actually reflected their brand values. The responsive design included sophisticated hover states and interactions that felt premium but never got in the way of the user experience. Every element was purposeful. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://embed.figma.com/design/JcNnxm1VxBqLofeXDHYZer/Zhenia-Vasiliev-portfolio-2025?node-id=298-1511&embed-host=share" allowfullscreen></iframe> *Interact with the Figma board directly within this embedded view!* ## How I Managed This Project & Delivered Results ![[jira_ticket.png]] *Project Jira Ticket.* **Keeping Everyone Aligned**: I created a detailed project proposal that became our roadmap—covering scope, personas, and realistic timelines I developed with the dev team. This wasn't just paperwork; it was our north star that prevented scope creep and kept everyone on the same page. No surprises, no missed expectations. [Link to Proposal Google Doc](https://docs.google.com/document/d/1S8juUd03_8mRq97CHm2YRxwdasAuTy5aIDgl7RytlfE/edit?usp=sharing) **Visual Project Management**: I used Smartsheet to create Gantt charts that showed exactly what was happening when, who was responsible, and how tasks connected. This visual approach made it easy to spot potential bottlenecks and adjust in real-time. When you're coordinating designers, developers, and client stakeholders, clarity is everything. ![[smartsheet_gantt_chart.png]] *Project timeline in Smartsheet.* **Quality That Shows**: I implemented a rigorous User Acceptance Testing process using a custom Google Sheet system that tracked 91 different issues by page, device, and status. Every font size, every hover state, every interaction had to match the design exactly. This methodical approach meant the final product actually looked and felt like what we promised. ![[uat_change_request_spreadsheet.png]]*Project UAT Google Spreadsheet.* ## The Results That Matter **Launch Success & Technical Excellence**: I was lucky to work with a team of talented software developers who delivered a fully responsive website that adapts seamlessly across all devices while maintaining those sophisticated interactions that make users feel like they're dealing with a premium service. The complex dropdown navigation and interactive service selectors work flawlessly, creating an intuitive experience that actually guides people where they need to go. **Better User Experience = Better Business**: The project transformed how users interact with SRA by creating a clear information hierarchy that speaks to each persona's specific needs. HR managers can quickly find what they need, while newcomers get the education they need to feel confident. The streamlined navigation and strategic content placement made it dramatically easier for potential clients to understand the value and get in touch. ![[250116 SRA Home page _ Nav _ Services.jpg]] *Updated website UI. * **Strategic Brand Positioning**: Here's what I'm most proud of—I elevated SRA from being seen as just another vendor to being positioned as a strategic HR partner. The custom illustrations and curated photography reinforce their core values while making them stand out from competitors using generic stock imagery. This repositioning gives them room to charge premium prices and build long-term relationships. ![[250103_SRA logo variations.jpg]] *Proposal for Updated Client Logo.* **Delivered Early, Delivered Right**: We managed to deliver the complete website redesign a full month ahead of the deadline, despite the scope expanding from simple illustrations to a comprehensive digital transformation. With a 92% issue resolution rate during testing, the project showed what's possible when you combine thorough planning with systematic execution. ## Key Deliverables - Interactive site map and information architecture - Comprehensive design system in Figma - Custom illustrations and iconography - Mobile-first responsive design - User acceptance testing framework - Project documentation and handoff materials ## Tools & Technologies - **Design**: Figma, Adobe Illustrator - **Project Management**: Jira, Smartsheet, Google Workspace - **Content**: ChatGPT for initial drafts, SharePoint for collaboration - **Research**: Adobe Stock, competitive analysis tools - **Testing**: Custom UAT tracking system ## Looking to transform your digital presence? Let's discuss how my end-to-end design leadership and proven methodology can elevate your business, just as I did for SRA Screening. **Contact me today to start building a compelling digital experience tailored to your unique needs and timeline.** <a href="mailto:[email protected]" style="text-decoration: none;"> <button> Get in touch </button> </a> ## Links - [A video of me explaining the project.](https://supercut.ai/share/zheniavasiliev/PjrrxdIvFjbPKMZIJ1nux6) - [Project Proposal.](https://docs.google.com/document/d/1S8juUd03_8mRq97CHm2YRxwdasAuTy5aIDgl7RytlfE/edit?usp=sharing) - Design in [Figma.](https://www.figma.com/design/JcNnxm1VxBqLofeXDHYZer/Zhenia-Vasiliev-portfolio-2025?node-id=197-606&t=DLef2yAFdTAp6L9W-1) - [Project Gantt](https://app.smartsheet.com/sheets/pxFMv3FqR7MQvC75PvQMgMHVfRX4v38hCCrMWf61?view=gantt) in Smartsheet. - [Client website.](https://srascreening.com/)