Connects Fashion Professional.

Right at Toronto

Published in

RED Academy

12 min readJan 5, 2017

Project Timeframe — 3 weeks
Team Size — 4 people
Client — The Fashion Group International of Toronto
My role — Involved in Research, Planning & Opportunity; Solo on Design (Mobile), KPIs and Annotation

Highlight: Winning Team of Project Excellence among 2 other teams. Won the chance of working with developer to bring this project live.

The Fashion Group International of Toronto — we short formed it to FGIT — is an association of people in the fashion industry. It is one of the chapters of The Fashion Group International (FGI). Its current site is lacking the functionalities to support the goals of our client, which are to increase event attendants and membership sign-ups.

Research

We first started our research with investigating the FGI and FGIT site, domain research focused on competitor comparative analysis, drafting survey and interview questions to understand FGIT as a whole, not limiting ourselves to event attendants and membership sign-ups.

We were successful to have two survey response from the FGIT community and contact 5 active FGIT members who are mainly involved in the boards for in-depth interviews. Through all our research, we understood FGIT as an organization, its people, its website, its site traffic, its social media and newsletter, its events, and its membership benefits as well as its sign-up process.

A detailed breakdown of our research is listed below.

(skip to Planning if Research Key Findings is enough for you)

The organization:

FGIT runs on a volunteer basis
FGIT is part of FGI among many other chapters
FGIT runs its own site outside of FGI, yet membership sign up must go through FGI site
There are broken communication between FGI and FGIT — FGI site related requests could take up to a few years to get to FGI from FGIT
A pre-promised print version of international FGI member directory from FGI is often not mailed to FGIT members
The association host an annual mentor gala as its fundraising gala and main networking event with prominent members
Mentor essay contest is in place for prospect to write for a chance to win a seat at a table-of-10 with prominent mentor at the mentor gala
The association is doing outreach initiatives to students who are studying fashion

The People:

FGIT members are fashion lovers and fashion forward
The board at FGIT runs on a rolling basis and each involved board member has his or her role — duty could change every year
Every board member or site maintainers are very busy either running their own business or have a demanding profession. They are helping to run FGIT as a passion and see the benefit of FGIT events and networking at FGIT. They don’t prefer extra work at FGIT to what they already have now
Board members don’t mind new young members to enrich the association and helping the younger talents is something they are happy to do
Every member loves the social, growth and networking opportunity at FGIT and these are their main reasons staying
Current members are not proud of its website and rarely appoint anyone to its website for reference
Existing member is happy to invite and bring in friends or fashion students to join the events as the events encompass great information, and industry experts willing to network
Fashion students are interested in receiving newsletter from FGIT

The Site:

The current site information is not structured, information is everywhere, and updates are dumped into the “Event/Blog” tab hoping to be found
Membership benefits information on the site is not outlined in a clear manner and font size is very small not legible for many

The Traffic:

100% of the web traffic came from desktop and there are many organic searches to the site, but yet, very low membership enrolment

The Social Media and Newsletter:

FGIT’s social media and newsletter are the current points of connection with its members. Moderately active members feel connected and updated with these platforms as they would actively seek in these platforms
FGIT’s social media are supported by one of its sponsor Grilled Cheese Affairs and its newsletter is run by one of its board or dedicated member
Current social media content are mixed with FGI events

The events:

FGIT hosts 10–12 main events a year and other workshops or gatherings
Famous prominent members like Harry Rosen and Roger Gingerich are in the association but don’t guarantee to be at FGIT events
Content and the quality of its events are good enough to attract past event goers to become a member
People only go to FGIT events first before they become a member — 100% of people we researched become a member from and due to great FGIT events
Current event tickets are sold at EventBrite

The Membership Benefits:

The current FGIT membership benefits are not appealing
FGI actually offers industry-related blog, archived materials and international member directory to all its chapters’ members
FGI also provide membership renewal on its logged in member zone

