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.
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:
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:
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.