Home page from FGIT prototype
Fashion Group International of Toronto (FGIT) is a dynamic community of Toronto fashion professionals focused on providing networking opportunities and educational workshops. Their site was difficult for their volunteer staff to manage and had no connection to their social media channels. The online membership sign-up was a frustrating experience. We needed to create a website that incorporated FGIT’s vibrant social media community and made members’ proud.
What we did
Reorganized the content and revised the site structure. Two new CTAs were add on the homepage: membership sign-up and buy tickets. New features included a search bar and direct links to FGIT social media accounts. The reorganized site solved key user goals: easy to find information.
New User Flow For Becoming A Member
Redesigning the membership flow made a real impact; addressing an identified user and organizational goal. The revised flow reduced clicks from four to three. By adding membership information to FGIT site, users could see membership options and details before they were redirected to the parent site to complete the process.
I chose the elegant Playfair Display and paired it with the modern, yet approachable Roboto. This combination reflected FGIT’s glamorous but accessible brand. The sophisticated colour palette included the red from the FGIT logo as well as a range of greys and black.
I interviewed members, board members, and a fashion industry professor to understand how user and identify goals and challenges. Additional research included online reviews of other FGI chapters and various membership sites. Insights from our research helped us develop organizational and user goals that guided our design.
Persona, Use Case and Scenario
Sophia the non-member was our primary persona. We identified her motivations, goals, and frustrations and developed Sophia's scenario to help guide user flows and features. In order increase membership FGIT needed to understand potential members and any motivations or frustrations they had.
Low Fidelity Wireframes
I created basic wireframes using Sketch so we could understand what went where and make the required adjustments.
High Fidelity Wireframes
I produced the final desktop wireframes in Sketch using placeholder copy and images. FGIT would replace the content later.
The original FGI Toronto logo had a vertical layout making it difficult to use as part of the navigation menu; it required too much valuable space. Keeping the same fonts I added a T, so the new logo read FGIT and put the full name to the right.
FGI Toronto chose not to use the redesigned logo; the board thought that it may cause problems with their parent organization.
Outcomes and Lesson Learned
What Our Client Said
…. thanks for the FABULOUS job you did on designing FGI Toronto’s new website. Your care, detail, creativity, and commitment to the project far exceeded my expectations and I’m absolutely thrilled with the design.
Your research was so thorough, I learned things about our organization from you that I didn’t know before. And I loved the understanding of our website users you demonstrated through the various examples you created.
—Laura-Jean Bernhardson, FGIT Board member