top of page
2021-01-26-Gaming_3.jpg

Lenovo

Reinventing the Futue of PC Gaming

2017  |  Lead Designer

Lenovo LEGION is the world's #1 Gaming Brand. Millions of gamers use Legion's Nerve Center app to optimize their PC for gameplay.

As the lead designer, I had the opportunity to redesign the Nerve Center desktop app experience and adapt the visual design into Lenovo Vantage.

Business Objective

Update the Nerve Center application to reflect the new visual design language of the Legion hardware devices.

Design Objective

Redesign the current UI to reflect the new Legion branding. Provide mockups and prototypes that reflect the new design.

LET'S PLAY

LEGION is the world's #1 gaming brand. An app called Nerve Center is preloaded onto every Legion PC helping gamers optimize their hardware settings for the most effective gameplay.

As the hardware Legion brand evolved, the Nerve Center app also needed to change.

 

I led the UX design.

...oh, and I'm not a gamer.

20170601_193759.jpg

BACKGROUND

Since I'm not a gamer, I had to start at the beginning. I had access to competitor gaming products, but that was about it.

I started talking to people in my network who I knew were PC gamers. Then, collaborated with colleagues to do ethnography research on who our gaming customers were and visited them. Listening to their needs, observing their behaviors, recording their environments, watching them play - all of this research was collected and analyzed.

2018-10-04-Nerve_Center.png

THE BASELINE

After analyzing the user research, I reviewed the current design as well as concepts for the new Legion visual brand. I tried to understand what the current experience was like, how we should optimize it, what was missing from the research, and where we could include design elements from the new brand.

2017-06-06-Gaming_Interfaces_Study-19.pn
2017-06-06-Gaming_Interfaces_Study-18.pn
2017-06-06-Gaming_Interfaces_Study-21.pn
2017-06-06-Gaming_Interfaces_Study-20.pn
2017-06-06-Gaming_Interfaces_Study-22.pn

WIREFRAMING

I mocked up some quit wireframes to understand both function and position. I knew that I would spend a lot of time on the visual side of the app so I wanted to ensure all the functions were in the correct place to reduce any major tweaking in the end.

2017-06-06-Gaming_Interfaces_Study1-01.p
2017-06-06-Gaming_Interfaces_Study1-02.p

VISUAL TREATMENT

Next, I dropped in some visual treatment to see how the look and feel would work within the wireframes. These were rough syles since I had not locked down the overall Style Guide yet.

2017-06-06-Gaming_Interfaces_Study1-03.p
2017-06-06-Gaming_Interfaces_Study1-05.p
2017-06-06-Gaming_Interfaces_Study1-04.p
2017-06-06-Gaming_Interfaces_Study1-06.p
2017-06-06-Gaming_Interfaces_Study1-09.p

MOCKUPS

Concepts are great for designers, but they may not reflect what the final design would look like once it's implemented. Doing quick mock ups in a real environment allows the team to visualize what the final product could look like so everyone's on the same page.

2017-06-06-Gaming_Interfaces_Study-10.pn

EXPLORATION

It's also good practice to add a few forward-thinking concepts in initial mock ups, especially ones that might be more difficult to implement in order to stretch the team's imagination. Often, a feature that may look difficult to do, may actually be quite easy to develop. Here, I proposed some ideas on how we could integrate a screen capturing feature as well as a live-streaming function to enhance our product.

2017-06-06-Gaming_Interfaces_Study1-17.p
2017-06-06-Gaming_Interfaces_Study1-16.p

Explored different options for docking so that the user had access to features of the app without having the app take over the entire screen.

2017-06-06-Gaming_Interfaces_Study1-11.p

A side dock or task bar might provide the most elegant execution since it wouldn't necessarily overlap content that was displayed on the screen.

2017-06-06-Gaming_Interfaces_Study1-14.p

ALTERNATIVE OPTION

Finally, I always provide some immediate solutions. Let's say that the proposed design may take another 6+ months to develop and release. There might be some options where we could roll out new features more subtly prior to the new redesign. This would help transition new features in and allow us to collect some user data early in the product development cycle.

2018-10-04-Nerve_Center.png
2017-08-07-Tangram_Gaming-Concepts-02.pn
2017-08-07-Tangram_Gaming-Concepts-03.pn

PIVOT

As we continue exploring design options for Lenovo Legion, the team decided to take a more conservative approach and integrate our current gaming features into Lenovo Vantage, a pre-loaded software that comes standard on all Lenovo PCs.

 

I used the Lenovo Vantage template to produce some mild to wild concepts for the team. This concept below (wild) incorporates the use of widgets and API integrations, which Vantage does not currently support. These ideas have caught on with users and we are now actively developing these new features.

Gaming_5.jpg
Gaming_7.jpg
Gaming_6.jpg

Even using the same Vantage template, I tried to push the team to think more broadly about what users expect in a gaming setting app.

For example, I put together a mockup of a widget-based design where users can select and add widgets to their home page to customize and personalize their experience.

2017-08-07-Tangram_Gaming-Concepts-04.pn
All Videos

All Videos

Watch Now
2017-08-22-Tangram_Gaming_Studies_Full_S
2017-08-22-Tangram_Gaming_Studies_Full_S

FINAL MOCKUPS

I put together several polished mockups prior to transitioning off this project. Below, you'll find a few different themes, concepts, and a polished workflow of the components of the app. I proposed we keep the same look and feel and carried the design language across the app.

I also encouraged the team to think about key partnerships that would really take our app to the next level. You'll find a few of these "Easter eggs" scattered throughout.

bottom of page