MoPoP Reconstructed

My Role

Sole UX Designer

Challenge

Website Redesign 

Concept piece targeted to a specific persona.

Deliverables

Clickable Hi-fidelity mockup of an online shopping experience for a local business by creating design updates.

Brief

MoPop houses some of the world’s most legendary pop culture artifacts, the current MoPop website does not achieve a community connection as stated in their mission statement, which reads to: 

 

Provide a life-changing force by offering experiences that inspire and connect our communities.

MoPop's current website currently does not have a community reach, by redesigning the website adding a portal connecting social media to the community MoPop can achieve their goal and mission of a community connection. The focus of the redesign is to satisfy a targeted persona the Impatient Digerati, a social butterfly. My redesign goal was to make the shopping experience the main focal point for this persona while incorporating community engagement and connection.

Current MoPop website desktop

Persona requirements

Impatient Digerati

  1. Buys (and shows off) what’s new, even if it’s not within budget, decides quickly and purchases items for immediate delivery

  2. Abandons if the process is time-consuming

  3. Submits product reviews

  4. Closely examines product details

Meet Cam 

The impatient digerati the MoPop redesign is tailored for.

Environments:

Shops online-only, exclusives, social media platforms

Workflow:

Has limited time to shop around, needs to purchase quickly

Attitudes:

Impatient, Flaunts new merchandise, Trendy, Social Media Influencer.

Behavior patterns:

Examines product details, Speedy shopper, Submits product reviews, Abandons if the process is time-consuming. social butterfly

Website breakdown

I wanted to map out the current website structure to get a better idea of the site layout and what gaps needed to be filled. The current structure has many menu items that lead to dead ends. Shopping this site takes too much time, it is not intuitive or userfriendly. In the current model, there is no way to currently connect to others online.

website breakdown arrows.png

The solution

1. Redesign the navigation menu to incorporate trending now, featured, MoPop exclusives, and online-only options satisfying the digerati persona who likes to show off what’s trending and new.

2. Create the ability to view, review, and comment on products.

3. Provide a visible online presence, encouraging engagement through social media, which is consistent with the MoPop mission statement.

wireframes.mopop.portfolio.jpg

Paper Prototype // Interaction Design

A redesigned site map proposal

This site map represents MoPop after site reconstruction, bringing the shopping experience front and center for the digerati persona. Card sorts helped provide data on where customers would look or expect menu items to be located. 

site map after reconstruction

Site Map After Reconstruction

Research

How do other e-commerce sites create a simplified shopping experience for the customer?

How do they draw attention to featured items or present new arrivals?

What layout structures are they using to help simplify customers' shopping experiences?

What copy are they using for CTAs?

Influences

Platforms like Instagram were used to inspire the community connection and infuse pop culture within the design.

 

Suggesting that users join the MoPop culture page to inspire community involvement, by showing off what is trending through hashtags like #MoPopmerch #MoPopcommunity #MoPoPfam #MoPoPexclusives

 

Screenshot 2018-12-07 08.43.13.png

Competitive analysis

I conducted a competitive analysis between other gift shops in close proximity to MoPop and included Amazon because of their dominance over e-commerce which is oftentimes the first look for many shoppers or already a preset Alexa command.

Analysis Goals were to discover what the competitors were doing, taking note of what they were doing well, and generate new ideas. 

 

Competitive categories included: Guest account checkout, search by category, overnight shipping, social media sharing, review submission. All questions derived from encompassed behaviors of the digerati persona.

Competitor analysis before redesign

Before  Redesign

After website reconstruction

You can now use guest accounts to buy online, saving time and preventing website abandonment, view, and shop from 'Trending / Featured list'  and Overnight shipping is included, a must-have service motivation from digerati persona. 

competitor analysis after redesin

After Redesign

Paper prototype

I started sketching screens tasks that would be performed by my persona.

Exploring online exclusives, following MoPop's Instagram, and submitting a review were top priority persona tasks. Once ideas were sketched I was able to quickly explore ideas and identify if it was viable. Sketching them first helped save time when creating digital wireframes.

 

