The website incorporated FGIT’s vibrant social media community and made members proud
UX Team: 4 | Time: 3 weeks | My Role: UX Design / Research / Content Strategy / IA / UI Design
Methods and Deliverables: user interviews, comparative analysis, mood board, brand and content strategy, information architecture, UI style guide, logo design, wireframes, client report, client presentation
Home page from FGIT prototype
Challenge
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
Information Architecture
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.
UI Design
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.
Research
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.
Logo Redesign
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
Working with RED Academy’s dev team, we produced a demo for FGIT December 2016.
In the spring of 2017, my colleague Preethi Venkatesh and I responded to some change requests from our contact at FGIT. We refined the initial demo and presented it to the FGIT board.
The board was thrilled with the results. We had achieved their main goals including linking their social media accounts and creating a website as stylish as their fashion-focused community.
They loved that we had improved the online membership sign-up process, they hadn’t thought that was possible.
Check out my detailed case study on medium.
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