The Art, Design, & Innovation of Nicholas Fair
Button-Panorama.jpg

CoData Panorama

 

UI/UX Design

Lenovo CoData Panorama

 
 

Client: Lenovo

Role: Lead Designer

Project Type: Large Data Analytics Dashboard

Hardware: PC & Mobile

OS: Android

Platform: Chrome

As part of the expanding world at Lenovo, every day an absolutely massive amount of data has to be stored, transferred, and maintained by a network of engineers and data scientists. Finding a way to make this absolutely monumental amount of information searchable and usable by managers and developers alike fell to DCG BT/IT, and my team was tasked with designing a conceptual storage and browsing solution by the name of Panorama.

I worked with the Lenovo development team to dive into their needs and establish not only what a minimal viable product looked like to a user, but what kind of back-end architecture and structure would be required to pull a project like this off. Our efforts became the basis for the full-scale CoData project, which launched in 2018.

To comply with my non-disclosure agreement, I have removed & altered any confidential information in this portfolio entry.

 
 
 
Banner-panorama.jpg
 

As this was a conceptual pitch, I had to step into the roles of both user experience designer and marketing designer: making something quickly that spoke to what stakeholders were looking for while keeping it a simple as possible.

 
 

The Challenge

Design a search-and-browse application that could be built with minimal resources

The core goal of our project was to craft the vision for an application that could store and triage the massive repository of information and documentation that Lenovo had to contend with. Individual users were reporting doing replicate work on a regular basis due to simply not knowing what had been done already and being unable to search through the vast backlog of invention and solutions that prior engineers had to offer.

Our core goals were to:

  1. Discover the high-level needs of our users for this kind of application.

  2. Discover what possible solution could be created with our team’s resources and the best way to communicate that to stakeholders visually & orally.

  3. Produce conceptual mock-ups for the tool and its key functions.

My Role

I acted as designer for the research and design phases for the Panorama project between November 2017 and February 2018. I was mostly a solo act for my work on the project, taking direction from the project owner and connecting to a local team of half a dozen developers for key insights and sanity checks along the way. I compiled multiple reports and presentations on the feasibility of the back-end functionality for review early in the project, and eventually developed rough wireframes and mock-ups for user testing and presentation.

 

Discovering Key Functionality

Establishing “what’s what” before we know what ‘what’ is

Digging into the real reason this project had been proposed, I distilled the core problem down to a single statement that could be used as a benchmark for the remainder of the project’s success. In essence, the goal was information organization. This took the form of:

  1. Informational discovery

  2. Informational clarity

  3. Informational maintenance

Over and over again, every pain point came back to those tenants whenever we interviewed or surveyed our users. Eventually, the core functions that would encapsulate these issues came to a central hub that was part search engine, part dashboard. I established numerous journeys early on and worked with users to refine them until the story was air-tight. These flows helped us not only establish what functions were needed, but how to best articulate them and when. This made for a perfect comparison for the functional constraints that came in from the development team.

The functionality list I ended up submitting was:

  1. User accounts - personalized user functionality tied to an email account.

  2. Boolean & keyword search from first contact.

  3. Document feeds on the front page- related to recent, new, and saved/favorites.

  4. File uploading & version control of documents linked to user account permissions.

  5. File data modification & entry.

  6. Meta data tagging as part of the upload process.

  7. Data & document review / approval process before going live.

Process-LogIn.png
 

Establishing the Back-End

Crafting a structural foundation

Armed with functionality in hand and a basic set of requirements, I set out to work with the development team to both understand and articulate the back-end structural needs of the project. Creating minimal and simplistic graphics to articulate the data and server architecture went a long way in communicating with stakeholders early on.

 

Wireframes & Forms

Establishing design & data fields

Moving forward with the project, I set out to finalize basic, testable wireframes that could be easily developed for a first pass at the project. Structurally I focused on the browsing aspect for the first part of the project as it was the most visible aspect of the design, and very quickly churned out a number of conceptual designs for both PC and mobile interaction during daily sit-downs with the development team.

Wireframe-Rough-Home.png
Wireframe-Rough-Search.png
 

Eventually the ask came down for defining the back-end data set and possibility of meta data tagging, and I worked with our users to define the best way to frame and modify those as well. Form submission details were outlined and I crated mock-ups and guides for the first wave of development on the MVP.

With the vision and the feasibility outlined and buy-in from stakeholders, Panorama acquired a full development and design team. I crafted the hand-off documents with full explanations and details for my work on the project and worked with the new team doing a full knowledge transfer during their first month of working on the program. From there I knew it was in good hands.

Mockup-Search - Copy.png