Telecom Mobile
The Project
The Telecom Mobile project was born out of a “labs” app that was created to leverage existing dynamic network functionality that allowed users to view and control more of their network than ever before. Once the technology was proven, the business value of the app became readily apparent to all stakeholders and it became necessary to make the app (and underlying architecture) customer-ready.
I was already consulting on another project at the company, so I was asked to look at the existing app and suggest some changes. That exercise led to my full involvement in the project for 3+ years, seeing the app design through its first official release and many subsequent feature releases.
NOTE: This project was completed while I was a contractor for CGI Business Consulting. The work was done under a non-disclosure agreement (NDA), so all of the designs and deliverables shown here have been significantly altered to remove any connection to the specific client and it’s products.
My Role
I was brought in to the project to take the labs app design that the development team had created, merge it with features from another app that allowed users to view service tickets and create a single, cohesive, cross-platform experience that was unlike anything released by the company before. There wasn’t a budget for user research and usability testing on the project, so a lot of the user research came from existing data and testing came in the form of the Agile “release early and release often” approach and learning from user feedback (which is very effective).
Tools Used
Axure RP Pro 8, XMind Free, LibreOffice Draw, Inkscape, GIMP, Sketch/InVision, Affinity Designer, ColorMind.io
Duration
3 years from initial design through multiple official released versions. Attended daily stand up meetings and maintained the design throughout multiple releases. Worked within an Agile kanban environment to create designs for user stories that were to come in future sprints.
The Team
1 UX design contractor tasked to assist me for the first 3 months of the project.
2 Mobile app developers working with the Ionic Framework tech stack.
1 QA engineer
1 Scrum master
1 Business analyst (with direction from managing senior staff)
Ongoing collaboration with corporate UX and marketing teams
User Research
“Provide a modern, high-tech look-and-feel that allows the user to monitor and act upon their network health at a glance with minimal interactions/clicks.”
The project did not have the budget or time for extensive up-front user research. Since the ask was to blend the features and functionality of existing apps, there was an opportunity to leverage existing user research from these projects/initiatives. In order to facilitate the initial design process, I was able to put together relevant user personas based on existing user data and interviews with internal subject matter experts.
“Lesson: Leverage existing user research and documentation from other teams and other departments and learn how to interpret it to glean insight into user needs and goals.”
Task Map
The project budget allowed for an additional UX designer for 3 months to help with the up-front research and design. Fortunately I had worked with the contractor at a previous job, so we already had a compatible working style. Together, we were able to quickly work from the user personas into a task map. I used Pencil Project since it is free and cross-platform, this allowed the document to be shared and edited by other key stakeholders on the team.
The team went through a series of whiteboard discussions to talk about user goals, what users need to see and how all of the major features and functionality in the backlog related to those goals. We all quickly began to see patterns arise. The concepts of a social media-like newsfeed and a heads-up-display-like dashboard both provided quick access to important information and features. As the app matured and new features were added, this map was used to ensure that the original user needs and goals were met.
“Open source software apps like LibreOffice, Pencil Project, Inkscape and GIMP are very useful for design projects where budgets are tight and the approval process is slow.”
Wireframes
From the task map, we did multiple rounds of design on paper. Once we settled on a solid design direction, the drawings were moved into a low-fidelity Sketch project. One small challenge did arise at this point: the other designer only worked on a Mac and his primary UX design tool was Sketch, but the client was mostly PC-based and used Axure RP. We found ways to work around the issue and, because I can comfortably work between platforms/tools, we made it work. I was also able to leverage Sketch later in the design process.
From Sketch on Mac to Affinity Designer and Axure RP on PC.
We were able to evolve the task map into a site/feature map with the wireframes included for reference. The extended team found this document to be very useful in visualizing the user goals that we had discussed together. I used LibreOffice Draw to create this diagram, again because it is open source and cross platform allowing for easy collaboration.
Prototyping
Once the team agreed on the direction of the the initial low-fi wireframes design, I created a click-through prototype in Axure RP so that key stakeholders could “use” the app and we could do a quick round of in-house usability testing.
While the design tested well with internal users, proper usability testing would have been helpful at this point to solidify the design with input from actual customers. I put together a detailed usability test plan and script along with recommendations for conducting the test. But, as often happens, schedule and budget didn’t allow for formal testing, so we pressed on with the data that we had.
“Budget and schedules can sometimes be less than ideal for designers. The art lies in finding ways to do great work, regardless of project limitations.”
Moodboards
Moving into the design phase, I created some initial moodboards in Sketch based on the wireframe designs. As a starting point, I worked with concepts using Material Design and iOS standards.
Material Design Moodboard
iOS Moodboard
Competitive Analysis
After the initial round of moodboards, the product owner wanted to move in a more bold design direction and also made the decision that the app would be built using the cross-platform Ionic framework: one code base for any platform. The product owner wanted to convey a modern, high-tech look-and-feel. He challenged me to look at health tracking and video game app design to come up with something that would be unique for the company and not necessarily follow the corporate brand. After quite a few more rounds of design, dark color schemes were what interested the client the most.
The client responded positively to this “Dark Designed Apps” board on Pinterest.
The last rounds of design were done using what we called a “hybrid look-and-feel” - a single, OS independent design that could work on all mobile platforms. The dark theme was generally well-received, but the team also knew that it would be a difficult sell to get the design approved as a customer-facing application.
