Projects

Web design

User experience design

UI design

Research

Design Thinking

Generating backlinks via high quality interviews

Designing an experience that allows businesses generate backlinks via high quality interviews

My Role

Lead Designer — I was the lead product designer with a team of 2 product designers, 1 PM and 5 engineers. With this team we were able to create an MVP of the Jotmill app that can be used to make interviews.

Team

Donye Collins - Lead Designer
Idris - Product Designer
Kumar - Stakeholder
‍Omer - PM

Timeline & Status

2020 - 2021

Getting acquainted with Jottmill

Jotmill is an all in one web app tool which allows EngineerSF client companies to create in-depth question and answer interviews of any type.

With Jotmill, one can create, edit, collaborate and export any interview seamlessly all in one place.

This is an internal tool tailored as a service to EngineerSF clients

• Landing page
• Web App

🥊 Understanding the basics and the problem

For years, opinion leaders, customers, and internal company employees have all found generating backlinks hard or producing high quality interviews time-consuming.

This is the core problem Jotmill is solving for, hence I needed to get more research done in order to understand the problems and why they exists, what ways are these problems being solved and how Jotmill can solve these problems in a new more modernised way with ease and efficiency.

These where the thoughts I had that led me to carrying out more stakeholder interviews, over-the desk research, competitive analysis and user interviews under limited budget constraints and time factored deadline.

🔎 Uncovering how users solve this problem of interviewing businesses

I carried out user research sessions with four stakeholders who were going to be the first set of people to use Jotmill who have experienced the problem firsthand; I wanted to get insights

Findings i

• Customers, companies, and content creators have found growing their sales, generating customer leads, and producing high-quality interviews to be challenging and time-consuming.

• Q&A interview content is a growth weapon that is difficult to properly utilise. It takes 5-15 asynchronous hours of coordination to recruit, create questions, edit, and publish Q&A interview content for companies.

Findings ii

• There was no all in one tool that actually made the editing, making, answering, collaborating and exporting of interviews a seamless process. It was quite hard finding exact competitors who where solving for the problem of interview creation and backlinks generation.

• People had to use up to four different softwares just to make this happen.

• Typeform, Google Form and Bitz had the feature of sending out interviews but there wasn’t any that provided real live collaboration and editing.

🔎 Researching what solutions solve this problem

I researched the competitions that offer at least two to three features of Jotmill and tried to analyze their strengths and weaknesses based on those features. I created a competitive benchmark analysis to display the data from the competition analysis research.

Deductions from analysing the market

‍ • Google surveys, Typeform, and Bizy give the ability to create and answer interviews in one place

• Google surveys, Typeform, and Bizy allow interviewers to create all types of interview questions, including text, audio, video, multichoice, text, and yes/no questions

• Google form and Typeform have split tab bars at the top that forms the basis of navigation for interviewers to see their questions and answers in different tabs

• Typeform allows you to select a template to start with when creating an interview

• Typeform, Bizy, Figma, and Grammarly have third-party API support to embed other apps in them and use those other apps in the same place

• Grammatical errors happen when interviews are created; the document has been pulled to Grammarly, which helps to correct grammatical errors

• Figma is the only one with instant collaboration and comments in one place, and it's a feature that's needed a lot

👀 Discussing and structuring the PRD

We (the team & stakeholders) had a series of meetings where I presented my findings and research, carried out feature prioritisation exercises to help the stakeholders craft an MVP and we discussed next steps as a team.

The end result of the meetings was a well structured PRD detailing features and what needs to be built. With this, it was clear what needed building, and breaking the PRD down into bit sized steps was the ideal next step so it’s easier for my fellow designer ( Idris ) to understand the intricacies of the app, its user personas and its user flows.

Below are highlights of the user types, their roles and core user flow of the Jotmill product

Type of Users and their roles

Interviewers - People who create interviews.

Interviewee - Someone who answers during an interview.

Editors - Someone who edits the interviews and corrects grammatical errors before publishing.

Collaborators - People who make comments on the interview.

Core user flow

Interviewers

• Sign up for Jotmill
• Click create new interview CTA
• Add interview details, and send invite to interviewee
• Add interview questions
• Interviewee receives notification of added questions and answers them - Interviewer receives notification of answered questions and pushes to editor mode
• Interviewer adds editors & collaborators to help edit interview
• Publishes interview and shares across social media

🤔 Figuring out the User Interface layouts and structure

Once we had the user flows and stories set, I drafted out a design plan on how to approach the designs and layout structure that bests matches the stakeholders and their goals, which helped the other designer ( Idris ) and I jump straight into high fidelity.

I had a few directions in mind that I wanted to try out, so the designs went through many iterations before we had a shippable design candidate.