The Membership Sign-Up:

Membership sign-up must be done through FGI site; FGIT can only direct users to the dedicated membership sign-up page on FGI site
People don’t understand the membership types and sign up on the FGIT site
People don’t know what to do to complete the sign-up process on the FGI site, neither do the existing FGIT members. No help could be accessed from prospect members
100–150 had reported to FGIT that they can’t complete their membership application online due to clutter on the site or broken links on FGI site
To get member, application are done by paper and hand sometimes at events and FGIT members mail the paper application to FGI

Planning

Based on our understanding from the research, we put together 4 main Personas:

Tastemaker: Sophia, non-member fashion pro — who works in the traditional fashion field, such as fashion PR. Right now, she finds the current FGIT site hard to find its related event and its membership is not clearly outlined, which making it the main pain point for her to start investigating with FGIT. Yet, she loves the glamor of the fashion industry and making connections with people in the industry is important to her as that will foster self-growth or business growth. To be able to be part of the fashion industry community, such as FGIT, is a big thing for her. Therefore, having all the pain point fixed for her, that would be great.

Explorer: Christine, non-member fashion tech — who is an online fashion influencer with great fashion taste and familiar with the fashion industry. She finds the current FGIT site hard to navigate to find its event information (to get her start), as well, the member qualification requirements are unclear. She would love to be considered as legit in the fashion industry especially with FGIT since FGIT consists of many prominent and quality members.

Royal: Kathryn, site maintainer — who is busy running a profession or business of her own, yet passionate about the fashion industry and eager to be involved with FGIT. As much as Kathryn love to maintain the site, but the lack of time is her major problem. She would love something easy yet with quality that can showcase the professionalism of FGIT. Therefore, having an FGIT website that members can be proud of, attract new prospects, and its related members can use or point-to to prospect members are a few of her major goals. She would also love to increase event enrolments and membership sign-ups through the website.

Creative: Emma, non-member student —who is eager and motivated to get involved in the Toronto fashion community. Yet, she finds FGIT doesn’t outreach enough and the current FGIT site is not put together in an understandable manner, including events and membership, which is what stopped her from looking opportunities at FGIT. Her goal is to become a member, attend the FGIT mentor dinner and be connect with the fashion industry including meeting its prominent and quality members.

As FGIT’s membership sign up has to go through its parent site (FGI), we also looked into FGI’s membership sign up page and process to analysis its content and figure out the most optimized path for membership completion. To note, the FGI membership sign up page and process has much unclear information and broken links.

Having all the information in mind and attempt to organize all FGIT’s offering and information, we first put together the site map to set the structure of the site and start drafting different user flows for error-free experiences.

Use cases are also used to identify some key cases users will need the site and their potential experience. Our use cases included browsing the site, looking and purchasing event tickets, signing up for membership, and signing up for the e-newsletter.

The Opportunity

Throughout the research and planning process, redoing its site with consistent FGIT messages, solid site framework and solid content are the most obvious opportunities, but creatively, during this process, we thought of many ideas too. Most noticeable, when a group member asked me, “What do you think they need? Low-maintenance site?”

“Auto-maintenance!”, I answered.

Knowing how much quality content is needed yet how little hands are there to maintain or operate at FGIT, auto-maintenance is something that stood out to me. With a little help with our PHP instructor letting us know auto-population is possible, we started developing a dynamic site with dynamic content and auto-maintenance in mind to ease every persona.

Here is the breakdown of the main ideas we thought of and used.

We redid the FGIT logo to identify its Toronto distinction, which able to use on its site and as event backdrops.

When it comes to content, I mentioned:

“The FGIT’s social media content is running strong. If we can have them on the site, that would be magical!”

Having said that, that leads to our idea of integrating dynamic social media content (The automatic!) into the site through social media WordPress plug-ins. This is automatic and dynamic. The social media content is not used as feeds only, but as juicy content auto-populating as someone posts on FGIT’s social media, and the social media content will go under the Home, News, or Gallery page that users can benefit.

● Twitter content goes to the Home page
● Facebook content goes to the News page
● Instagram content goes to the Gallery page

We also research on other WordPress plug-ins to enrich the site. EventBrite plug-in (https://en-ca.wordpress.org/plugins/eventbrite-api/) was another one. Having that integrated to FGIT’s WordPress site can foster on-site purchasing making purchasing event tickets seamless and enjoyable to users.

We also discovered FGI Speak along the way. It is a member only zone. It has an intense amount of new member privileges such as fashion info achieves, international member directory and online membership renewal. These are great resources for professional growth and networking, and I suggested to add them to the Member Benefit, which we later name them to be the International (FGI) Member Benefit, to attract prominent members and making it more tempting for potential prospects.

We also try to put together compelling site content that is SEO friendly. We first try to do a content audit and then content strategy. We also wrote the site content with a family-oriented brand tone in mind by using terms like our and us.

Copy that I wrote for the site is here:

Last, we also wanted to highlight the association’s glamours history, mentor dinner, and prominent members to establish a sense of authority and legitimacy in the industry to attract prospects. This info is put on the Home page for instant access.

The Design

My role in the design phase is to design the mobile version of the responsive site.

A few key design decision (tablet-and-desktop or mobile) highlights:

We identify the need to clearly communicate what FGIT means, therefore, above the fold, we included a line about FGIT and to increase more sales, we add a Call-to-Action (CTA) to view events. And Membership is appeared three times — twice on the top menu and once at the footer — to increase access point for conversion
Existing member login to parent site (FGI) is added at footer and at membership page for existing members to log in for all online international benefits available on FGI
We also find members like to be in the loop through email newsletter, so we make newsletter subscription visible and always staying at the bottom of each page to increase subscription
On the mobile version, I also added features such as different “view options” at Gallery, “read more” or “load more” button at lengthy pages for the short-time-spent and finger-friendliness

Mobile Version Design:

Clickable prototype: https://invis.io/G79ZE9HXR

The mobile and tablet-and-desktop version is designed at the same time, so I continuously communicate with my teammate to align the look-and-feel and to make sure our works work in a responsive setting.

Tablet-and-Desktop Version:

Clickable prototype: https://invis.io/D89ZDTO9Y

The Process

Our wireframe — mid-fi iterative process. We iterate around 3 major rounds.

KPIs

After the research, we redid its taxonomy and IA, its messages, its membership selling point and etc. The indicator of our efforts and performances would be:

Increase online event ticket purchases on site or off site at EventBrite.com
Increase membership sign-up
Increase users’ stay time on the site
Increase visitor traffic to social media and vice versa
Reduce bounce rate

The Development

Our project won the chance for development due to excellent work of research, solving user problems, integrated marketing thinking and interesting automation development opportunity for developers, so, it is going live! Therefore, I put together the mobile version’s spec and annotation using Zeplin for the student web developers at RED.

Check out the site live: fgitoronto.org

Client Satisfaction

…. 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

Future Consideration

Due to time constraint and the amount of research needed, we were not able to do user testing on the wireframe and prototype to get user feedbacks, which is something I feel missing to our project in order to make a very UX and compelling website for all.

To further enhance the website, I would also love to have A/B testings to see which imagery, content, buttons or placement of button work best for the users and conversions.

My learning:

I learned in the project that research is very important. All our research information help to craft some very unique and creative ideas that work. On our first day of client meeting we got a lot of information from our client already, but as research more, we understood a lot more and it is very important to be reactive to your research and response with solutions that meet the users’ need and business goals.

I also learned about WordPress plug-in, the unconventional way of using social media plug-in and dynamic content population. In the future, I would love to design more on these matters.

Other than that, rule of thumb that I summed up for myself for mobile-first responsive site building are:

stackable
re-sizing or scaleable
hide or minimize features