EncoreTime is the newest Job Board for Medical Professionals
What started as a design system revision handoff, turned into a fully UI update with Auto Layout and Multiple Breakpoints...
EncoreTime is a medical job board which specializes in helping professionals find highly specified medical positions with a multitude of preferences, filter options and choices. This project was originally assigned to me to assist a small tech-startup company in creating a job board website. The company had initially hired a designer to create the design system and website. Unfortunately the original designer fell ill with COVID, and was unable to complete the task.
Initially I was told only a wireframe and workflow would be needed. But as information and time progressed, it turned out the original designer started the UX, but could not finish the rest. As a result. The UX had been built out by developers and architects already. Because of this initial work, the assignment had to be adjusted to fit a few criteria. Firstly, The updated UI had to follow the existing UX. The workflow could not be adjusted, therefore all changes had to follow a strict flow and order and could not be changed. Second, was the website needed to be fully responsive. This meant the web window needed to adjust with the changing of the window, but also be mobile optimized. I suggested creating a totally separate mobile version (phone, tablet, Desktop, etc.), however the technical Product Owner stated that the website must accommodate all viewing formats and only one design could be made.
This posed a huge problem since even with the use of Auto layout in Figma, creating a website that functioned on mobile and web without separate files or designs was incredibly difficult. Especially given the amount of pages and content present. Initially, I had no clue how to resolve this second criteria. My past experiences always guided me towards separate designs optimized for each screen with separate addresses, formats, etc, however given the specific ask and challenge, I knew there were available options. After a few days of research I found Figma plug-ins that assisted with connecting each frame design to stitch them all together with breakpoints. Breakpoints allow the design to switch to a different size or Fram while keeping the fluidity of smaller or larger versions or designs of the screen.
As a result, I effectively had to design four separate versions of each page. Ensuring each design was auto responsive and seamless flowed into another screen/device dimension. After figuring out what needed to be done, I planned my strategy. because the amount of work I needed to do quadrupled, I couldn't just start. I needed organization, guidelines and proper time management. This project also had a 1 week turnaround as well. The TPO's were based in India, which required a full shift in meetings, working times and deadlines
By researching UI/UX file management along with tips and best practices for designing mobile and web friendly sites, I was able to come up with a fully responsive, active job board. I logged a total of 48 hours on this project not including approximately 20 hours in research or education.Based on the efforts and concepts learned, users can create profiles for employment or as an organization, select from a multitude of responsive filters and choices, as well as eliminate, contact and find eligible candidates or employers.
This was my first attempt at utilizing Figma's auto Layout. I had also never had the sole responsibility of designing and implementing a full, workable UI, based off an existing UX by myself. Although there numerous challenges including, learning auto layout independently, adjusting creative concepts and components to fit existing decisions and parameters as well as how to complete a complex task, efficiently, effectively and in a timely manner, valuable insights were gained and invaluable skills were developed.This by no means is considered the best work to date, but it shows substantial design and relational business growth, as well as the ability to adapt and deliver complex outputs within limited time frames. Since this project, Saint Lazare has worked on numerous UI/UX systems for a multitude of companies and industries including healthcare, household products, technical maintenance boards, and data analytic apps and software.
Comments