MoMA Website Realignment

Project Manager/UI-UX Designer — E-commerce Website Realignment

MoMA Design Store is an online curatorial sales department of The Museum of Modern Art (MoMA) – one of the world’s most famous art museums in New York. MoMA Design Store websites needs clear viewing of content and ease of use for users. The current website does little to convey the strength of the products on offer. Understanding human behaviour while browsing the MoMA website or while making a purchase is an important aspect of this project. This proposes the realignment of the website’s strategic objectives and user needs as reasons to consider a site overhaul.

Client and Audience
Client is MoMA Design Store. The target audience includes teachers, influencers, designers, art students, art collectors and creative product buyers.

Design layout and development
The design and development are inspired by MoMA’s slogan that design should be accessible to as wide an audience as possible. In keeping with this principle, the design is clean with pictures and minimalistic text, as needed. The emphasis is on the creative products designed by MoMA design store. A UI pattern library which is a collection of user interface design elements was created that helped make the visuals uniform. Typeface used is Roboto and the colour scheme is black and white for the overall text. This helps the products stand out better. The other important elements on the website like Membership is coloured blue while Charity is Pink.

Outcome
Responsive website design for Desktop, Tablet and Mobile. Implemented through Html, Css3 and JavaScript – Front end coding languages.

Realigned Website Link

MoMA Process Book



SOLVE AND IMPROVE
  • Youtube subscribers
  • Connect Instagram account to website
  • Increase user retention rate for home page
  • Increase primary value drivers such as free shipping and low prices
  • Offer unique discounts and promotions to win Comparison Shoppers
  • Provide pickup discounts
  • Have a dynamic pricing tool
  • Use promotions with gamification
  • Offer discounts in exchange for repeat purchases
  • Conversation pieces and engaging, game-like items are popular
  • Less sales on website than physical store
  • Define the uniqueness of MoMA Design Store
  • Build the connection between online and offline experience (not just shopping)
  • Easy access to the background story of the products
  • Realignment of the information hierarchy
  • Make it easier to share the shopping experience
  • Easy access to membership information
  • No price listd on home page
  • Indifference of audience type
  • e-tailers should invest heavily in their ability to offer free and fast delivery. To win otherwise equal comparisons, e-tailers should also consider giving consumers the option to select what company delivers their order (20%) and the ability to see reviews from family and friends (10%). Technology driven offerings like chatbots, visual search, virtual reality (VR), and augmented reality (AR) move the needle too, but less so


    • STRATEGY
  • Inform
  • Educate
  • Promote
  • Visual accuracy
  • Follow trends
  • Built connections

    • GE-process

    GE-process

    GE-process

    Style-app-process

    Style-app-process

    Style-app-process

    Research

    The most crucial phase is the product research which is typically market and user research.
  • Market research is all about what people want— it is used to determine whether there will be demand for a product and provides a scope of what potential consumers want from it.
  • User research is a way to gain insights into user behaviours, needs and motivations— what is useful to people. It gets used when market research has discovered there is a demand for the product but needs narrower information on how it can be improved.
    • Read full Report

    Style-app-process

    Style-app-process

    Style-app-process

    Analysis

    The purpose of the analysis phase is to extract insights from the data collected during the research phase and confirms the assumptions made are valid or not.
  • It helped us to understand and organise learnings into categories of ‘what’ users want, think and need and then begin to understand the ‘why’ they want, think and need that.
    • Read full Report

    Style-app-process

    Statement of work

    After analysing user needs, A statement of work (SOW) document was created which is routinely employed in the field of project management. MoMA's SOW defines project-specific activities, deliverables and timelines for providing services for the project. It also includes detailed requirements and pricing.
    Read full Report

    Style-app-process

    Style-app-process

    Style-app-process

    Style-app-process

    Style-app-process

    Design

    When the user expectations/goals for MoMA were secured, and the business objectives were clear, we move through to the design phase.
  • An effective design phase is highly collaborative with key stakeholders, in particular and content teams.
  • This is an iterative process, we designers looked to validate any assumptions. Early experimentation makes updates so much easier and helps teams work towards a seamless user experience.
    • Read full Report

    Style-app-process

    Style-app-process

    User Testing

    Once the high-fidelity designs were created, I tested the designs on end-users through a series of user testing sessions.
  • Usability testing is the most significant thing we can do when designing a user interface or trying to improve the user experience.
  • This is the most critical method of testing the product with real users—the key is not to test a lot of people, but did various cycles of testing.
    • Read full Report

    Style-app-process

    Style-app-process

    Final Designs

    After User testing the final designs for MoMA website were created
    Read full Report

    Style-app-process

    Style-app-process

    Style-app-process

    Implementation

    The final Responsive Website Implementation starts up with Zurb foundation as a frame to set HTML page up. Then using CSS3, Javascript, and jQuery implement the final programming phase.
    Read full Report Realigned Website Link