SERVICE CO. | PRODUCT STRATEGY & ROADMAP
SERVICE CO. | PRODUCT STRATEGY & ROADMAP
Home » Case Studies » OmegaFi Mobile App Design
Mobilizing a Greek Membership SaaS Application
OMEGAFI | COMPASSGO MOBILE APP DESIGN
Research
Strategy
UX Design
Overview
Compass is OmegaFi's top B2B solution, empowering national fraternities and sororities to manage finances, fundraising, and chapter communications. Prior to their full SaaS redesign, OmegaFi wanted to lead with a mobile-first app, migrating vital and frequently used functions for chapter reps out in the field.
My Role
-
Conducting discovery research
-
Establishing user requirements
-
Defining project scope
-
Leading end-to-end design process
-
Prioritizing project outcomes
Team
Lead Researcher / UX Designer (Me),
Visual UI Designer, VP. Account Director
Project Duration
6 Months
CHALLENGE
Identifying and prioritizing complex tasks and designing their must-have, mobile-optimized features.
Our goal was to improve the overall usability of accomplishing tasks, increasing productivity, and designing for scalability. Little did we know that our scope would expand due to an unforeseeable prerequisite task. As a result, we needed to pause and redesign the parent application’s entire information architecture to get the mobile app “right.”
SOLUTION
A simplified productivity
focused mobile app to manage Greek activities on the go.
Chapter Communications Made Easy
"I can finally find
the information I need, and fast!
– Field Chapter Representative
"Now, I can do work on the go."
– Fraternity Chapter Manager
We achieved this by...
Conducting a process that led with learning about stakeholder and customer motivations, needs, and goals and ending with a set of strategically designed deliverables to be handed off to OmegaFi's internal development team.
Understanding the Users
As the Lead Researcher, I conducted various research methodologies, leading with interviewing stakeholders and customers. The goal was to better understand business stakeholders' and end-users needs, goals, and pain points to ultimately guide our process and inform the definition of our scope of work.
Understanding the Users
Conducting Interviews
During this project, I conducted interviews with both our internal stakeholders and our valued customer end-users. It was a pivotal part of our research process. These conversations gave us incredible insights into the challenges, needs, and motivations on both sides. It was interesting to learn about how and where their perspectives converged and diverged. Not only did the interview findings uncover usability issues and hidden requirements, but they also provided a window into the client’s business processes (on and offline) that revealed impactful decisions that had direct correlations to the product’s usability issues and poor user experience.
They Spoke, We Listened...
Stakeholder Needs
-
Design for scale
-
Elevate the user experience
-
Improve training and support
-
Achieve customer satisfaction
-
Implement a product roadmap
-
Apply success metrics
Customer Needs
-
Simplify tasks
-
Provide better training
-
Ensure data integrity
-
Improve role-based access
-
Add a self-serve knowledge base
-
Announce feature rollouts & fixes
Although their respective roles differed, I learned how the issues conveyed by stakeholders and users traced back to common usability concerns with the application's design and functionality.
Evaluating the Application's Current State
Evaluating the Application's Current State
To further our research and get to the crux of user challenges with the legacy desktop application, I conducted a Heuristic Evaluation (aka. Expert Review) using UX industry “rules of thumb” and best practices. I systematically reviewed, rated, and prioritized findings and recommended solutions to user-interface issues and opportunities for improvement. Not surprisingly, the findings reported echoed feedback stated in our Stakeholder and Customer Interviews.
Performing a Heuristic Evaluation
The findings revealed from my evaluation helped to validate usability and business process issues stated by Stakeholders and Customers. Many of the challenges stemmed from awkward interaction design and confusing workflow paths required to accomplish tasks.
Personifying
the Users
Personifying
the Users
Taking what we learned from interviews, customer support feedback, and research around the management of fraternities and sororities' membership domain, we created “functional” role-based user personas. By leveraging these personas, we aimed to illustrate the Compass users’ unique needs, pain points, and the capabilities required for daily productivity.
Developing Personas
Activity, environment, and a user segment's general mental model help define customer persona functional needs. Our goal was to understand a better way to accommodate different users who function at different levels of a group or chapter. Based on a series of functions (access to calendar, types of reports, editing permissions, etc.), we were able to identify core needs yet also plan for a flexible experience depending on the role of the individual customer.
Assessing the
"What & Why"
Assessing the
"What & Why"
A prerequisite to constructing a new information architecture for the CompassGo mobile app was to identify key user groups and their associated tasks within the Compass desktop application. Conducting a task analysis was a critical step in accomplishing this goal.
Task Analysis
To inform the development of a new IA, I conducted a Task analysis in cooperation with an OmegaFi business analyst. The BA was integral in providing the foundation for this activity. I asked her to create an excel file that listed job roles that would fall into one of three user groups, Daily Users, Frequent Users and Infrequent Users. Listed beneath each role was a list of Compass tasks associated with each role. This helped us understand performance differences between the different user groups.
​
Upon the BA completing her Excel file, we worked together to sort tasks into three categories of prioritization: primary, secondary, and tertiary. Once all tasks were sorted, we examined which of the primary tasks were a must-have for mobile and which ones did not have a mobile-supported use case. A total of 18 mobile-required primary tasks were identified.
Finally, we sorted the 18 tasks into categories reflecting complexity from most to least complex. They were denoted by levels 1, 2, and 3, with level 1 being the most complex. In the end, we were left with 12 mobile-required primary tasks with the most complexity, of which eight key tasks had to be chosen to stay within our designated project scope.
Key Success Factors
Collaboration:
Client, Business Analyst's domain knowledge
Continuation:
Knowledge leveraged from earlier research
Formation:
Task alignment against personas
Delineation:
Daily, frequent, and infrequent user role types
Differentiation:
Activity performance between groups
Prioritization:
Primary, secondary, and tertiary task categories
Identification:
Total primary–mobile required tasks
The Results
-
​09 Roles with different levels of frequency
-
77 Tasks rolling up to 09 roles
-
03 User groups (Daily, Frequent, Infrequent)
-
04 Daily user roles
-
44 Daily user primary tasks
-
12 Mobile required tasks
Leveraging the results from our task analysis, I created several proposed iterations of a newly organized information architecture. This would become CompassGo’s new mobile app sitemap, which required eight versions, to be exact. At first glance, the existing top-level desktop navigation seemed straightforward and would translate nicely to the app's mobile version – however, this was not the case.
Translating
Research into Design
Translating
Research into Design
Identifying a Road Block
It wasn't until after a detailed exploration of current task flows that it became apparent that an abundant amount of content was unnecessarily divided into numerous and broadly distributed sub-pages. This resulted in issues related to users finding and accessing desired content in a timely and efficient manner. The content structure was flatter than hierarchical and needed to be chunked and organized more meaningfully. This finding was at the root of the application's usability issues conveyed by participants in the customer interviews.​
Stop the Show
Making this observation required immediately halting production and assembling with OmegaFi's domain experts for 2 daylong, on-site collaborative meeting sessions. This pause and regroup was crucial to convey the critical nature of solving this dilemma, which would ultimately carry over to Phase 2’s complete redesign of the desktop application.
Rethinking Our Approach
Our joint activities involved systematically examining each page's content and determining how it could be better structured via a top-down approach rather than broad and flat. The goal was to reveal content to the user in progressive, digestible chunks organized based on the level of detail. The highest level of a content's theme could be introduced first, and the most detailed content and functionality would be a level or two below.
Restructuring the Information Landscape
Restructuring the Information Landscape
Careful consideration of context, content, and users was my approach to analyzing and developing the app's information architecture, which was comprised of systems pertaining to content organization, labeling, navigation, and search. My goal was to balance the needs of the business with the needs of the user and leverage our research findings to deliver to both.
Information Architecture
As mentioned earlier, my efforts led to the production of eight iterations before arriving at a final sitemap. Initially, the desktop navigation seemed straightforward and suitable for the mobile app. However, as I delved into the sub-navigation, it became evident that content was excessively divided across multiple sub-pages, causing usability problems. The structure needed to be more organized and meaningful, shifting from a flat to a hierarchical arrangement.
To address this, I collaborated with OmegaFi's experts during two full-day sessions at their Columbus, GA office. We systematically reviewed each page's content and restructured it from top to bottom, aiming to present information in digestible chunks based on the level of detail. This approach ensured that users could access content starting from a broader theme and gradually delving into more detailed information.
Building Better Paths
Building Better Paths
Careful consideration of context, content, and users is my approach to analyzing and developing a system's information architecture. The complexity and depth of this app's content proved to be challenging when balancing the design of intuitive paths and providing distinct visual and contextual cues to assist users in knowing where they are within the hierarchy of the app and where they came from.
Primary Navigation
The following navigation wireframes represent CompassGo's slide-out navigation to show and hide secondary and tertiary sections. I included the use of a persistent navigational bar, anchored to the bottom of the interface to eliminate scrolling and elevate access to primary sections.
The above wireframes represent Compass's new mobile app "Slide Out" navigation and a persistent navigational bar anchored to the bottom of the app's interface.
Subject Navigation
To solve for the existing complex and confusing navigational scheme, I designed what I called "Subject Navigation." Subjects, e.g., Chapters, Associations, etc., and Members are items accessed in the app's "slide down" list to differentiate it from the secondary and tertiary navigation that “slides out from the left.” This structure is utilized when users view deeper-level information beyond the subject's introductory content.
Contextual Navigation
I designed navigation “in context” to the user's navigational path via active links (i.e., Contextual Navigation) within the body content of a screen. Due to the depth of the app's content, it was necessary to create several levels of navigation to guide the user to deeper level detail with each tap.
Below are examples of my wireframes and their evolution into visually branded mobile app screens. I was very fortunate to have worked with a talented Visual UI Designer, Heather Dickens who understood and appreciated the principles of UX Design. She was a wonderful partner to work with throughout my many wireframe iterations.
Applying
Brand Aesthetics
Applying
Brand Aesthetics
Design Collaboration
I believe working hand-in-hand with visual designers and developers is key. We become the 3-legged stool, the foundation that supports and ensures the success of a project.
Wireframes to Design
There is a delicate balance in translating wireframes into designed screens, interactions, and experiences. I think it's important to foster collaboration with other product team members, such as Visual Designers, Content Writers, and Developers, during each phase of a product's lifecycle. Harnessing the strengths of each team's members' talents only further ensures the success of a project or product's outcome.
WIDGETS (My CompassGo Page)
WIDGETS (My CompassGo Page)
We delivered the desktop application's new information architecture and the CompassGo mobile app IA, wireframes, visual design, pattern guide, system messaging requirements, and comprehensive documentation to aid the OmegaFi tech team during development. This project posed one of the most intricate navigational challenges, aimed at enhancing the user experience. It highlighted the significance of considering the entire scope of an initiative, from start to finish, and the potential consequences of rushing to market without a thorough evaluation.
