Problem Statement:

• The application is text heavy
• Too much on the screen difficult to follow
• Tough to navigate through the app if not using the search feature
• Mobile replica of the desktop version: Aspect ratio is off and it doesn’t translate well to mobile I propose I redesign of the navigation of the site.

Rather than incorporating a side dropdown menu, a button system using icons to describe products would be better. The five main product classes include; Gaming, Film & TV, Computing, Phones and Electronics. However, none of these categories show up on the home screen of the app. Instead there are categories such as Best Sellers, Hot products and most wanted. While there is nothing wrong with having these categories they describe the same thing, most likely a “most wanted” product is also a “hot product”. Through my own experience with CEX I can say with confidence its primary audience are gamers who already have an idea of what they want when entering the site. I believe this redesign can accommodate this audience more efficiently and make the application more user friendly.

Research:
Before I produce a redesign, I needed to look at competitor and gaming apps to understand the flow and navigation of similar sites. Unfortunately, their main competitor GameStop don’t have an app, so I had to use the GameStop website. The following sites were used to identify the similar flow of navigation; GameStop website, PlayStation, Xbox, Amazon and Argos. The sketches that I produce consider the navigation flow of all these sites. I recruited 25 participants to take part in a series of tasks using the current CEX app. Each participant completed 3 tasks using the current navigation style, they were asked to navigate to find a specific item not using the search bar.

Task 1: Find a PlayStation 2 controller.
Task 2: Find a PC keyboard.
Task 3: Fina a nintendo64 console.

The tasks were completed using participants mobile phone, a timer would start the task and would stop once the participant completed the task. Once all tasks had been completed, each participant was asked about their experience with the app, providing what they liked and what they didn’t like.
Below is a table of results:

Table 1. Results of the three task, participant ids and times to give a rough idea of user progression through current navigation system.

PARTICIPANTSTASK 1TASK 2TASK 3
#010:300:250:23
#020:530:300:30
#030:350:400:35
#040:400:250:25
#050:520:310:23
#060:520:320:27
#070:560:350:40
#080:310:290:34
#090:390:270:27
#100:400:350:30
#110:471:030:34
#121:100:450:41
#130:390:470:28
#140:501:050:36
#151:060:500:40
#161:070:470:36
#170:420:510:45
#180:370:360:21
#190:560:420:30
#201:120:510:26
#211:040:430:31
#220:561:040:36
#231:030:450:30
#240:451:100:34
#250:450:550:40

From the results you can see that as the tasks progress the times go down, participants were faster as the experiment continued due to being used to the system. However, we should acknowledge how slow in comparison participants were in the first task compared to the other two as most were new to the application they found it difficult to navigate without using the search bar. Users felt while the app was difficult to navigate at the start it became easier as the experiment went on. Majority of participants felt they used sites like this one and others like Amazon for a sole product and rather than stay on the homepage or navigate through the site they would search for a specific product without a second notion. On inspection on the overall look of the app, participants felt it was cluttered and messy. Participants understood why the app promoted “hot products” and “best sellers” but were confused with the top banner and felt there was “too much going on”.

Sketches: I propose a new navigation system for the application which can be seen in the Lo-Fi sketches below. The sketches depict a searching scenario, storyboarding the process from homepage to product screen.

Fig 1. Sketch of the searching process from new homepage to product page.

storyboarding

From the sketch above I created a series of wireframes using Balsamiq to create a more realistic feel to what the new navigation system will look like. The mockup depicts a user navigating through the system, finding a Playstation 2 controller similar to the task used during the research gathering portion of this project. The red dots show where the user will click in order to progress through the navigation. The navigation for this particular task runs as; Homepage > PS2 > Accessories > Controllers > Product page > Add to Cart.

Fig 2. Mockups of the new navigation style for CEX mobile, Users navigation is shown by the red dots.

 

The Balsamiq mock-up was the precursor to the second iteration of the design. Using Adobe XD, I produced a full colour prototype with clickable buttons showcasing the real flow of the navigation. Similar to the research task and the Balsamiq mock-up the XD prototype navigates towards finding a PlayStation 2 controller.

Fig 3. Video mock-up of the CEX redesign, fully coloured.

 

 

Feasibility: A complete redesign of the CEX mobile application wouldn’t take up many resources, in fact the most time-consuming aspect of the project may be a complete restructuring of how products are categorised on the site. Participants used in the research gathering portion of the project were asked for feedback on the new redesign. Most responses were positive acknowledging that the new layout and design was cleaner and easier to understand. Some negatives included the amount of clicking one must do plus the lack of imagery for some products in the mock-up (which can be sorted out quite easily). As the video suggest it will take 20 seconds to navigate from the home screen to the add to cart page and I believe any user could have the same efficiency.

Published by Conor McGovern

A UX designer from Dublin, Ireland with an MSc in Information Systems. Passionate about good user research and design. A user of many different development softwares including; Balsamiq, InVISION, Adobe XD etc. Proficient in user methodologies including; interviews, surveys and focus groups.

%d bloggers like this: