My team redesigned a web application that helped marketing strategists made better sense of data and saves time and money in performing business analysis.
The results: 47% more activation rates and boosted sales and time on site.
I initiated and led the design of BAO for over 2 years of research, design, testing, iteration and launched. With the new BAO, marketing strategists can utilize demographic, consumer spending, and business data more effectively and better understand their potential customers’ lifestyles, purchasing behavior, and businesses in the market area.
Challenges
We discovered three key issues based on the previous studies:
Too many open panels and dialogs that covered the map which was the most important area of the application
Hard to browse, navigate and select through a long list of items (7,000 variables)
Outstanding functionalities of the application were too hidden therefore most of the users were not aware of these features
Connecting BAO with the core Esri product
Globalizing BAO to 7 countries
What we did
Before design started, we did field studies to clarify some hypothesis and redefined user requirements. Then we sketched out possible solutions and tested them internally. We combined all the positive features that participants listed and finalized our first round of design. Next we moved on to wireframe and prototypes iteratively for at least 5 major rounds to test on end users. During the design stage, I worked closely with the dev team to verify and modify designs.
Process
Step 1: Contextual inquiry
We started off the design process by revisiting the personas and examining the feedback we had received from users. The feedback channels we have with our users include Google Analytics, previous usability research, tests and emails. In addition, we did 3 field studies to better understand our users. We re-determined requirements, observed how users' environments were set up, what type of technology they used and how our product was being used in their daily work.
Given the limited amount of time, we decided to focus on three main factors:
Unify the user experience across the whole app.
Create new ways to display, browse and select variable(s)
Revamp the experience for new users which enables us to surface outstanding functionalities of the app
Step 2: Sketch & wireframe
Based on the research results, site map and the user requirements we had, I broke down all the workflows into 2 categories: Beginner users and Advanced users. We then determined how much flexibility we should provide for them in each workflow. After the design team had those share understandings in minds, I started to created sketches and wireframes. Most of the pages got re-architected and the layout was completely changed to unify the UX.
We presented our wireframes to the key stakeholders weekly to make sure the designs were feasible in the given timeline. If the design got rejected by the developers but I had a solid focal point, I would provide examples and usability test findings to back up our design. However it was inevitable that I encountered disagreements during the process. In these cases, I would find alternative solutions with developers or push back my design for future releases and focus on the capabilities we then had. To me, it is important to value every party’s opinions so that everybody can feel respected and their opinions reflected.
Step 3: Usability test
Each iteration, we tested our wireframes of various workflows in Esri café monthly to catch the major usability issues. This saved us a significant amount of time and effort before testing them on real users. We distilled key issues from the testings, presented to the team and refined our wireframes.
Major issues we found from these café tests include:
Data container was not easy to understand and navigate
Beginners needed some kind of guidance to see what was available in the application
Search tool was easily overlooked and misunderstood
After over ten iterations, I created high fidelity prototypes of several key workflows. This time the UX team tested the prototypes on both internal and external end users with Think Aloud Protocal to identify critical usability problems and to collect direct feedback from users before we sent the prototypes to the Dev team.
Throughout the development, the UX team had conducted 5 rounds of formal and 20 rounds of informal user tests to ensure BAO would provide a delightful user experience.
Step 4: Create spec & Development validation
We tested the product during its development process and went back and forth discussing with the Dev team in refining the design.
We created design specs which bridge the gap between designs and implementation. The specs were effective communication channels since it helped the design team keep track of the changes and ensured every team member was on the same page.
Solutions
Limited all workflows to be shown in the left panel but provides a quick way for users to switch between them. The left panel can be expanded in the case that was needed.
Created "Data Browser" which allows users browse and map variables in a more delightful approach. (Presented in the video below)
Invented a dynamic guided tour of the four most common scenarios of BAO which provides a step by step guide for novice users. On the flip side, this tour also surfaced some advanced features in the product which benefits experienced users.
Release
After extensive development and redesign of many, many sprints, on July 2013, we launched the site we had been so proud to have worked on. We were praised by a great number of users/customers and our team was nominated for applying user-centered design approach in the product development process.
From our previous user research, we notice there’s need for iPad, thus after 4 months we developed the iOS app that helps people evaluate sites, trade areas, or neighborhoods with Instant access to Important demographic and market data.
