Adapting a content-rich web application for mobile devices

Business Problem

GlobeSmart is an online application that allows businesses and universities to better understand how to work with other cultures. The product had been successful as a desktop application, but now the client wanted to adapt and format it for use on iOS and Android devices. They also wanted to expand their audience to make the product useful for a new user group, individuals who may be traveling or doing business with individuals of another culture. The goal of the project was to redesign the existing GlobeSmart desktop application as a multi-platform native mobile app, with the addition of features tailored for the new user group.

My Role

Project Planning + Leadership. I was the lead designer on the project, overseeing another designer based out of Chicago and collaborating with two mobile developers and a project manager. I was responsible for creating the UX project plan and executing the project approach defined by that plan. I created a capacity-based project plan to effectively utilize both myself and my teammate over a set amount of weeks. This plan was successfully executed from beginning to end of the project. Rather than planning around specific tasks or deliverables, I set milestones in the project plan as checkpoints with the client and defined general timeframes for specific tasks to be completed. With the client making business decisions as we went along, the design was frequently changed, and this approach allowed for the flexibility to adapt as needed.

Interaction + Visual Design. I was responsible for overseeing the direction of the overall app design and utilising my teammate’s strengths in interaction design. We collaborated together early in the project to ideate and sketch, and he used his Axure skills to create prototypes to demonstrate our ideas to the client. I created the visual design mockups based on these early prototypes and additional incorporated feedback from the client. Business decisions continued to be made and changed throughout visual design, so it was a very fluid process in which I was often modifying interactions and creating the visual aesthetic simultaneously. During these rapid iterations, I worked closely with the iOS and Android developers to validate designs. They were instrumental in helping refine the design and providing guidance on mobile best practice.

Stakeholder Management. I facilitated design conversations and solicited frequent feedback from the client about the designs. Frequent feedback was important to ensure the designs were aligned to the client’s expectations, considering the timeline and budget constraints. Managing expectations also became crucial as there were several features the client requested, but weren’t feasible to include in the time we had.

A Unique Set of Challenges

Distributed Team. The client was located in California and my other designer was based in Chicago. Much of our collaboration had to happen remotely, with limited in-person work. I set up daily video stand ups with my fellow designer to discuss our goals for the day and resolve any immediate issues. We also had weekly calls with the client so that we could validate designs and get frequent feedback. In the early ideation stage of the project, I had the chance to work with my fellow designer in-person. This made sketching concepts and working through complex design problems far easier.

Unknown Dev Team. One of the biggest challenges we faced was that we didn’t have a designated dev team for the project. We had iOS and Android developers that were available for consult, but were not resourced to the project full time. The client hadn’t decided how to they were doing to proceed with the development phase of the project at the time of design. While we were able to utilize our development resources, there were many factors we had to consider knowing we may not ultimately be the team who built the app. We prepared for a total handoff of design and development resources, which included a detailed annotation deck that I created for the client to reference after the project’s conclusion.

Complex Design Requirements. The exisiting desktop application had a rich feature set that had been developed and tested over time with the client’s core user base. These features not only needed to be reimagined for a mobile device, but additional features for a new user group had to be considered. The client also wanted to monetise the app and offer content that could only be accessed by paying customers. Based on these requirements, we identified two user paths through the app: one for current business or university customers who were already paid subscribers to the content, and one path for individuals who were new users of the app. New users would be able to view free sample content and have the ability to purchase full content at any time. The client was adamant about preserving the integrity and purpose of the existing features, but open to hearing our ideas about how these features could be adapted to mobile. This presented an interesting set of design problems for us to consider.

From Web App to Mobile App