Challenges we faced

Getting the right design candidate wasn’t an easy tasks, as we needed to portray the best designs that encapsulates the problems the users where facing and while making sure we help them reach their goals with ease and few clicks.

A few challenges we faced while building the Jotmill app and how we solved them:

• How do we enable collaboration between teams?
• Add interview details, and send invite to interviewee
• How best might we onboard interviewees to the app?
• How do we design and build a landing page with the smallest minimal time.

🛣️ Building the Jotmill experience while uncovering challenges

After much iterations, we where finally able to find the best style, design patterns and layouts that solves for the users and helps the business create interviews with ease.

How do we combine all the type of interview questions in one place seamlessly?

One of Jotmill’s core functionalities was to create different types of interview questions depending on which the interviewer selected. So far, we have designed for five interview types which are audio, video, texts, checkbox and multi-choice type of interviews by having an upcoming modal widget prompt users to select their interview type in order to create a new interview.

This way the user has a variety of question types to select from when curating questions for an upcoming interview.

To simplify the interview type creation process, we designed a widget to help users understand different interview type, this way they can quickly select any interview type they want to create by clicking on “ADD NEW QUESTION”

After the first test on the interview screen with the stakeholders, we found that some stakeholders were finding it difficult to understand what to do. Next, we added a widget helper on the left hand to assist interviewers in navigating through the Jotmill tool.

How do we enable collaboration between teams?

One of the coolest features for Jotmill is the ability to collaborate with everyone in the interview flows, from interviewer to interviewee, editors, and collaborators. Sadly, all the tools we explored did not have this feature, so we had to look for a tool with a collaboration feature and implement it.

We decided to use the insights gotten from the research, especially the competitors research:

"Figma is the only one with instant collaboration and comments in one place, and it's a feature that's needed a lot."

We implemented the invite feature into Jotmill from a button at the top of the page and allowed the interviewer to add everyone to the file and give rights and permissions.

Interviewees can save questions they have answered to copy their committed answers and reuse them later. This is one of the main benefits of the knowledge base as it enables teams to refer back to important saved questions for later use.

How do we onboard interviewees on the app and make them register?

When an interview is created, a link is sent to the interviewee’s mail which takes them to the interview. Beforehand, they had to register to take the interview.

But doing this wouldn’t really drive more influence on the business aspect of people knowing the app more after they have answered their interview.

For this reason, we went with the opposite flow of allowing the interviewee to answer the interview first, store their session as cookies in the cache in case they close the page before registering their account.

This way we ended up giving them a walk through of the other things they can do on the app when their interviews have been submitted.

The interviewee answers each of the questions sent in by the interviewer on this screen. They can display all the questions on a single screen or show one question per screen.

Designing and Building landing page showing value propositon

After designing the app, we wanted to show customers what Jotmill does; some of its features and how they can sign up for beta release.
The team’s goal was to spend less time on development of the landing pages design.

I proposed to using USMO to build the landing page so as to safe development time and money and get it out faster. Usmo is a landing page drag and drop page builder for building landing pages. I was familiar with building landing pages on Umso, so it was the perfect tool to get the landing page ready due to the time constraints, we needed the development team to focus more on the Jotmill web app.

I didn’t build the designs on Umso myself, I had to delegated the task to a designer on the team because I was occupied working on the Jotmill web app platform, I needed to make sure we met up with the deadline without any defaults, so I urged him to learn how to use Umso a No-code platform which had a low learning curve of a few hours and anyone would be good to get started on Umso.

The design and development of the landing pages took us four days. It was a wonderful experience watching the designer on my team try his hands on Umso and getting experience building for No-code platforms, that was a spark that pushed him to building more websites on Umso and grew on him as a skill.

UI Styling

We created a design system guide consisting of typography, color, spacing, components, and patterns used on the web and mobile app, landing page, and other aspects of the Jotmill brand.

Iconography

The design team and I designed custom 24px icons that were used as a navigation on the interviewer and interviewee dashboards and 32px icons representing the interview question types.

Other UI scenes of the web-app

📊 Results and what's next?

So far, tests has shown a 50% completion rate in interviews and that shows progress in the right direction, my next goal for this project is improving on that rate through testing.

I am currently leading the design team in building the Phase 2 of the project, we are currently testing and gathering insights, so far they have being promising, I can’t wait to share the next phase of this project catch you later.....

80%

Sign-up interviewees rate after reworking the interview flow

20%

cut in the development time by using a no-code tool for the landing page

30+

Business indicated interest to white-label this product after being invited for an interview

🎙️ Feedback I got?

Amazing work, loved how you and Idris took the feedback from Omer and I and turned it into a well thought-through experience for our users, nice one guys.