FMeX Application Design & Development

FMeX delivers a powerful, intelligent and intuitive app experience that allows you to easily and securely deliver the most relevant content directly from your desktop and mobile devices.

FMeX Web Application Problem

This is a flow map of the standard user flow for the FMeX application. As product updates and new additions to the application are made, the flow map is updated along with it. There are additional flow maps for each user type, as these users have access to different parts of the application.

The stakeholders of Financial Media Exchange (FMeX) had a vision and a business plan. The FMeX platform would help Financial Advisors manage their entire content marketing process in one web easy to use web application, the FMeX platform. Being able to manage content creation, distribution and measurement on one platform, it makes the Advisor’s marketing and lead generation quick and easy: Ultimately generating more valuable communication with clients and leads, and growing their revenue stream.

What the stakeholders did not have is the FMeX application itself, or any creative digital and print marketing material to promote and sell the application to prospects. This is where me and my team came in.

FMeX Web Application Strategy

Wireframes were an essential part in the ux/ui development of FMeX. We started with the wireframes, displaying all the content and data without any real Interface development to make sure we are designing the correct layout, interactions and user flow.

Along with the FMeX stakeholders, I devised a plan to implement the development of the web application as well as the marketing to support the sales of the application. This section details the Web Application Design and Development. The goal for the application was to funnel users into a free trial, get them used to the application and its features, have them use it, and ultimately buy a subscription. We wanted to make the application solve their problem of communicating relevant financial information quickly and easily while building a repetitive system they want to come back and use again and again.

The research phase of the product development was outlined in the business plan. The stakeholders knew the market they were looking for, the target number of users to convert to make the product cost break-even and projections for profitability.

Another part of the research phase is building user personas, which are different than marketing personas. We needed to solve the user’s issues / needs as quick and effortlessly as possible. We started with a standard user persona for the base profile, which we called the advisor profile. We researched different products, setup trials and tested out these products. Reviewed reviews on these products, ask users of these products what worked and what were the pitfalls of these products. The main takeaway from the research an analysis was that these Advisors were looking to be able to share curated content easily across multiple channels (social media, email, print and their own website).

Equipped with this information, we were able to start designing flow maps and wireframes. Wireframes were an essential part in the ux/ui development of FMeX. We started with the wireframes, displaying all the content and data without any real Interface development to make sure we are designing the correct layout, interactions and user flow. At that point, we were ready to design and develop the UI.

FMeX Web Application Solutions and Deliverables

With the wireframes and flow map in place, we were then ready to design the interface and build out the application. As this was a speed to market concept for our application, my skillset in UX/UI design as well as front end development came in real handy. I was able to prototype most designs, UI, animations, etc. in actual front-end code (i.e. HTML, CSS, JavaScript). When needed, I created interactions in Illustrator, Photoshop and adobe XD.

With the wireframes and flow map in place, we were then ready to design the interface and build out the application. As this was a speed to market concept for our application, my skillset in UX/UI design as well as front end development came in real handy. I was able to prototype most designs, UI, animations, etc. in actual front-end code (i.e. HTML, CSS, JavaScript). When needed, I created interactions in Illustrator, Photoshop and adobe XD. Working with my web backend developer, we built the entire web application to user and stakeholders specifications. Some technologies used in our development were HTML, CSS / SASS, Javascript, Ajax, JQuery, Bootstrap, Git, PHP, MySQL, AWS Services to name the essentials.

At the end of our hard product launch in early 2016, we had an application that allowed users to login, view new and recommended content, search and share content to multiple social media platforms as well as html email and see stats on their email and social campaigns. Users were also able to publish our content on their websites and download and print on demand to share with clients and prospects. We made it quicker and easier for the user to market and keep in touch with their clients and prospects, so they can spend more time growing their book of business and supporting their customers.

As with any application, we have enhanced, revised and added to the application. Shown below is a sample of the design and development process that went into building the FMeX application.

My Contribution

  • Creative/Art Direction
  • UX/UI Design
  • Web/Graphic Design
  • Front End Development
  • Copywriting