Embedded Files
At PeopleAdmin, we addressed the long-standing customer need for mobile access by developing a dedicated mobile portal for the core platform. I designed a highly anticipated and well-received mobile solution that exceeded customer expectations.
4 min read · EdTech · Mobile Design · Prototyping · Visual Design · Interaction Design
The customer situation
SelectSuite was PeopleAdmin's core offering, providing a comprehensive HR toolset tailored for higher education. Mobile productivity tools have become the norm, so it's not surprising that higher ed administrators expected the same level of convenience and accessibility from their enterprise solutions.
Early concepts for mobile pages from the Product Owner show the density and complexity of the legacy platform and the challenges inherent in translating it to mobile.
Product development goals
The project team consisted of a Senior Developer, a Product Owner, and myself as the Senior Designer. Given time and resource constraints, we decided to develop a dedicated mobile portal instead of overhauling the entire product for responsiveness. Our aim was to ensure that the new mobile client had all features and functionality of the existing desktop product.
Large amounts of text needed to be accommodated in the new interface.
Design pattern research
During the project (that was a rather straightforward translation of the desktop client into a mobile client) my research primarily centered around finding best practices and mobile exemplars that were handling significant volumes of information. The New York Times, the BBC, and Google Material design patterns influenced the navigation and button layout, but Wikipedia's implementation of progressive disclosure was particularly effective at managing vast amounts of text.
Gmail (Material Design) and Wikipedia exemplified some best practices for similar content.
Designing and prototyping
To create the new layouts and user flows, I started by building low-fidelity mockups using Balsamiq. This allowed me to refine the details with the product owner, ensuring that various features and tables of information would present well on a mobile screen. I used Illustrator and InDesign and to explore different typefaces and develop the new styling and specs for the portal.
Low-fidelity Balsamiq mockups were crucial for working through layouts and design decisions with other stakeholders.
Creating detailed documentation (above) saved many back-and-forth discussions with developers because Axure prototypes didn't include a native inspection tool at the time.
As the project progressed, it became clear that a high-fidelity interactive mockup was going to be necessary to ensure a smooth transition to the new visual and interactive experience. I used Axure to build a fully interactive UI prototype. It was an extremely useful tool for gathering feedback from both internal and external stakeholders. Anyone with a link to the Axure prototype could try out the new experience on their personal device. I also incorporated a self-guided tour feature to allow for exploration of the pages while still demonstrating a user flow.
Allowing stakeholders and users to explore the new UI on their phones helped focus design and development efforts on the most important elements. It also helped to determine how effectively we were presenting text on people's actual mobile devices.
Conclusions
The introduction of the new mobile portal received overwhelmingly positive feedback from management and from customers who had eagerly anticipated a mobile solution for years. This project demonstrated a company commitment to addressing customer needs and showed that their input was highly valued. The mobile portal quickly gained popularity among many users as their preferred method to access SelectSuite.
On a personal level, this project grew my prototyping skillset with Axure (which is invaluable for effectively communicating design concepts), and my use of it has only expanded throughout my career.
Texts from an excited customer to the Product Manager.
Check out my other examples or learn more about me.
Google Sites
Report abuse