When creating an experience for the digerati iI wanted to make shopping at the digerati's fingertips with every click, anticipating our persona's needs like coming to our site to buy products

Interactive Paper Prototypes 

Card sort

After reconstructing the website I conducted a closed card sort with menu items.

This card sort revealed where the shopper would look for items within the MoPop website. Clustered and sorted topics helped gain insights into what items are seen as similar navigation paring of like items, and aid in intuitive site navigation and user confidence.

card sort 

Identified findings

After conducting my second closed card “online-only” was moved to the primary navigation menu from card sort findings

Card sort findings

Trello board card sort menu items | Closed Card sort |

Emotional journey

To empathize Cam’s experience navigating through MoPop’s website I created an emotional journey to show each touchpoint and what emotions are associated during this experience. Highlighted in green you can see ideas and opportunities that could make each touchpoint a better user experience interaction. 

 

Pre-construction

You can see that Cam is frustrated and wastes too much time browsing, he is led down dead-end navigation paths and is annoyed with spending too much time to find the latest trends and MoPop Exclusives. He is not able to write or view product reviews. He must create an account to purchase merchandise and cannot track his order.

 

Post-construction
Cam feels relieved and delighted with the new design which validates the connection users are seeking to connect with the MoPop community via the media access to Instagram. Cam feels understood and significant knowing MoPop's new website was created and designed with users like Cam in mind. He is able to use the new website intuitively, track orders and complete his goals. He is able to purchase exclusive new arrival items quickly, review products, view what's trending and feel connected and part of the MoPop community. 

 

The MoPop reconstruction now holds true to the MoPop mission statement which offers experiences that inspires and connect communities.

Usability testing

With Cam the impatient, trendy shopper in mind, I created tasks this persona would accomplish. Usability testing helps validate or disprove any design decisions made so far, with continued iterations and insights a seamless experience can be created. 

P2_usability_testing_12.11.18.jpg

Tasks

Task#1

See what is trending on MoPop social media page and follow MoPop’s Media

Task#2

Find the Online only exclusive Marvel Thor Prop hammer prop and purchase

Task#3

Locate A Jimi Hendrix product and submit a review

Usability iterations

Usability testing produced valuable takeaways like the confusion of tinted wireframes which increased the users' cognitive load in understanding why they were tinted. Small improvements like adding more touchpoints on the screen allowed the shoppers more freedom when testing this website, these additions led to next sprint idea generations and thorough shopping experience. 

Simplifying these wireframes by making them white was validated in the following SUS scores that took place post iteration. Improvements soared from 57.5% to 90%

sus testing mopop score improvement.png

Clickable prototype

I made this clickable prototype using Invision

Connecting with MoPop

To mirror the mission statement to INSPIRE and CONNECT our communities I wanted to create a portal to MoPop's Instagram page, where social and community interactions are happening. Allowing engagement and a visible presence of a shared passion for pop culture through photographs, art, and trends. I wanted to build a pop culture presence that is inclusive and welcoming to new and existing users. Inspiring Pop culture lovers via social media, shopping, trending now, and exclusives. 

MoPop mockup

I created a mockup mirroring the wireframe I initially created but when I was developing it I had another idea, I will A/B test both homepages to see which performs better. 

V2 Homepage wireframe

Wireframe Mockup Homepage A

menu.png
MoPop_Homepage B_wireframe.png

Homepage B

MoPop Product page mockup

MoPop Homepage A.png
Nirvana product page_mockup.png
MoPop Exclusives_mockup.png

Mockup Prototype

Next steps

A/B testing Homepage mockups

Create additional mockup screens 

Additional Usability Testing

Flushed out Comparison Analysis to include similar industry competitors

What went well

Getting users' feedback during usability tests using the clickable prototype helped identify where the snags were in the process flow. There were a few additional hotspots that were included which was an easy fix when testing this redesign. The card sort helped confirm where shoppers could expect products to be found, helping users navigate the site intuitively and with ease of use.

Testing early and often helped direct the project MVP, focusing on improvements instead of wasting time on things that were not needed. Ensuring the completion of complete ideas. 

 

©  K.Paredes