One of the most challenging problems we faced was how to adapt a feature called the GlobeSmart Profile for a mobile device. The desktop application allows users to take a survey that creates a profile based on their answers to a series of questions about their personality. Users can then compare their personal profile with the profiles of multiple individuals or countries. This comparison is visualized through a graph that not only shows users how they compare to others based on their survey score, but also provides content that guides users with custom tips on how to maximize interactions with others. Since desktop obviously provides more screen real estate to work with, this feature works well in that capacity. But when it came to adapting for mobile, we had to figure out how to keep the content valuable for the users while losing screen real estate. We sketched multiple iterations of this feature and talked through many possibilities. We presented a few ideas to the client that offered an outside-the-box approach, and the feedback we received was that we needed to stay closer to the existing feature.

Existing GlobeSmart Profile desktop application

The ideas we presented to the client showed the graph in portrait view, but this also limited the way the information could be presented. The client felt the graph visual was crucial to the core value of the application and requested that it be viewed in landscape. So we updated the design to show the graph in landscape, but we also proposed limiting the number of comparisons that could be shown on a mobile view.

GlobeSmart Profile in landscape view

We packed a lot of content into limited screen real estate by not making all of it immediately visible to the user. The challenge with this was making it obvious to the user that valuable content existed and also making it easy for the user to access this content. One of the ways this was was done was through coach marks to users in their first view of the profile feature. We also aimed to use familiar interaction patterns and icons as much as possible to lessen the chance for user confusion in an otherwise multi-faceted and complex application.

Using coach marks and familiar interactions to indicate user actions 

An additional challenge presented itself in considering the user flow through the app. We had already identified two primary user paths, but there were multiple subpaths as well. Some example scenarios and questions we asked:

I’m a new user to the app. I’ve seen a preview of the content, and I want to purchase more. How do I access content for purchase? And when I purchase this content, where do I find it?

My company has purchased a subscription for me to use this app. I’ve just completed my survey and want to compare my results with my colleagues. How do I find people to add? What if those people haven’t logged into the app or taken the survey yet, how can I compare myself to those people? How does comparing myself to an individual or group of individuals differ from comparing myself to a the profile of a specific country? And where do I find custom tips to help me better my interactions with this person or country?

Based on whether they were an individual user or had paid access to all the content, the user paths differed slightly and there were many actions that needed to be available to users along those paths. To help us solve this problem, my teammate and I used mobile sized notecards to sketch various screens and laid them all out in front of us on a table. We then physically moved the cards around to experiment with different flows. My teammate and I took turns playing the roles of different users and asked each other questions as we moved through our hypothetical flows. Through this process, we were able to identify gaps in our proposed flow and iterate until we found one that worked better. Even though the final design didn’t necessarily follow our initial ideas, testing our ideas in this way during this early ideation process paved the way for our success later on.

Sketching early concepts + using mobile-sized notecards to create user flows

Final User Flows

Users can access a variety of content from the app; this flow shows how an individual user accesses content related to a specific country
This flows illustrates the various user interactions within the complex GlobeSmart Profile
GlobeSmart Profile menu for a corporate user

Lessons Learned

Overall this was a pretty intense project, but it was one of my personal best learning experiences. It was quite challenging not to have my other designer co-located with me for the duration of the project, especially with one as complex as this one. But we found ways to adapt and were able to keep the lines of communication open throughout.

I had done some mobile work prior to this, but it was my first multi-platform app design project that I also led. One of the biggest lessons for me was how native apps were different to what I was more used to designing for in responsive websites. I was also much more familiar with iOS devices prior to this, and I began to understand how designing for Android differed. Due to time, we weren’t able to design a completely separate experience for Android, but we called attention to the areas in the design that would differ from iOS. I definitely gained this knowledge along the way, with the support of the mobile devs and more experienced mobile designers on the team.

I also feel like my design thinking reached a turning point. I challenged myself to think outside the box and look at the intricacies of interaction design closer than I ever had before. Considering all the possible use cases and the potential paths of the user for a complex mobile app was not easy, but it expanded the approach I took to solving these challenging problems. This project stretched me as a leader, project planner, and design thinker, and it helped me become more confident in my own design approach.