Fashion Group International of Toronto
Enhancing an in-person community with an online presence
For three weeks in the Fall of 2016, my four-member team at RED Academy used our UX Design skills to create a new website for Fashion Group International of Toronto (FGIT). We identified business and user goals to developed an online presence that reflected FGIT’s brand. I would like to share our process and lessons learned.
My Contribution
In addition to working with my teammates during the Research, Planning, and Design phases, I acted as the client lead facilitating communication with our contact Laura-Jean Bernhardson, FGIT Board member. I also developed the UI style guide, used Illustrator to redesigned the FGIT logo, used Sketch to create high-fidelity wireframes, and used InDesign and Illustrator to design and produce our client report.
The Opportunity
We learned during our kickoff meeting with Ms. Bernhardson that FGIT is a dynamic community of Toronto fashion professionals focused on providing networking opportunities, and educational workshops. She also mentioned that FGIT’s current site was challenging to manage and update. Our task was to understand FGIT’s goals and any factors that were currently affecting users’ experiences on the website.
Why would users visit the Fashion Group International of Toronto’s site and what could they do there?
Everything Starts with Research
Our rigorous exploration of both, the FGIT site and their parent site, The Fashion Group International (FGI) identified several pain points with the membership sign-up process including broken links and a frustrating user experience. These frustrations were repeated during the personal interviews.
We conducted personal interviews with members and board members, as well as one non-member who was Fashion faculty member at a local community college. These discussions provided data and insights into the FGIT community and identified users frustrations and motivations.
A comparative analysis of several FGI chapters including Washington, New York, and Dallas provided us a better understanding of the broader FGI community and how other chapters addressed social media integration — a key goal identified during our personal interviews by both users and FGIT.
Our research showed that event attendance was the pathway to increasing membership and was FGIT’s primary revenue source. Event attendance was a shared goal for users and FGIT.
Key Research Findings
- 100% of members attended an event before becoming a member
- FGIT is focused on helping members develop and grow their businesses
- the quality of Mentors and Board Members impressed potential members
- difficult to find information about FGIT, events, membership
- awkward membership sign up and renewal process
- no connection to FGIT active social media accounts (Facebook, Instagram, and Twitter)
- student community would be interested in receiving FGIT newsletter
- members are proud of FGIT but are not proud of their website
Personas
From our research, we developed five User Personas: Non-Member, Member, Board Member, Non-Member Fashion Student and Non-Member Fashion Blogger. Each persona was assigned an archetype, and their motivations, frustrations, and goals were identified. We created user stories and scenarios for each.
We identified the Non-Member Fashion Student and Non-Member Fashion Blogger as non-traditional membership opportunities for FGIT. Bloggers with their highly visible social media accounts could help drive traffic to FGIT’s site. Fashion students are not only members of the future they could provide an invaluable source of volunteer hours to help maintain the site and help with events.
Planning
We identified business and users goal through our research. This information helped guide us as we developed the IA, site map and core features list.
Easy to purchase events tickets, a smoother membership sign-up and renewal process and the integration of social media channels were three key features that addressed goals of both users and business goals.
IA and Site Map
Managing the content was the most challenging aspect of this project. There was a lot of information. We needed to dig deep to understand FGIT’s content and how users accessed information. We explored various ways to group and categorize the content and where to put the social media links.
The final site map addressed several user and business goals. The Events section (identified as both a user and business goal) was placed on the navigation bar. The Membership section had multiple access points including top navigation bar, footer, and Our Family section. We created Our Family section to contain information about the FGIT community including board members and success stories as well as opportunities to get involved such as becoming a volunteer, partner, speaker or sponsor.
Design
Mood Board
Our team created a mood board referencing fashion brands such as The New York Times: Fashion, and Toronto Life: Fashion, as well as professional members organizations and others.
Logo Redesign
The original FGI Toronto logo was a vertical layout making it difficult to use as part of the navigation menu; it required too much space. I added a T, so the new logo read FGIT and put the full name to the right.
Style Guide
Referencing the mood board, I selected the elegant Playfair font and paired it with the modern, yet approachable Roboto font. 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.
Wireframes
My teammate Eva Ng worked on the mobile version, and I worked on the desktop version due to time restraints, we were designing side by side rather than a truly mobile first process. We did several versions of wireframes so we could understand what went where and make the required adjustments.
Our final version of the home page had several CTA including purchasing tickets to events and membership information. We tried to incorporate CTAs on all pages.
Original Homepage
In our kickoff meeting Ms. Bernhardson mentioned that it was difficult to make changes to the site and FGIT wasn’t satisfied with the current site. Our team identified several pain points with the homepage: the call to action (CTA) was hard to find, and the menu taxonomy was disconnected from the user and business goals, for example when you selected “MEMBERS” users went directly membership information page, not a members only section. Two key business goals were not easy to find; becoming a member was not visible from the home page, and the newsletter sign-up was not highlighted.
New Homepage
Keeping in mind our user and business goals we added several CTAs, restructured the menu and added more functionality including; a new search feature, links to FGIT’s social media and email, and a newsletter sign-up. We added a footer menu which allows users to access alternative pathways to content and the ability to directly log in to their FGIT memberships making membership benefits available online. Most importantly we answered the question: Why would users visit the Fashion Group International of Toronto’s site and what could they do there? Now users would have a clearer understanding of their options.
InVision Prototypes
Check out the desktop version here: https://projects.invisionapp.com/share/D89ZDTO9Y#/screens
Check out the mobile: https://projects.invisionapp.com/share/G79ZE9HXR#/screens
Getting It Built
Working with my teammate Preethi Venkatesh, we used Zeplin, a Sketch plugin to facilitate our hand-off to the RED Academy Web Developers, they did a great job bringing our vision to life.
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
Lessons Learned
It was very satisfying to hear that we helped our client understand their organization better and that they were thrilled with the project. I loved seeing how research and clearly articulated users and business goals were able to guide solutions for the FGIT organization.
I learned how important it is to follow the UX design process: research, planning, design, and testing; when you spend too much time in any one phase, it can be problematic. We should have moved on to planning phase sooner since developing new content was beyond the scope of this project. An excellent example of the need to be aware of scope creep in the future.
Content Audit + IA + Taxonomy
I would have liked to dive deeper into FGIT’s content even though it was beyond the range of this project. My teammate, Preethi Venkatesh created an extensive content inventory from the existing website which we used to manage the content and explore possible changes. Our new design included significant IA and taxonomy changes — revising the navigation menu and site structure.
If we had more time to work with FGIT, we could have refined the content and created an even better user experience. FGIT is a volunteer-run organization with a rotating board of directors; it’s challenging enough to manage events and membership doing a complete overhaul of the website in three weeks was too tight a timeframe to make major changes to the content.
Testing
Since Research and Planning phases took the bulk of our schedule—we ran out of time—and we weren’t able to properly test the wireframes or prototypes. In the future, I would build in more time for testing and be more diligent handling scope creep. This lack of testing was a missed opportunity to get valuable user feedback.
