B2B Forum Mobile App

Role

Mobile App UX/UI designer
Tools: Sketch, InVision, Zeplin, Axure, Illustrator

ios screens

Objective

vBulletin is a B2B forum website and mobile app owned by Internet Brands. The app had not been updated in nearly a decade and needed to be completely overhauled. This included redesigning the functionality for both iOS and Android, preserving all of the existing functionality, and also staying consistent with iOS or Material Design standards as much as possible. 

vbulletin android screens

Process

Content Evaluation
Becoming familiar with the functionality of every available feature in both iOS and Android versions was imperative. I played with both to become familiar with how the app worked in each OS. After playing with the app I discovered a few major issues:

1) Navigation: The main navigation was treated as a dropdown at the top of every screen

2) Filters: Filters existed in each module, some with another filter layer. With the additional main navigation dropdown, it was akin to having filters in filter in filters. A dropdown for main navigation, a bottom menu, and an additional filter icon was just too many options in one screen.

3) Location Indicators: There were no page titles and no indicators showing where a user was within the app. On most pages, the entire header was taken up by the main navigation dropdown, a back arrow, and a filter icon. If the user tapped into the Forums module, then tapped a subforum, and then an article, and then a comment, and so forth, the page title would STILL look nearly identical to how it did when they first tapped on Forums from the navigation dropown.

4) OS Style: The app appeared nearly identical in both iOS and Android phones and did not follow any common or modern mobile app patterns.

5) Hierarchy: Comments, replies, and posts within articles took the user to another page, adding another child page. This added another layer of complexity owing to the frozen title bar without breadcrumbs or location indicator of any kind.

6) Pagination: The pagination was taking up a large chunk of the screen right under the header (and the font was unusually large!)

7) Visual Style: Overall the app looked old-fashioned and was difficult to read. There was little negative space, inconsistently sized images (if any at all), and really tight leading. Account icons included borders. App icons were often unintuitive or unnecessarily used.

Workflow Map

In order to map the entire workflow of both iOS and Android apps, I took screenshots of every legacy screen in iOS. I organized the screens into the main modules and then mapped them into one expansive workflow, detailing all of the app’s features and behaviors. The main modules included Login, Activity, Forums, Articles, Blogs, Search, Account (logged in user) with subsections of the account and Moderator views. 

 

Simplified Workflow Mapvb-sitemap.png

Workflow Map with Legacy Screenshotslegacy workflow

Wireframes
To prototype and reiterate on the filters in iOS (where it would be harder than Android (with its native Side Drawer Menu), I created wireframes for the main views in order to ascertain that I could fit all the myriad filters and functions into the new designs. I started by hand sketching a few options and then created the wireframes in Axure.

wireframes1

iOS and Material Design guidelines

I referenced both throughout the design process in order for the respective apps to function as closely to out-of-the-box iOS and Android apps as both the end-users, and the developers were accustomed. 

Competitive Analysis and Pattern Research

I researched other forum applications and studied the functionalities and features in each to best design the new app using the most commonly used icons in the most popular applications, like Medium, Facebook, Twitter, popular news mobile apps, and so forth.

Design Solutions

My proposed design updates focused on solving the major issues I initially discovered and informed by the competitive analysis, app pattern references, and iOS and Material Design guidelines.

1) Navigation: The main navigation was solved by moving it to the side drawer in Android and creating a bottom icon navigation in iOS

2) Filters: After moving the main navigation into their respective, native OS locations, I removed the filters from hiding under a pop-up window and moved them to a visible, segmented controller with the main content filters.

3) Location Indicators: The main navigation redesign allowed me to include Page Titles on almost every page so the user can always tell where they are in the app!

4) OS Style: I created updated designs for both Android and iOS, using native elements to both. In some cases this proved a bit challenging in iOS as Android could easily hide most of the navigation in the side drawer, but iOS had many of the features and functionality in the bottom bar.

5) Hierarchy: Instead of hiding comments and replies and other actions available within article discussions, and requiring users to open a separate screen to discover what actions were available to them, I used common icons for ‘flag’, ‘reply’, ‘edit’, etc, and pulled them out of the following page. This removed the need for more child pages.

6) Pagination: I moved the pagination to the bottom of the page and minimized the font size.

7) Visual Style: I modernized all visual designs. The iOS and Material Design guidelines informed a lot of the restructuring of the UI.

 

This slideshow requires JavaScript.