Johnson Minj
UX designer
Made with

Web message Creator

A Saas product that let digital marketer to engage visitor on their website

Overview

Smartech is a Saas product which let the marketer create, the right message to the right user at the right time and channel.

We were working on the tool of Smartech where a marketer can create web message on their website based on the audience profile.

Brief

Smartech is primarily an enterprise software where the tool is mostly used by internal users. Growing ahead, the vision of Smartech is to become tools for the DIY user, which requires user-friendly experience and takes a little learning to use. The brief was to create a product that matches the expectation of the new gen marketer

Team  

1 PM , 1UX-UI , 1 UI , the development team. I was worked as a UX+UI designer

Timeline 

2 months.

Role

I worked as a design owner of this project . My key deliverables are

a) Design reseach

b) Design Synthesis

b) compitition analysis

c) Task flows

d) Journey map

e) wireframing

f) usablity testing

g) Style guide in sketch

h) VD

Tools

Sketch , Sheets , Paper


Empathise

Use Interview

At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem.

Guiding Questions:

     Unstructured Interview was done to probe User need and desire .

     Four users were interviewed online and one face to face

  • a) Why, when and How he choose to runs web message ?

    b) How many message he sends every day?How often he watch the status of campaigns?

    c) What he do after he run the campaign?

    d) What is preferred software and his likes and dislikes?

    e) What are the difficulties he finds in running a campaigns?

    f) How he schedules and organise the campaigns ?

    g) how he test the interview

  • What did you change on the design based on the insights?

Web message Creator

The key finding are :

User

a) want to create trendy engaging design

b) gets inspired from the deisgn and catchy words

c) dont test the campeign

d) fix number of pages and requirement

e) copies the rule

f) moniter everyday

g) circulate reports twice a week.

Persona

Workshop for creating vision for design

Workshop for creating vision for design

Persona

Participant : PM , Senior PM , Product VP and Chief Architect

A vision workshop was conducted

The persona were developed based on our user interview and stake holder views.

We got our main area of problem which was content creation block from our study .

Primary Personas

Primary Personas

Simple Scenario

Simple Scenario

Scenario

We have identified various scenarios and uses cases of this tool. But keep it simple following scenario was used

We created User Journey map along with PM and other stakeholder

We created User Journey map along with PM and other stakeholder

Customer Journey

In order to get to know our users' behaviour better, we created a Customer Journey Map.

Key findings

Touchpoints- Content Creation 

Pain-points for the user are:
  1. How the design is coming out
  2.  feedback of action and preview
  3. what is getting hidden in the website
  4. preview of the design
  5. control on the design
  6. Inspiration for design
  • Usability goals and success metrics were defined for each task

Journey Map

Journey Map

"I try to make different from the other"

Ankit Thomas cook

Web message Creator

Define

Heuristic Evaluation

Web message Creator

The key finding were

Heuristic evaluations:

Smartech current site has usability issues in 5 areas in particular: 

a) visibility of system status There is no sufficient clue for where I am and what can be done

b) user control and freedom-

i) Widget is very hard for navigation

ii) There is no undo

c) Recognition rather than recall

The bottom popup ( highlighted as 1) is preview, which is hard to guess and

d) Help & documentation -through out the flow

e) Match between the system and real world

 Editor has only text and its difficult to figure out the relation between actions and result.

The image on the left shows a detailed example of some of the specific usability issues on the current website.

Information Overload -Poor data grouping 

These points were addressed during the design phase

competitive analysis

competitive analysis

Competitive analysis

 The great solutions from a range of companies were studied. We capture good ideas. The content editor were the one of the crucial factor , and was taken account into.

Challenge 1- HMW lets marketer create better web message

Challenge 2 - HMW lets marketer target
their Audience better

Ideate

The major design decision was to find out how much editing capability do marketers want

Task flow for content creation

Task flow for content creation

Task Flows

  • Detail task list for the content creation was created.

We created different concept for our problem

We created different concept for our problem

Web message Creator

Wireframes

"HMW lets marketer create better web message"

Based on the challenge one we created a wireframe and showed it to stakeholders and potential users. And took a feedback how they think of this editor. 

The Major set back were :

1) Content Preview is suggestive not real. In order to get the real preview, they need to click on the Live preview button.

2) Need to scroll to see available editing option.

Based on this we created three option and showed it our user.    


Prototype

TEST

User Testing

Example

3 user testing was done based on the similar psychography.

The ask were given and result were analysed
  • Pro 
  1.  The option are upfront and its easy to edit
  2. It's intuitive and easy to use.
  3. Like the gallery
  • Cons
  1. Text editor can be improved
  2. more custom editing option needed

Usability test

Usability test

We had two version of editor and we evaluated based user feedback and stakeholder inputs

We had two version of editor and we evaluated based user feedback and stakeholder inputs

Results

Learning
  • A design never complete
  •  It's better to have success matrix of your product.
  • Cross team communications is the key and tech team gave us a lot of exposure to technical problem of web products. Which were solved collaboratively   
  • Project Management
200
Iterations
81
Screens
4
Users testimonial
100
cups of coffee

"I can see what I can do with New Editor "

Our International Client