Mobile Commerce Blog header image

Mobile Commerce Blog

≡ Menu

5 Magento UX to UI Tips

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ DISCLOSURE FOR MORE INFO.

Best-practices Ecommerce design methodology follows the following process:

  • Discovery/Definition (where the project requirements are carefully scoped)
  • UX or User Experience (where the site structure is determined along with page layout)
  • UI or User Interface (where the UX transformed into compelling, branded design)   process.

ux ui graphic

The extent and approach to this process varies based on the expertise of the agency, the budget, and the business requirements.

We’ve assembled five useful UX to UI tips based on our experience designing scores of Magento websites.

1.UX is more than a suggestion

In the hands of a professional UX designer, user interaction is not arbitrarily assigned to page elements, it’s carefully thought out, based on a study of prior user behavior, page content, and business goals.

UI designers should consult with the UX at the handoff to understand the rationale behind the UX design prior to adding the UI flair.

Remember that powerful applications like Magento are based on a solid understanding of ecommerce best practices.

This means that it is important not to stray too far from the path. We don’t want to challenge shoppers with some new paradigm once they are in the purchase funnel.

Example of UX to UI Magento website:

uxtoui 1

2. UX is not a mandate

This tip seems contrary to Tip 1, but we have to realize that design is a group effort and should accommodate multiple perspectives.

It may be that the UX designer is not up to date with certain design trends or does not have as much of a marketing focus.

In this case, an extra microinteraction, emphasized CTA, or creative solution could increase purchases.

A good UI designer knows how to augment the UX to maximize the selling ability of the website.

3. UX and UI collaboration continues

Remember that clients are usually unfamiliar with the UX wireframing process and a wireframe – no matter how well designed – can be alien to a client.

This means that once the UI has executed a design based on the UX, the client may raise objections even though they have “signed off” on the UX design.

In a case like this, it is important to keep communications open between UX and UI, so they can form a unified front and support their design.

Another reason to maintain the collaboration is “Change Orders”. These are project changes that affect the scope of the work by adding new features, pages, and functions.

If a Change Order happens, then it may require going back to the UX for revised wireframes, then on to the UI to incorporate the revisions into the interface design.

4. A solid rationale is the best insurance

Solid UX followed by good UI provides the best rationale for website design. It is easy for an agency to stand behind design that can be supported through this process.

If the Project Manager is familiar with the UX rationale, then they should be able to stand by the UI design, and push it through to client approval.

We have seen projects where clients have objected to certain design elements but when backed up by UI these objections usually vanish.

The client may “always be right” but this doesn’t mean that a little pushback is bad.

5. Don’t be afraid to revisit UX

UX designers are only as good as the information they have been given. It may be that the UX wasn’t provided with certain business goals.

We’ve worked on projects where key marketing information has been absent at the beginning of the project.

In this case it’s important to bring the UX back into the process so they can rework the design based on the new requirements.

Usually this doesn’t result in a complete redo, but it does affect user paths and emphasis of design elements.

Example of UX to UI Magento website:

uxtoui 2

So the takeaway is:

We are all working toward the same goal, a win/win for the agency and client. UX and UI are integral to the win/win outcome.

Therefore it is critical that communication paths between the two are open to any input that would help drive sales.

Richard Parr

by Richard Parr

Richard Parr is owner of Executionists, Inc., a full-service digital agency located in Los Angeles, that also specializes in Magento UX and UI. Richard and Executionists have been working in web for 20 years, and have won 30 awards for their creative, business solutions.

0 comments… add one

Leave a Comment