UX & UI design / Project management
Enhance the imi.guide responsive website
I was the UX and product designer at SF AppWorks where we enhanced the design and features of a content-rich website for Hopelab.
CLIENT
Hopelab
TIMELINE
Phase 1: 3.5 months 2021
Phase 2: 1 month 2022
Phase 2: 1 month 2022
ROLE
UX & Product Design
CHALLENGE
How might we enhance the UX and visual design of the website and measure the success of the launch
San Francisco based innovation studio, Hopelab, created “imi.guide” – guides built for and with LGBTQ+ teens to help them explore their identity and support their mental health. The Hopelab team used the Squarespace platform for this content-rich site, but needed help making the site easy to navigate and feel authentic, trustworthy and appealing to their young audience. With a target of launching to a test group in just under 4 months, they also asked us to integrate Memberspace login functionality to enable trackable testing with University of PA.
UX Audit results sample pages
Our engagement with Hopelab began with a UX audit of their existing site. Members of our UX and UI team evaluated the site, documenting usability problem areas and providing recommendations for improvement. Nearly all of our recommendations were added to the scope of work.
Transforming the old design to the new
I collaborated with the Hopelab brand designers and directed our UI designers to transform the generic Squarespace template-driven site to create the new visual designs and design system. We layered light animations and interactions, illustrations done by LGBTQ+ artists, and authentic photos and videos throughout.
Injecting custom code
I took all feature needs and requests and turned them into requirements and tickets for the dev team who created custom code to enhance the user experience. I also worked with third-party data and analytics experts to integrate Memberspace and establish tracking and analysis and researched and implemented third-party tools for various exercises, e.g. canvas drawing and lightboxes.
LEARNINGS
Supporting LGBTQ+ Youth
Using low/no-code web design platforms is a great way for projects to get a website up and running very quickly, but customizing it can be challenging. In addition to adding custom code for design and interaction, we researched many third-party tools and integrated several, including Zwibbler for canvas drawing, Typesform for surveys, Memberspace for registration and user tracking, and Elfsight for search. Digesting the rich content on the site and finding a comprehensive way to structure it was a fun challenge for me, as I love organizing things and problem solving.
This was an extremely fun project with an extremely fun group of people, and I felt privileged to contribute to this positive resource.
This was an extremely fun project with an extremely fun group of people, and I felt privileged to contribute to this positive resource.
