vBulletin is a B2B community forum product owned by Internet Brands. It includes a web-based and native app products, but the mobile app had been designed years ago and was not optimized for either iOS or Android operating systems. The mobile app required a complete redesign, for which I created iOS and Android versions.
Role
Mobile App UX/UI designer
Tools
Pen & Paper, Sketch, InVision, Zeplin, Axure, Illustrator
Problem
The B2B forum’s native app had not been updated in nearly a decade and the stakeholders wanted it to be completely overhauled.
Solution
Redesign the mobile app UI to reflect standard iOS and Android designs while preserving ALL existing functionality and features, and also proactively optimizing the user flow where possible.
Outcome
New designs were still in development when I left Internet Brands. I didn’t get to help with the launch and development of the new versions or conduct UAT. Both Android and iOS apps are now available on the site, but it appears that they were not developed exactly per my designs.
Process
Heuristic 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 dropdown.
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.
User Research: Unfortunately, the project was extremely limited in both timeline and resources. Formal user research and testing were not included in scope.
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.
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.
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.
Designs
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.
Summary
I completed the redesign for both of the Android and iOS versions of the app on time. At this point, the app is still in development and so the effectiveness of the redesigned screens could not yet be determined.
Though it has been months since I handed off the new designs to the development team, I spoke to the project manager recently and he said the designs are working really great but that other projects have delayed the development.
When it is completed it would be great to do some more user research and testing to see how the new designs affect the users’ app usage. Also, we can keep an eye on the analytics to see if it increases the download rate and how users work within the app.
maile malin 