|
OverviewThe Nintendo Switch is a game device. The large image is an example of an error code that pops up on the game device when something has gone wrong. ☉ You can imagine how someone in the middle of playing might get really frustrated by this disruption. In order to keep this message off of the screen, they have to go find the answer.
|
Backstory
What UX problem are we trying to solve? Why is it a problem?
The Problem
The Nintendo Switch is a game device that you see in the top left of the photo above. The large image is an example of an error code that pops up on the game device when something has gone wrong. You can imagine how someone in the middle of playing might get really frustrated by this disruption! In order to keep this message off of the screen, they have to go find the answer.
My Support Dashboard (MSD)
The typical process to find the answer to issues is as follows:
1. Search for the error code into their browser or Nintendo’s support website
2. Scroll through those search results, to then hopefully come across a
3. Come across a solution that solves their problem - sometimes this isn't a quick process and people often struggle to find the correct answer.
Thats where My Support Dashboard (MSD) comes in. This service created by the UX designers on the team currently and it simplifies this process for customers. Instead of going through the searching process, if users have signed up for this service all they have to do is:
1. Visit MSD on Nintendo Support site
2. Find the exact error code detected on their device along with a solution for it
My Task
My task was to figure out ways to increase MSD Adoption. I was asked to identify opportunities throughout the Support Site to encourage people to use the service more.
Use cases to consider and design around:
Constraints:
Limited development capabilities. Current design system must be used. Open to new images/assets. No IP usage.
My Support Dashboard (MSD)
The typical process to find the answer to issues is as follows:
1. Search for the error code into their browser or Nintendo’s support website
2. Scroll through those search results, to then hopefully come across a
3. Come across a solution that solves their problem - sometimes this isn't a quick process and people often struggle to find the correct answer.
Thats where My Support Dashboard (MSD) comes in. This service created by the UX designers on the team currently and it simplifies this process for customers. Instead of going through the searching process, if users have signed up for this service all they have to do is:
1. Visit MSD on Nintendo Support site
2. Find the exact error code detected on their device along with a solution for it
My Task
My task was to figure out ways to increase MSD Adoption. I was asked to identify opportunities throughout the Support Site to encourage people to use the service more.
Use cases to consider and design around:
- Ae users signed in?
- Have they already set up the MSD service?
- Where are they located on the website?
Constraints:
Limited development capabilities. Current design system must be used. Open to new images/assets. No IP usage.
Audience
What's important for me to understand before creating a solution?
Defining the Audience
The first thing I wanted to do was understand the audience to be clear who I was designing for. The team didn’t actually have any analytics on the audience, so I kind of pulled the pieces together from having conversations. I asked the designers who they typically had in mind when designing, got some insight from someone that worked on the chat side of customer service who dealt with customers and issues directly, and gathered some analytics from the main Nintendo site’s CX lead since they did track their audience - I figured even though they technically have different audiences, some of that information could help paint the picture of who was coming to the support site for help.
Linda H.Linda who’s a mother with a kid that has a Nintendo Switch, she needs answers because her kid is getting cranky and an easy process to solve issues. This persona represents any parents/guardian who often come to the support site to solve their kids device issues.
|
|
Research
Immersion
I did an immersion to familiarize myself with Nintendo’s Support site before even attempting to design anything for the space. Here are the main things I noticed:
- 🤔 I was initially confused on the purpose of MSD because there wasn't really anything in depth explaining what it was and why it might be useful for someone. As a user, I probably would have never signed up for it either for this reason - so this would mean my proposed designs could be more informative.
- 🎞️ There were no photos on the website at all, only a few Nintendo IP’s like the one to the right. Though, they were moving away from those all together because of new restrictions, so I knew the site had the possibility of feeling very text heavy. I’d wanted to figure out a way to bring some life into the page with my designs.
- Lastly, I realized just how different voice of the this site was from the main Nintendo site. The main site was very colorful and light, while this site was a lot less colorful and more serious. They intentionally were very different form the main site, this team wanted it to have its own unique voice. This was important for me to understand so I didn't the two up them up, I was careful to design something that would look good in the domain I was working on.
Analytics & more
- Most overall site traffic came directly from search engines, so people would start their troubleshooting on google for example and end up directly on a solution within the website - which told me that the home page had very little traffic. I originally thought that might be a great place to add a design but it turned out to be the opposite of my assumptions.
- Most traffic for the MSD service specifically came from those already on the website. So, not too many people would discover the service unless they were in a place on the website that had information about it or if they clicked on the option in the navigation - but most people didn’t even do that which could likely be because they don’t know what it is.
- Also, MSD visits in general were in the bottom half of all site traffic. While it was clear to the team that people were not using the service because of the number of sign ups, the analytics made it clear that people weren’t really clicking on the service at all. It was clear there had to be more information throughout the site to encourage people to click on it more.
I gathered more information from web analysts and other designers on the team so that I could make informed design decisions that were inline with everyone's expectations.
Before I dove into design, I looked into different companies' support pages to get ideas. I looked into ☉ xbox and ☉playstation because they’re gaming companies, and ☉ apple because a few on the team were fans of its support pages.
The things that set all of these support sites apart was their use of photos and illustrations that brought life to the interface. I wanted to add some of this into Nintendo Support with my design. It was tricky, because as bad as I wanted to use Nintendo IP like Mario or Kirby, I wasn't able to use characters at all. They also didn’t have many custom icons available, so I needed to figure out a different route.
- Some people on the design team desired things that brought the website to life like photos, patterns, etc.
- My manager was really interested in seeing a banner design with some language around “personalization” to capture people's interest - something she had been thinking about for awhile.
- The team wasn't looking to reinvent the wheel or even entertain anything very different than what they were used to, they wanted something familiar simply because they just didn’t have the time or hands for much else.
Before I dove into design, I looked into different companies' support pages to get ideas. I looked into ☉ xbox and ☉playstation because they’re gaming companies, and ☉ apple because a few on the team were fans of its support pages.
The things that set all of these support sites apart was their use of photos and illustrations that brought life to the interface. I wanted to add some of this into Nintendo Support with my design. It was tricky, because as bad as I wanted to use Nintendo IP like Mario or Kirby, I wasn't able to use characters at all. They also didn’t have many custom icons available, so I needed to figure out a different route.
Exploration
Here’s a look into my initial exploration, just some mockups to put my ideas on the cavas and to get feedback about direction before moving forward.
They’re all a little different, but have the same content and language around “personalization” and “customization” as requested. I remembered from the personas that all of them just wanted quick answers to get back to playing, so I added in “Get back to playing faster with My Support Dashboard” and some information about MSD since there seemed to be a lack of explanation of the service.
☉ This one was a banner to represent the idea of a prominent image in the background with some boxed content on top. The Nintendo game scene background was lively and colorful to bing attention to it.
☉ The second idea shows the prominent image look again but using a real persons photo. I wanted to use someone excited to show the excitement of getting answers quickly and customizing the experience.
☉ Lastly, this idea of a not so prominent image and a gradient instead that used colors from the website.
Te team liked the use of photos, though the main issue is that they looked too much like ads. This made sense, especially since there weren't any photos anywhere else on the website, so these might stand out and not in a good way. Some of them would look great on the main Nintendo website, but didn’t quite fit in here.
At this point, my managerwanted me to explore something that wasn’t a banner, and to design for mobile instead, so I went back to the drawing board.
They’re all a little different, but have the same content and language around “personalization” and “customization” as requested. I remembered from the personas that all of them just wanted quick answers to get back to playing, so I added in “Get back to playing faster with My Support Dashboard” and some information about MSD since there seemed to be a lack of explanation of the service.
☉ This one was a banner to represent the idea of a prominent image in the background with some boxed content on top. The Nintendo game scene background was lively and colorful to bing attention to it.
☉ The second idea shows the prominent image look again but using a real persons photo. I wanted to use someone excited to show the excitement of getting answers quickly and customizing the experience.
☉ Lastly, this idea of a not so prominent image and a gradient instead that used colors from the website.
Te team liked the use of photos, though the main issue is that they looked too much like ads. This made sense, especially since there weren't any photos anywhere else on the website, so these might stand out and not in a good way. Some of them would look great on the main Nintendo website, but didn’t quite fit in here.
At this point, my managerwanted me to explore something that wasn’t a banner, and to design for mobile instead, so I went back to the drawing board.
We identified these top audiences based on the different people we interviewed for responses and the people that filled out our survey. In both, we ensured to always ask for their roles in their company. Roles ranged from Senior Executives, Managers, Team Facilitators, and other ranges of employees not in management or director roles. So, our top two are those that might be involved in team dynamics (managers, etc) and then everyone else who is on a team and can benefit from such positive dynamics.
|
Primary Persona 👩🏼💼
Our primary persona represents an HR Manager who values solid team connections for great project outcomes.
|
Secondary Persona 🧑🏼💼
Our second persona represents an employee who's working remotely and is interested in building bonds with coworkers.
|
Proposed Solutions
Which direction can I take, and why might they work or not work?
The first solution is for a customer who is signed in, has the MSD service already, and for some reason they just aren’t utilizing it, maybe they forgot about it, so they ended up on an article that won’t have the answer to their problem.
For example, ☉ we see they are on an article for error code article 2123-0209, which is not what’s being detected on their game device. This ☉ system-initiated modal pops up after about 5 seconds asks if they meant the detected error code. ☉ I hyperlink to MSD just in case they want more information about the service, and offer to ☉ direct them to the article that will solve their problem.
I’d say the biggest challenge here was figuring out when the modal should pop up or if it should pop up at all since pop ups can be frustrating to users. Though, after having conversations with my manager and team, we thought that getting in someone's face is what we want to do in this instance, since continuing to read the same wrong article for a long time would likely cause more frustration.
For example, ☉ we see they are on an article for error code article 2123-0209, which is not what’s being detected on their game device. This ☉ system-initiated modal pops up after about 5 seconds asks if they meant the detected error code. ☉ I hyperlink to MSD just in case they want more information about the service, and offer to ☉ direct them to the article that will solve their problem.
I’d say the biggest challenge here was figuring out when the modal should pop up or if it should pop up at all since pop ups can be frustrating to users. Though, after having conversations with my manager and team, we thought that getting in someone's face is what we want to do in this instance, since continuing to read the same wrong article for a long time would likely cause more frustration.
Mind Mapping 🗺️
I created this mind map to show my ideas and vision for this platform at a high level. In the end, all of our mind maps were very similar and demonstrated how we might show both the team bonding and team building aspects of our platform.
Card Sorting 🃏
In our team's card sorting activity, we identified different features we might want in our product and some of the different parts of those features to help organize our ideas and identify areas for opportunity within those areas. For example, shown below are some of our ideas for the planning/scheduling, and video session features. At this point, along with team bonding and building activities, we wanted to also provide a hosting space to address some of the other concerns we had around it being harder to connect and get people engaged.
|
|
Brining our ideas and product to life with low and high fidelity prototypes
Sketches
When it came to visuals, we weren’t able to communicate many of our ideas effectively through words alone, and this made it difficult to align our overall vision for our product. To compensate for this, we decided that we would each create low-fidelity sketches of wireframes that demonstrated some of our individual ideas for the site’s layout and flow. This helped us tremendously with explaining our concepts, choosing the most effective routes, deciding which core interactions that we wanted to focus on.
Below are some of our individual sketches that our team members made for the same page, the plan event page. Each of us visually had a different idea for what this page would look like as well as its contents. After creating these sketches, our team was finally able to reach a consensus of what would be included in this plan event page. We ended up using the most helpful features from our sketches for the last iteration of our prototype, such as the ability the view your team’s availability, add multiple activities to a single event, and edit team details and invitations.
Below are some of our individual sketches that our team members made for the same page, the plan event page. Each of us visually had a different idea for what this page would look like as well as its contents. After creating these sketches, our team was finally able to reach a consensus of what would be included in this plan event page. We ended up using the most helpful features from our sketches for the last iteration of our prototype, such as the ability the view your team’s availability, add multiple activities to a single event, and edit team details and invitations.
Sketches by Jheron, which encompassed many our ideas the best
Wireframes
Once aligned, our interface designers (myself and Jheron) started putting together more official wireframes before transitioning into high fidelity designs. Below, you can see where a lot of our screens started.
|
|
|
Feedback & Validation
After the last stage, we then created a higher fidelity prototype to conduct some usability testing. From these tests, we wanted to understand how people were interacting with our product and if people enjoyed the concept in general. This test was task-oriented and we asked participants to do things like 'plan a new event' or 'browse new activities'. After these tasks, we asked some questions to better understand their experiences. Due to covid restrictions, we ran remote tests and tested five people total.
Here are some of the responses:
Our final design shown below incorporated many of these changes. Due to time, some of them were not implemented but we have intention in further testing and changing more to fit our responses!
Here are some of the responses:
- Product Previews - There are no reviews on how the application is used, would be helpful
- More features of facilitators - More features like to do lists, upcoming tasks, and notes for planning would be useful
- Activity Tags - On the discover page, include tags/keywords for easy identifying and categorization of those teaching for the perfect activities
- Activity Information - Some important information is missing like shipping details and drink types (Mixology event)
- Invite Previews - It's not super clear that these are just previews of an email to be sent and not a part of the current page they're viewing. Also, questions on how this might function in the platform
- Logo - Brand Logo blended in too much, too light and not very noticeable
- Navigation - The navigation on the top and to the left had some repeated options, was confusing
Our final design shown below incorporated many of these changes. Due to time, some of them were not implemented but we have intention in further testing and changing more to fit our responses!
Backlog
There are plenty of things we wanted to incorporate into this product and experience! Given our short period of time and other constraints, we added some things to the backlog for now.
|
More in-depth with activities 🧩
Due to time constraints, our team was only able to demonstrate a few team bonding and building activities as previews in our final product (mixology class, blind drawing, and escape room previews). In the future, we'd love to finish designing out the entirety of these virtual activities so one could see what it's like to go through one end to end. Along with this, we would want to show more range of activities that could be included in our platform, as it would show the different types of experiences we have to offer and allow us to make a more fully functional prototype.
|
Larger Sample Sizes 📝
Our team could benefit from gathering research from a larger pool of people. We were working with limited time and resources, so we interviewed and gathered as much information that we could do ourselves with the people that we had access to. In the future, we hope to get more people to interview and test our product to validate our design choices and make the product better and more fit for the target audiences.
|
Reflection
Challenges
One of the biggest challenges we faced here was the difference in our thoughts, ideas, and opinions within the people on our team. This is to be expected in any design project, especially in newly formed teams. Though, oftentimes our team struggled with communication and effective collaboration. We wanted to make sure everyone's ideas were heard and hopefully incorporated somehow, while at the same time maintaining our focus on the goal and needs of the project itself regardless of personal wins or losses.
It's ironic actually, midst this we were designing an entire application that can help teams get through issues just like this through team building exercises and we actually did some of those activities ourselves! This was a really essential piece in our process because it not only allowed us to empathize directly with the issues and concerns of our target audiences, but made way for a product we were all proud of when we put the importance of staying on the same page at the forefront.
It's ironic actually, midst this we were designing an entire application that can help teams get through issues just like this through team building exercises and we actually did some of those activities ourselves! This was a really essential piece in our process because it not only allowed us to empathize directly with the issues and concerns of our target audiences, but made way for a product we were all proud of when we put the importance of staying on the same page at the forefront.
Takeaways
My biggest takeaway from this experience was how much more thorough design can be with more time! Before this project, the longest project I had worked on was about 2-3 months since I was working on projects that ended when my quarter at school ended. This project spanned across two quarters instead of one, and I realized how much more thorough we could be in our process and decisions. 5 months still isn't the most time in the world, but it made much more room for recognizing holes in design processes and not being afraid to point them out because of extremely limited time.