The Context
Overview
WiFi Calc is a tool for sales representatives that need to engage with big clients and offer a rough quote of internet infrastructure and hardware installation for offices, common areas, and buildings. All of this without the hassle of getting to understand complex technical topics. Later on, its possible for more technical-oriented staff to delve into specific details with the client's team.
Assignment
Collaborate with a company's partner (Ericsson) to re-design, customize and re-brand a former mobile Application, previously designed and developed for internal use.
Final look & feel of the App's main screens (Mobile and Tablet)
The Team
Production Team (based in Plano, TX)
- Product Owner / Project Manager
- iOS Developer (outsourced from India)
Design Team (based in Irving, TX)
- Sr. UI/UX Designer (myself)
- UI/UX Designer
My Role
Manage Design Team efforts including client's engagement, workflow/timeline definition, stakeholder meetings, lead and participate in the design process (end to end).
Workflow and Time estimation (for Initial Phase)
The Focus
Business Requirements
The main idea for the re-design and re-branding of the App was that the company's partner wanted to pitch and sell the project to one of their biggest clients, Comcast Xfinity (based in Philadelphia).
Challenges
There were a lot of misunderstandings and lack of information between both company's managers, so we didn't have clear objectives from the start of the project. I solved it by gathering requirements and asking for clarification of the context bit y bit (during stakeholders meetings, online and in-person).
The project management was somewhat blurred and sloppy, and they wanted to develop at the same time we were defining flows and screens that wasn't even reviewed (also they wanted to view the final result in one shot). I solved it by clarifying design processes and delivery expectations while focusing, along with the production team, on review and authorize the big picture of flows, features and layout structure, so we could deliver with different levels of detail at a convenient pace for both parties.
UX Objectives
Design a mobile app with lots of technical details, but make it super easy to use for the sales representatives and even playful to watch for their clients during sales meetings.
For this, we researched some gamification mechanics and how could we implement those concepts within the flows of the App to achieve the tasks.
Analizing and redefining the wireflow.
Defining screen types, layout and interaction of UI components.
Team Sketching in bigger format and "Card-Sorting" to define the main flow and integration of gamification mechanics like: Simplifying input by partial disclosure of information in steps, visual feedback of selected options and progression.
Axure RP prototype in wireframe mode to highlight data-driven interactions in some of the main screens. It was useful to confirm the flow we were aiming at with stakeholders, and users.
Hi-Res interaction flow of the App, showing main Flow and Sub-flows.
Click-through prototype from Adobe XD, to showcase visual style, navigation flow and basic interactions.
Design Specification detail
Specification of transition and animation effects at an early stage.
Micro-interaction prototyped and animated in Principle for mac. Showing transitions on one of the key selections Single or Multiple buildings.
The Outcome
Client Feedback
Because of the misunderstandings at the beginning of the project. Our first shots were somewhat superficial, we started changing and modernizing visual styles to the former App. Later in the process, there was a particular moment, when we were understanding better the requirements and the project's context, that the Product Owner told us that he wanted the App to look Sexy (literally).
After all the process, the Product Owner had a chance to showcase the App prototype in some meetings at Philadelphia, with their client. Then somewhere near the end of the engagement, he told us that we achieved that Sexy look & feel he wanted and that the feedback from their client was great.
Collateral Benefits
This project was highlighted as a successful case study at Ksquare.
