UI Design
UX Research
Web design
My role: UX and UI designer
overview
MycoAcademy serves as a user-centric, non-promotional, and educational platform specifically designed to assist healthcare professionals in obtaining comprehensive background information on the antifungals area. Tailored to meet the specific needs of healthcare professionals, the website prioritises an intuitive user experience, offering insightful content without promotional elements.
The development of the website in Drupal presents certain constraints, requiring close collaboration with developers and following a predetermined set of guidelines while ensuring alignment with brand standards. Other challenges include: building a reputable digital engagement platform, increasing understanding of the unmet needs of patients with IFIs, and helping professionals looking to deepen their knowledge of the antifungal space.
the challenge
my contribution
Due to the tight project deadline, my colleague and I split tasks for efficiency. I focused on researching brand and design concepts, analyzing competitors, and understanding Drupal's platform limitations and components. Additionally, I researched and learned Adobe XD (as the client preferred it over Figma) and worked on creating the UI Kit and components for the website layout.
Completing comprehensive groundwork was crucial before starting the design phase. It was important to make sure our approach was based on a solid understanding of the market and user needs.
Brand research and designs concept
Conducting brand research is crucial in developing effective brand guidelines. Examining the overall appearance of brand guidelines helps generate ideas aligned with the client's expectations. This phase includes studying competitors' brand guidelines, understanding the target audience, grasping the main theme of the website, and working closely with the client to comprehend their vision.
Using the collected information, I crafted three landing page mock-ups, each showcasing unique layouts, styles, and color schemes. This method offers the client a more tangible preview of the website's potential look and feel compared to traditional mood boards.
After the client chooses their preferred style that aligns with their requirements, we move on to the next step. This involves creating variations using light and dark colour schemes allowing for a more in-depth exploration of design possibilities. This ensures that the final product not only meets the client's demands but also offers versatility in adapting to different contexts or preferences.
While I was working on the brand development, my colleague helped with the research, user flow and wireframes. Teamwork and collaboration are essential elements for achieving project success within tight timelines.
Competitors analysis, site architecture and wireframes
In the second round of research, we had to do an in-depth assessment of their strengths and weaknesses across the websites.
By dissecting what competitors excel at and pinpointing areas for improvement, our analysis extracted valuable insights that are strategically applied to enhance the overall project.
Understanding and summarising the gathered data helps create a shared understanding of the product.
User flows help determine how many screens are needed, what order they should appear in, and what components must be present. This strategic approach ensures a cohesive and user-centric design by mapping the user journey and using the necessary elements for a seamless and intuitive user experience.
UI kit and Design Components
To start on the website design, I first created a UI kit. Given the client's choice of Adobe XD, I dedicated time to learning the program.
With a well-organized UI kit, I ensure a uniform design throughout all pages, simplify the process of finding, updating, and changing components, and smoothen the transition from design to development.
Creating the website on the Drupal platform, I had to consider and stick to the existing components while integrating the new branding elements. Balancing the established framework with the updated brand identity was key in this process.
Designs, prototyping and reviews
Before officially confirming the designs as final, there are additional steps in the process that I need to complete.
Prototyping is crucial for providing users with the visual and navigational experience of the website. In a collaborative team setting, taking turns testing the prototype helps identify any overlooked elements from earlier stages. This process ensures a thorough assessment before finalizing the designs.
Using direct comments and tickets helps track updates and ensure readiness for development. This method provides a clear, organized way to communicate changes and maintain a record of the project's progress.
Typically, the final step before the website goes live is testing. This ensures the developed site follows the approved designs, guaranteeing a smooth and reliable user experience.
Lesson learned
Since we built everything from scratch, we successfully delivered the project on time.
I have learned a new design tool, Adobe XD.
During the research phase, collaborating with developers to understand the constraints of designing components for the Drupal platform was crucial for timely delivery. Their insights significantly influenced the project's trajectory, contributing to a refined and effective final result.
Questioning any section, path, or area that may not make sense demonstrates a thorough and meticulous approach. This curiosity and attention to detail help uncover potential pain points, informing more user-centric decision-making throughout the project.