In this project, I spearheaded the designing of a comprehensive white-label app and content management system (CMS) as a feature enhancement for the Fragmob platform. Tasked with creating a versatile solution that could be customized for various clients, I meticulously crafted a user interface that seamlessly adapts to diverse brand identities while prioritizing a unified and intuitive user experience for both Android and iOS. Leveraging my expertise in user-centric design, I implemented an efficient CMS that empowers clients to effortlessly create, organize, and publish their content to their customers and sales members.
The white-label app, marked by its clean aesthetics and intuitive navigation, serves as a flexible canvas for various businesses to be able to deliver content to their sales members as intended, but to also allow their sales members (our users) to able to easily ingest that content and be able to share and communicate that content or knowledge with their prospects and customers. Through a meticulous design-thinking approach, I successfully delivered a scalable, customizable, and visually cohesive solution, showcasing the importance of proficiency in creating impactful digital products tailored to meet the distinct needs of a diverse clientele.
The Luxx brand, seen in the designs here, was our internal fake direct sales company used to showcase designs and prototypes internally or for user testing.
. . . . . . . . . .
Done with, for, and on behalf of Fragmob LLC
December 2016 - December 2017
Being a content delivery and content receiving system simple and clear organization was the most important element for both experiences.
The category sections were the first layer that allowed for the highest level of organization for both the CMS and the media app.
On the web portal CMS side sections allowed for our back office users to be able to view and manage their content by the type of media they were trying to deliver to the app users, their sellers.
On the app side the sections allowed users to see the latest media items while also being able scroll through the media on the app by section.
In the CMS we gave customers some default categories for latest content and by content type which were the most common way we found users looked for media on the apps. We also gave our customers a way to add their own custom sections to allow them to organize content in what ever way was best for their user/sellers or what best fit their company brand.
To add to the customization for content delivery they could sort the sections in order as they would be listed on the app. Users could sort by drag and drop and auto saving.
Any custom section a customer could edit the name or add additional language translations.
From the sections page customers could sort the display order of the media items in each section to further customize the delivery of content.
Additionally from the sections page customers could sort the display order of the tags in each section to tailor the filtering experience.
Another tool we gave customers to manage their users content was to allow them to hide and show sections they wanted users to see or not see in the app. This allowed customers to create and set up the media section entirely as they wanted before releasing to users.
This function was here to complete the full CRUD (Create/Read/Update/Delete) functionality for section in the CMS.
The different category sections are listed vertically according to how they were sorted in the CMS.
The media for each section is listed horizontally and could be side scrolled by users to see all the media items for that section.
Beyond side side scrolling to see all the media for a section a user could select the “See All” button and be taken to a view where all of the media with more info is listed vertically.
Through a fuzzy search users could search by key words to find specific media items.
This view allowed users to view the media they have downloaded to their device so they could view offline. This was an important feature for the users/sellers so they could show potential customers media at events when their was poor connection or no connection.
This view allowed for users to view a specific list of media that they have marked as their favorites. This feature was important for user/sellers because it allowed them to pre-make a set of content they wanted to use during a sale.
The different category sections are listed vertically according to how they were sorted in the CMS.
The media for each section is listed horizontally and could be side scrolled by users to see all the media items for that section.
Beyond side side scrolling to see all the media for a section a user could select the “See All” button and be taken to a view where all of the media with more info is listed vertically.
Through a fuzzy search users could search by key words to find specific media items.
This view allowed users to view the media they have downloaded to their device so they could view offline. This was an important feature for the users/sellers so they could show potential customers media at events when their was poor connection or no connection.
This view allowed for users to view a specific list of media that they have marked as their favorites. This feature was important for user/sellers because it allowed them to pre-make a set of content they wanted to use during a sale.
The tagging system was an additional way for customers to organize their content for their app user/sellers so they can look for or filter media by additional identifiers.
The identifier tags were primarily used by our customers to highlight items by year, event, level, or sale type to further help tailor media for specific scenarios and specific user/sellers.
The tagging system was an additional way for customers to organize their content for their app user/sellers so they can look for or filter media by additional identifiers.
The identifier tags were primarily used by our customers to highlight items by year, event, level, or sale type to further help tailor media for specific scenarios and specific user/sellers.
The last level of organization, but by far the most important part was the media content itself. Some of the complexities needed by the customers here was related to the assignments and configurations of each media.
Customers needed each media item to be able to be configured by which countries had access to it, which rank of their user/sellers had access to it, what section category is it assigned to, what tags should be connected to it, can it be shared, can it be downloaded, when it publishes, when does it unpublish, and what translations does it have.
The first step when adding new media was for the user to select what media type they were looking to add.
The next step was for the user to upload a media file. Users could do so by drag and dropping a file into the upload area or by selecting the upload file text and then selecting from their devices files.
Many of our customers had users/sellers all over the world and it was important to them that some of the media they added to the app would only be accessible to specific users. In some of those scenarios the specific users would be specific to certain countries. Users could make this selection through a multi-select menu.
In direct sales companies a sellers rank can be a very important determining factor. It was very important for our customers that they could make some media exclusive to only user/sellers of certain ranks especially when notifying them of things like training materials or events.
The multi-select tooling to allow the customers to assign a media item to a custom content section was there to allow them to fully customize the presentation of content for their user/sellers.
The multi-select tooling here was another way for customizing media delivery to app user/sellers and help them better find content they might be looking for.
Timing of when some media was visible to user/sellers was very important for promotion of events, products, and training materials. The selection of start and end dates by calendar pickers was added as the solution.
Some media our customers wanted to be only available to their user/sellers and not shareable to the sellers prospect customers. Also, our customers wanted only some content to be downloadable for copyright reasons. Simple on/off toggles were added to make it easy for customers to make those configurations.
Each media item would automatically be added to the content section type that it matched. In some scenarios such as event or product promotions customers only wanted media visible to a specific content section. A simple toggle was added to hide or show a media item in its content section type.
This was an additional configuration tool that allowed customers to add a button to media when shared by an app user/seller usually to media for products and that button would take people to purchasing page. A link field was added so that button has a URL to link to and then some data elements that each user/seller has attributed them could be added so the user/sellers could have their shares and sales tracked for helping the direct sales company giver their sellers awards and rank promotions along with data on the performance of their products.
The title was a just a simple text field while the description area was a WYSIWYG so our customers could format the media copy however they wanted.
Our customers had user/sellers all over the world speaking many different languages. An area to allow the customers to add translations to each media type to help solve that and help reduce the need for duplicate media. Also, the translations all being on a single media item helped our customers track the performance of each media item easier.
The unpublished media displayed the date it unpublished. Users could republish an unpublished item but would have to do that while editing the media item and setting a new publish and unpublish time.
These media items showed when they were published and upon hover of the published date box it would show the scheduled unpublish date if there was one. Also, published media allowed users copy and save links for sharing the content out side of the app, embedding it on other sites or blogs, and for setting deep links in the app for this media item from another media item or other area within the app.
Most of our customers had hundreds of media items so a search by keyword was very important for them for when finding a specific media item.
These were essentially the main filter to make it easy for our customers to find media by its publishing state. Visibility to this was very important for managing the content so we added tabs for quick filtering visibility to this.
Additional filters were added to allow our customers refine their content by different media configurations to help them manage at scale.
Most of our customers had many portal users managing media and to help keep those users in our environment and make the data sticky and also help the users not have to work in multiple tools. Also, users had the ability to publish now.
When creating and editing media users could set a time for scheduling and in the display that date was shown. Also, we gave users a quick action to override that and publish now.
Tapping on the star icon allowed for users to favorite a media item. Filled stars showed items that were favorited while outlined stars indicated not favorited. Also, there was a page users could access to view exclusively there favorited media.
Tapping on the download icon allowed for users to download a media item to their device. Only media items that allowed for downloading would show this icon. Filled download icons showed items that were downloaded while outlined download icons indicated not downloaded. Also, there was a page users could access to view exclusively there downloaded media even when their device wasn’t connected.
When selecting to share a media item users were presented with a list of their contacts with searching functionality to choose who to share too, along with a button that gave them access to sharing via any other app the had on their device with the media already unfurled in the send to make sharing flexible, easy, and intuitive for users.
Tapping on the star icon allowed for users to favorite a media item. Filled stars showed items that were favorited while outlined stars indicated not favorited. Also, there was a page users could access to view exclusively there favorited media.
Tapping on the download icon allowed for users to download a media item to their device. Only media items that allowed for downloading would show this icon. Filled download icons showed items that were downloaded while outlined download icons indicated not downloaded. Also, there was a page users could access to view exclusively there downloaded media even when their device wasn’t connected.
When selecting to share a media item users were presented with a list of their contacts with searching functionality to choose who to share too, along with a button that gave them access to sharing via any other app the had on their device with the media already unfurled in the send to make sharing flexible, easy, and intuitive for users.
