Published on <a href="http://ift.tt/2rTzS0p">| Prototyping: From UX to Front End &mdash; Medium</a> Terry Tan <img alt="" src="http://ift.tt/2sWwB0L">
<a href="https://askmetisa.com">METISA</a> is a Artificial Intelligence software that converts e-commerce data (about customers and products) into additional sales. Using advance data science technique to continuously act on the behalf of e-commerce business owners/managers based on the insights generated from their data. Though the Metisa Dashboard, an web app.
Understanding how current user use <a href="https://askmetisa.com">METISA</a> Dashboard and current process flow for “Automated email Features” function, a UX solution came about on how to enhance the user experience for Metisa Dashboard and it’s “Automated email Features” useful and delightful to users.
Indirectly translating to potential increase in subscribe users and recurrent users along increase in market presence. Links to <a href="http://ift.tt/2tvUcCn">Prototype</a> and <a href="http://ift.tt/2sWoMYV">Presentation</a>.
<h3>User Research</h3>
In the initial meeting with <a href="https://askmetisa.com">METISA</a> information shown there was a high drop off rate of users using the service despite the excellent AI insights it could provide, due to the unfriendly user <a href="http://ift.tt/1W3uwHp">interface system</a> currently perused by <a href="https://askmetisa.com">METISA</a>. Resulting in current <a href="https://askmetisa.com">METISA</a> Dashboard users unable to fully unlock the potential of <a href="https://askmetisa.com">METISA</a> among others.
<a href="http://ift.tt/297pCZX">User Interviews</a> and <a href="http://ift.tt/2blIOTX">Heuristic Evaluation</a> and <a href="http://ift.tt/2om61bj">Competitor Analysis</a> was conducted leading up to a <a href="http://ift.tt/1TXpubY">SWOT Analysis</a> being create in which opportunities was uncovered allowing <a href="https://askmetisa.com">METISA</a> to stand out among the competitors in the market.
<img alt="" src="http://ift.tt/2tvTC7K">Things to work on
<h3>User Interviews</h3>
Main findings uncover during the contextual inquiry with Users they were:
<blockquote>Metisa needs more guidance on what each feature are for and what it does, creating confusion for current user.</blockquote>
<blockquote>There is a lack of information /explanation for user to stay informed on actions performed, result in redundancies.</blockquote>
<blockquote>There is a lack of reaffirmation of actions done, creating confusion for user.</blockquote>
<blockquote>Email Editor is extremely unwieldy as it is HTML code base resulting in user with no coding background to be unable to use the editor.</blockquote>
<img alt="" src="http://ift.tt/2sWnAVm">Contextual User Interview conducted on current Metisa Interface.
<h3>Heuristic Evaluation</h3>
<a href="http://ift.tt/2blIOTX">Heuristic Evaluation</a> conducted further reinforced the findings that were found during the <a href="http://ift.tt/297pCZX">User Interviews</a>.
<img alt="" src="http://ift.tt/2tw7vCQ"><img alt="" src="http://ift.tt/2sW6VkJ"><img alt="" src="http://ift.tt/2tvD0wF"><img alt="" src="http://ift.tt/2sWMVyl"><img alt="" src="http://ift.tt/2tw4dzh"><img alt="" src="http://ift.tt/2sWMSCF"><img alt="" src="http://ift.tt/2tvYPMy"><img alt="" src="http://ift.tt/2sWG5Jm">Heuristic Evaluation of current Metisa Dashboard<img alt="" src="http://ift.tt/2tvMhVA">Competitor Analysis
<h3>Competitor Analysis</h3>
An <a href="http://ift.tt/2om61bj">Competitor Analysis</a> was conducted to gain insight on the current market trends along what is available to the public.
From the <a href="http://ift.tt/2om61bj">Competitor Analysis</a>, findings were discovered that a “Drag Drop Designer for Email Templates” being the basic feature provided in the market, and services being offered by the competitors.
<img alt="" src="http://ift.tt/2sWMTGJ">SWOT Analysis of METISA
<h3>SWOT Analysis</h3>
With cumulative findings from various User Research conducted, a detailed <a href="http://ift.tt/1TXpubY">SWOT Analysis</a> was created showing <a href="https://askmetisa.com">METISA</a> as a product strengths, current weakness, opportunities available to it and threats it face in the market.
<img alt="" src="http://ift.tt/2tvPBQu">Feature Prioritisation
<h3>Feature Prioritisation</h3>
<a href="https://askmetisa.com">METISA</a> Dashboard upgrade is done in <a href="http://ift.tt/1ZJOqrA">AGILE</a> due to limited developer on hands.
To that end a <a href="http://ift.tt/1UJwaul">MVP</a> prototype was determined to be the best method in developing the project as further refinements could be easily handled as the project progress along.
<h3>Design Workshop</h3>
A Design Workshop was conducted for brainstorming for <a href="http://ift.tt/2hssN1Z">wireframing</a> of the new <a href="https://askmetisa.com">METISA</a> Dashboard along revising the current user process flow.
<img alt="" src="http://ift.tt/2tvCZc5"><img alt="" src="http://ift.tt/2sWegRn">Design Workshop results
<h3>User Process Flow</h3>
A new revise User Process Flow was created in tandem with the enhanced <a href="https://askmetisa.com">METISA</a> Dashboard to further guide the user as to how to go about unlocking <a href="https://askmetisa.com">METISA</a> potential for their eCommerce business.
<img alt="" src="http://ift.tt/2tw4cvd">Revise METISA User Process Flow
<h3>Usability Testing + Iterations</h3>
Initial <a href="http://ift.tt/1oJuKE0">Usability testing</a> for the Email Editor was conducted using paper prototype from there findings found was that:
<ul>
<li><a href="https://askmetisa.com">METISA</a> insights need to be prominent</li>
<li>Text should all be together</li>
<li>Logo and footer should be preloaded</li>
<li>Don’t understand merge fields</li>
<li>Don’t understand insights</li>
</ul>
<img alt="" src="http://ift.tt/2twaOda">METISA Email Editor Interface<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FodmkFe8Hm6Y%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DodmkFe8Hm6Y&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FodmkFe8Hm6Y%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2sWuie9">http://ift.tt/2sWuie9</a></iframe>
Follow <a href="http://ift.tt/1oJuKE0">Usability testing</a> conducted assisted in further finessing the prototype <a href="http://ift.tt/1UJwaul">MVP</a> deliverable for the Email Editor and Dashboard.
<a href="http://ift.tt/1oJuKE0">Usability testing</a> findings for the Email Editor was:
<img alt="" src="http://ift.tt/2tvAw1B"><img alt="" src="http://ift.tt/2sWzqyS">METISA Email Editor Interface
<ul>
<li><a href="https://askmetisa.com">METISA</a> insights and merge fields should be combined</li>
<li>Editor Panel should be slimmer</li>
<li>Preview background should be of a different lighter color so user is able to differentiate email template from background</li>
<li>Additional tool buttons should be included for editing and deleting to make it more convenient for user</li>
<li>A preview and hint should be shown so user would know what action would come next while drag dropping field asset</li>
</ul>
Findings for the Dashboard Design was:
<img alt="" src="http://ift.tt/2twaQBO">METISA Dashboard Interface
<ul>
<li>Dashboard Panel colours is fresh</li>
<li>Button Panel looks messy</li>
<li>Feedback icon was thought to send an email to customers</li>
<li>Links are more prominent</li>
<li>Propose AutoResponders makes sense as it is now laid clearly to user to easily signify its purpose</li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FeWZ5U_sBSeE%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeWZ5U_sBSeE&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FeWZ5U_sBSeE%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2sWwBhh">http://ift.tt/2sWwBhh</a></iframe>
<h3>MVP (Minimum Viable Product)</h3>
Thru various iterations a <a href="http://ift.tt/1UJwaul">MVP</a> Prototype was proposed and accepted by the client for further development and implementation. Link to <a href="http://ift.tt/2twaRFS">Prototype</a>.
<img alt="" src="http://ift.tt/2sWi44Y"><img alt="" src="http://ift.tt/2tw20UO"><img alt="" src="http://ift.tt/2sWujid">Existing Interface and Propose Interface design comparison
<h3>Business Benefits + Next Steps</h3>
With the implementation of the enhance interface, <a href="https://askmetisa.com">METISA</a> will be able to:
<blockquote>Improve user experience with the improved editor = Result in potential increase in Metisa subscribers</blockquote>
<blockquote>Show, Explain and Validate the Metisa Process = Increase in market brand awareness</blockquote>
<blockquote>Trust and Assurances = Potential increase in recurrent subscribers to Metisa service</blockquote>
Following steps for consideration and implementation would be to:
<blockquote>Review the help info and support structure in place to guide users when lost</blockquote>
<blockquote>Post upcoming future features</blockquote>
<blockquote>Provide a Email Templates saving function and library</blockquote>
<blockquote>Perform regular security assurance (web vulnerability test) of the system</blockquote>
<blockquote>A better onboarding experience for 1st time users</blockquote>
<h3>Retrospective</h3>
Working on METISA has enable me to view a product development through the lens of a developer their perspective looking at a project and how they go about developing it, which is a polar opposite from how a UX designer would view a project and develop it. providing valuable insights on how I could work in tandem with the developer for future projects.
<img src="http://ift.tt/2tvOaBT" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2sWgTCG">Metisa: A Usability Case Study</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Metisa: A Usability Case Study

Top Stories