QRL Genesys: Design Concept and Rebranding Case Study
App redesign of how IT professionals and enthusiasts get Dell product information more efficiently.
Have you ever had an issue with a computer and had to troubleshoot solutions from the endless amount of available online resources?
Chances are, you have. Maybe you even had to resort to calling tech support.
Fortunately, there are a plethora of resources available online and from many apps that empower us to find answers to our questions more efficiently. QRL is one of those apps.
What is QRL?
QRL (Quick Resource Locator) is a mobile app by Dell that gives IT professionals who are typically in data-center environments, an efficient and quick way to find extensive Dell product system information.
The app has three core features:
- Reference support documentation. This includes How-To Videos and Documents such as installation videos and manuals. Users can search or browse for a product’s support material driven by Dell Support’s extensive database.
- Retrieve current warranty and factory configurations for specific products owned or used. This is done by entering the product’s service tag or by scanning a uniquely generated QR code.
- Retrieve solutions when troubleshooting. This is done by providing an error code retrieved from select systems.
“QRL stickers” with unique QR codes can be found next to service tags (and other identifiers such as Express service codes) for select Dell servers, storage, and networking devices. These identifiers (including other identifiers) give IT users a way to track and retrieve specific system information, such as warranty status.
Users can also Favorite (eg. Save) products and/or their support content, which behaves as a “save for later.” Products and support content can be favorited independently from one another — which is one of the scalability problems I addressed in the new design down below.
Background
In the Summer of 2018, I began working on QRL as the lead and sole designer. As a UI Product Designer at Dell/EMC, working on multiple products at the same time was normal, to me at least. My typical plate consisted of a few side projects as appetizers, a few systems management products as entrees, and assisting with design system documentation for dessert.
As I familiarized myself with QRL, I noticed many gaps and design opportunities not yet taken advantage of. There also wasn’t much clarity around what QRL represented as a brand, nor was there a vision for where things were going relative to the market and similar offerings — such as Dell’s own support site.
Having a vision of where you want to go and knowing what you represent is important — which not only goes for products, but people and organizations as well.
In 2016, QRL did receive a UI refresh to compliment one of Dell’s design languages at the time, dubbed Clarity, but there were still gaps that didn’t address and capture the essence of what the app was and does. Without going into too much detail, although the design language was a decent reference for surface level visuals, such as buttons, colors, and icons — it was a visual vocabulary without words. It was challenging for many, myself included, to clearly articulate what the language needed to communicate and how it accommodated the unique space each of Dell’s apps played in.
A lot of work can be done with design systems, icons, and so on, but those will always be a means to execute an end-result. An end-result that is hopefully aligned with a brand’s strategy, vision, and purpose.
I took this opportunity to have soulful conversations with the immediate team.
Two enduring goals were in mind:
- Create a design vision for QRL to serve as a platform and filter for potential design decisions in the future.
- Spark and inspire more conversation around incorporating more in-depth branding within product design at Dell.
The New Design
Here’s how I created a design vision and brand refresh for QRL that exercised how the essence of a product’s brand could be implemented within a UI. (and across other touchpoints, of course.)
I like to call this concept: QRL Genesys
* I was inspired by “Don’t Sweat the Technique” by Eric B. and Rakim when designing this concept. Feel free to give it a listen while viewing.😉*
Initial Research
*Note: This research was primarily hypothesis-driven, as this is a concept. In reality, more involved research and talking to customers would be necessary.*
UI Audit
I first wanted to get more information and familiarize myself with QRL. I wanted to understand its information architecture. I did a UI audit focused on navigation, IA, and a handful of usability heuristics.
Secondary User Research
I then pulled user feedback from unsolicited app reviews in the Google Play Store to understand what people liked and disliked.
I grouped users’ problems in themes that I later reframed as Epics that consisted of smaller user stories, bugs, and design ideas. I placed them in a backlogged list within a spreadsheet. The items were then prioritized based on what had a high impact on users and low effort to build.
This backlog also served as a framework for some of the design decisions to follow. Everything in the backlog may not be feasible or have enough value to ship — but at this stage, the goal was to document considerations.
Personalities & Behaviors
I also wanted to get a sense of who used the app. We already had plenty of research with customer profiles, but I grabbed comments from people in the IT industry from similar app’s and forums to get a general sense of the attitudes, behaviors, and personality.
Primary Problems
Given my scope of this effort, I focused on addressing four problems:
1. Ambiguous QRL Name and Identity
Interestingly, the “QR” in QRL stood for “quick resource” — yet the “QR” in QR code stands for “quick response”. To add to the confusion, the app’s logo was literally a QR code. 🤔
The logo was also too closely associated with scanning QR codes, which wasn’t the core purpose of the app. QR codes were just one of the many ways of identifying a product. What happens when other methods become a feature, such as scanning barcodes and AR?
Strategy/solution: Create a new brand identity and visual design system that is scalable and uniquely communicates the product’s purpose.
2. It wasn’t clear which products were supported.
Older product models weren’t supported, notably PowerEdge servers and Precision Workstations. However, information for older models was actually supported and available on the Dell Support site, which is also responsive.
Strategy/solution: Give users what they need and by offloading content from the already available resources on Dell Support. Since internet access is required to use the app, why not let users save links to external content for later? (Think, Pocket app)
3. High-level navigation was too deep and limited.
The main navigation was only available on the Home page, and the main navigation was inside a hamburger menu.
This meant users couldn’t switch between prolonged and temporary tasks. If a user navigated to three to five pages sub-pages, they would have to navigate back three to five sub-pages to perform core tasks, such as scanning a QR code to identify a product or contacting Dell Support.
Strategy/solution: Use an explicit menu system for primary navigation, such as an app bar that’s available throughout most of the app experience. This would provide the ability to switch and multitask between temporary and prolonged tasks.
4. Favorited support content was a “dumping ground” without context to their product.
Let’s say a user had 50 Favorites, mixed with various products, how-to videos, and documents. These Favorited items were presented disparately and without any clear order other than “last favorited.” Users would likely have to search for their Favorites because remembering where particular items were within a large list could easily take a toll on cognitive load.
Strategy/solution: Since IT users usually have unique preferences when it comes to how their products and environments are structured, let them organize their Favorites how they wish.
Next: Defining the brand.
Everything and everyone has a brand, including products. After knowing what to focus on, I started with defining QRL’s.
Brand Assessment
I facilitated brief in-person and remote brand assessment exercises with the internal team to capture what we’d like the product to represent and feel like to people.
After aligning on a set of attributes and rewording words to feel more appropriate for IT professionals and enthusiasts, we converged on the following:
Core Purpose:
Quick and resourceful product information.
Brand Essence:
Quick, Informative, Gratifying
Voice:
Supportive, friendly, informative, and wise
Core Benefits:
• Saves user’s time.
• Feeling empowered & knowledgeable.
• Quick access to product information.
• More efficient Dell support/service.
We now had some brand definition. This helps when designing and messaging the value of the app and even defining design principles. 👍
New name for QRL?
Although the scope of this effort didn’t include changing the QRL name, I still wanted to explore alternate names while I was in the flow. This is where the code-name Genesys came about, which played on a gene (DNA/information), sys (System), and of course, genesis (origin of X).
Brand Identity
Designing the New Logo
I then started sketching ideas for a new QRL logo that could reflect some of the defined attributes.
After reviewing the sketches and options, we landed on a mark that was simple and easily recognizable at a distance.
The dot in the center conceptually represents what is found and identified. The logo also has a subliminal Q, R, and L. I always like to keep these kinds of things in mind for potential scalability and extensibility, such as logo animations.
Since QRL was the full product name (and short), I figured it would be a good idea to explore a wordmark. The font used in the wordmark is custom — I wanted the additional letterforms to compliment the initial logo’s forms.
Visual Design
To align on a visual direction, I presented a series of mood-boards to reflect some of the attributes previously defined. I first presented (3) options and then narrowed down the look and feel with additional boards based on what was liked, didn’t feel right, and disliked.
The new visual direction for the concept landed on having a sense of utility and service. A nod to the past, yet embraced a fresh and unique position, style, and feeling. An app that informs, enlightens, and supports.
Trustworthy, enlightening, and calm.
This set made sense. Information, in general, needed to feel trustworthy and with that information, user gained more enlightening knowledge. And since dealing with troubleshooting or support can be stressful, the app could provide a calm and collected composure.
To converge more, I created a series of style-tiles, illustrations, and mockups.
The star and block elements were used to capture a sense of imagination, that was one of the attributes of Dell’s culture. They’re also symbols that can be used interchangeably and nod back to favorites and nodes.
App Navigation
To address some of the navigation and higher level IA problems, I modeled the content to better understand where things existed in the app and what the user could do. I realized that the highlight feature of scanning QR codes was just one of the many methods to essentially identifying a specific product’s information. The other methods included providing a service tag, serial number, and who knows what else in the future.
I landed on having four main functions of the app in the app bar: Home, Browse, Lookup, and More.
Home would house users’ Favorites and possibly other activity. Browse would behave like a catalog where users can navigate or search for general product information. Lookup was where users could look up and identify specific product information and error codes. More would house less frequent interactions that could be extended upon, such as the Settings and About.
App Layout
I then began sketching wireframes for the main flows and pages.
Organizing the Favorites
I began sketching the as-is model of the information presented throughout the app and ideated on new models that may make more sense in terms of a user’s mental models and scalability.
Old Model
In the old model, users could favorite products, identified products, and support content — but they weren’t really organized other than by when they were favorited.
New Model
In the new model, users favorited the same way they’re used to, but now their favorites were organized inside Collections.
The concept of “Collections” is nothing new and should feel familiar to many users. With Collections, IT users and IT enthusiasts (eg. think gamers or customers with “mini data centers” in their homes) could organize their go-to products and resourceful product information.
Finished Design
It’s much easier to design (or doing anything really) when you have a vision and principles.
Thanks for viewing! ✨🚀
Visit: www.bwhitfield.com to see more of my work and what I’m up to.
