Making Metro’s Method

The Project

For the fourth project in the course, we worked on redesigning Metro’s e-commerce site. Metro is a local departmental store with a long history, being not just one of the fore-runners in bringing in high-end foreign fashion (such as Cartier and Burberry) to Singapore, but as well as being a launchpad for local and regional designers.

The brief that we received suggested that Metro’s site saw various navigation problems that needed to be fixed in other to make the site easier to use, a need to integrate the online and offline shopping experiences and a need to encourage membership and member engagement.

Design Process

Fig 1.1. Design Process

To begin the project, we set out to Metro’s physical stores in Paragon and the Centrepoint to conduct a contextual inquiry.

Fig. 1.2. The Metro outlet at Paragon
Fig. 1.3. The Metro outlet at The Centrepoint

This was important because we wanted to understand the context by which users visited the stores, their perceptions of the brand, and their relationship with online shopping. The users that we met in the store were quite different from who Metro suggested were their target users. While the client wrote that they were targeting young urban families, most of the users that we saw there were either older women or tourists. Nonetheless, we recognised the possibility that there may certain sample bias — afterall, we were there on a weekday afternoon.

Fig. 1.4. User Testing

We conducted several more user interviews and usability tests after that to observe user’s interactions with the existing site, as well as understand their attitudes to the brand and to shopping. It became apparent that any sample biases would only create marginal errors. Most users did not have a high perception of Metro — one user even replied “What’s Metro” sincerely when asked about his opinion of the brand.

Fig. 1.5. Affinity Mapping

Subsequently, we worked on building an affinity diagram based on our research.

Problems Identified

We came to the conclusion that on the whole, Metro’s low traffic issue wasn’t just due to the site’s poor navigational system. Rather, it also had a significant image and branding problem. It seemed to exist in a state of limbo between two identities — one that tried to appeal to the “classic, older woman” and the one that tried to appeal to the “young urban family”. This left users discombobulated and disoriented, and turned both parties away from the brand, with the former feeling like Metro was leaving them behind, and with the former not fully buying into the new branding.

In fact, when we left our affinity diagram overnight on the wall, we returned to find that an anonymous stranger had left a note under the section of “Perceptions of Metro”.

Fig. 1.6. “Poor Man’s Isetan”

Hence, we realised that for Metro to increase its business viability, it needed to make a judgement call and decide exactly which sector of the population it wanted to target, and then commit to them fully.

Nonetheless, we developed some personas that was built on both the research that we did as well as the client’s proposed target group. We identified three key personas within Metro’s user group.

Fig. 1.7. Persona Design & CJM

The first was the time-strapped Discount-Chaser, who was less concerned with brands and was primarily price-sensitive, thus prized ease of identifying discounts available. Tech-savvy and a regular online shopper, she is frustrated by the information presented on the site, as it is unclear for her as to whether there were more discounts to be had in-store or online.

The next was the Informed-Shopper, who prioritised thorough product information and was concerned with the availability of user reviews and ratings. The Informed-Shopper is not a regular shopper, and tends to purchase items only occasionally, typically on a need-basis. For him, a major pain point is the lack of full product descriptions on the retail site, causing him to waste time by looking elsewhere for information.

Finally, there was the Trendy-Shopper, whose only priority was getting the latest releases. Unrestricted by time or budget, the image-conscious Trendy-Shopper scoffs at Metro’s lacklustre selection of products and outdated retail line.

Fig. 1.8. Design workshops and wireframing sessions

Proposed Solutions

Updated UI

Our solution consisted of three parts — the first was to revamp the site’s navigation to streamline and enable a better discovery, purchase and post-purchase experience. During our user tests of the site, we found that there were points where users overlooked certain links or visual cues, or various functions that simply did not work as expected. Hence, we made some graphical adjustments to the global navigation bar and its submenus.

We also set out to create a cohesive brand language that would reduce confusion and frustration for users. To do so, we redesigned some of the visuals of the site and developed new content such that it would attract new shoppers and improve brand loyalty.

Fig. 2.1. Old vs New Homepage
Fig. 2.2. Old vs New Product Page
Fig. 2.3. Old vs New Magazine Page

Content Re-strategising

The second major change was a proposal to encourage a shift in content strategy by fostering a sense of community amongst its users. This was necessary to create the perception that being a member with Metro actually meant something; that it has certain specific tangible consequences. To create this community, we proposed a variety of mechanisms.

Monthly Voting

The first and most important strategy that we had was to encourage users to vote for a monthly pop-up brand. This pop-up brand will be a small, local brand. This strategy accomplishes various things: first, through allowing members to participate in the brand selection of the store, community engagement and interest is created. Second, this also allows the brand to hear real time and constant feedback on the kind of brands and products that users were interested in. Furthermore, it ensures a sufficiently high turnover of products to encourage repeat visits to the store, thus enabling greater revenues for the brand. Finally, it also allows the company to play a bigger role in supporting the local entrepreneurship scene by propping up small brands that would not otherwise have the opportunity to set up shop in such a high-traffic area.

Fig 2.4. Monthly Community Vote

Curated Selections

The second strategy would be to revamp the magazine page of the site to be more editorial. Now, this page would include subsections such as “Editor’s Picks”, “Guest Curator” and “Talking Points”, which is in essence a section where prominent figures in the fashion industry are interviewed. The “Guest Curator”, on the other hand, is a section where members are picked by the editor to produce a collage of thematic items. It is believed that doing so would encourage a shift in brand perception for users.

Fig 3.1. Redesigned Magazine Content Strategy

Taking the streets online

The third strategy that we proposed was for the site to promote crowdsourced images of users wearing the store’s products through creating a subsection on the style guide page. This would encourage visibility of the store’s brands as well as shift users’ perception of the brand towards one that was associated with high-street fashion and luxurious trends, and thus be in better congruence with what the company attempts to be. At present, while the brand has brought in such brands (Alexander McQueen, Michael Kors, etc), user perception has not been sufficiently swayed.

Fig 3.2. Create associations between street fashion to brand

Enhanced Brick-and-Mortar Experience

A large part of the problem was also that all too frequently, users simply were not aware that Metro even had an e-commerce site.

To resolve this, we had to look to ways to integrate the online and offline shopping experiences. One consideration that we had was implementing “ipad stands” in the store which would allow shoppers to scan the barcode of the product that they were carrying and be access the reviews of the particular item that they were looking up. Such a review section was something that we created under the page of each product listing, as we realised that users were incredibly risk adverse, and were prone to seeking second and third opinions.

Furthermore, such a stand would allow us to bring to online experience to the brick-and-mortar store and therefore increase users’ exposure to the existence of the site. Crucially, it was also important that a thorough product inventory and site audit was done to ensure that there was consistency in the products being displayed at both the physical and online stores, as we noticed that the online store’s product catalogue was sorely lacking.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.