Eva Ng Design

Overview:

The Fashion Group International of Toronto (FGIT) is an association of people in the fashion industry. Using the UX methodology and technique such as interviewing, domain research and competitor comparative analysis to understand FGIT and its users​ with the goal of desinging a new website.

Client:

The Fashion Group International of Toronto

Business Requirement:

Its current site lacked the functionalities to support the goals of our client, which are to increase event attendants and membership sign-ups.

User Problem:

Site visitors can't understand any information about FGIT from what it does, when and what are the events to how FGIT membership enrolment works due to site clutter. At the same time, site maintainers are too busy to maintain and curate quality content for the site.

Technical Constraint:

WordPress platform with an outdated template, in need of WordPress plug-in integration and API implementation with a team of front-end developers.

Project Timeframe:

3 weeks

Interesting Note:

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

Condensed Case Study

We started the project with research such as investigating the FGI and FGIT site, domain research focused on competitor comparative analysis, drafting survey and interview questions to understand FGIT as a whole, and how users currently find out FGIT events, attend events and sign up for memberships.

We were successful to have two survey responses from the FGIT community and contacted 5 active FGIT board members for in-depth interviews.

Interestingly, our traffic data showed all traffic of the site came from desktop. We found out its site is not responsive. So, we convinced our client to build a responsive site. And, the rest of our research key findings are below ( full research details available in full case study ):

During the research, we had sought on what jobs-to-be-done that our users needed. Based on our understanding from the research, we put together 4 main Personas, each's needs are different:

1. Tastemaker wants to become part of FGIT and sign up to be FGIT member, but can't complete this task on the site.
2. Explorer needs to understand the regulation and his/her legitimacy to see if they are qualified to be a member on the site.
3. Royal needs to update the site content as simple and as little as possible.
4. Creative is a student or fresh grade that doesn't find FGIT out-reach enough and needs to find out all FGIT's events and sign up.

Plan It Out

As we knew from our research, FGIT’s membership sign up has to go through its parent site (FGI), so we also looked into FGI’s membership sign up page and analyzed its content and figured out the most optimized path for membership completion and had that link to our FGIT site.

To organize all FGIT’s site content, brand information, event lists and so forth, we first put together a site map to set the structure of the site and started drafting different user flows for error-free experiences.

We also used different Use Cases to identify key moments users will need the site for. Our Use Cases included browsing the site, looking and purchasing event tickets, signing up for membership, and signing up for the e-newsletter.

Solution - Creatively

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 was needed yet how little hands were there to maintain or operate at FGIT, auto-maintenance was 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.

Therefore, FGIT's social media content is used as juicy content auto-populating as someone posts on FGIT’s social media. The social media content will automatically go under the site's 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

Design - Mobile-First Responsive Site

I designed the mobile version of the responsive site.

A few key design decisions that apply to both mobile and tablet-and-desktop designs:

• ● A clear communication about what FGIT means and what is it for, and a CTA to view events at the start of the page.


• ● Membership is appeared three times — twice on the top menu and once at the footer — to increase access points for conversion


• ● Existing member login to parent site (FGI) is added at footer and at membership page for existing members to log in to FGI


• ● We made newsletter subscription visible and always staying at the bottom of each page to increase subscription


• ● On the mobile version, I added “view options” at Gallery, “read more” or “load more” button at lengthy pages for the short-time-spent and finger-friendliness

Mobile Version Design:

To co-work and be agile, the mobile and tablet-and-desktop version was designed at the same time. I continuously inform and communicate with my teammate to align the wireframe and look-and-feel to make sure our works align. Our team worked in this manner throughout the project of informing each other on research findings, another team member prepares the site map or Persona based on information at hand to iterate quick.

Tablet-and-Desktop Version:

Result:

Check it out live

* Full case study includes all research details, Persona details, wireframe iterations and client feedback.