Design process

For the scope of this project, I used the double-diamond design strategy to help define the framework and solve the project challenges along the way.

Each design phase required a good understanding of the design thinking methodology which turned out to be a non-linear process, as it consisted of a constant flow of iterations between phases; not only forwards but also backwards.

Fig: The double-diamond design methodology

Understand

Empathy & assumptions

Hypothesis

Research

Define

Synthesize

Insights

How might we?

Prototype

Paper prototype

Medium fidelity Wireframes

High fidelity wireframes

Test

3 rounds of user tests

I began my exploration into the problem space with extensive secondary research to gain more insight through data available online and academic journals, which allowed me to draw up some initial assumptions on the problem and possible intervention processes.

With assumptions formed, I was able to draft an initial set of survey and user interview questions.

This stage of the process involved extensive secondary research to gather quantitative data; administering online surveys to gauge opinions, and finally I conducting user interviews to gather qualitative data that would either confirm or disapprove my initial assumptions about the problem space.

My assumptions were that users would be willing to switch to a new video conferencing product if it had a better user experience and design features than existing products, and one that had a proven encryption technology that ensured privacy and prevented data leaks.

Interview insights

1. Misleading privacy terms

INSIGHT: Most users think that privacy policies are deliberately made lengthy to dissuade users from actually reading through the terms of service.

“I feel like I’m more cognizant of it now. But to be honest.. if it’s short, sure. Like two pages much more.. but if it’s something like 40 pages.. I’m probably not going to read it.”

2. Precaution

INSIGHT: Most users indicated that they would exercise caution before installing new digital tool if they were unsure how safe their data would be.

“Installing Zoom on my computer was a very big deal, I didn’t like it, um.. not because I don’t know it.. it’s because of the first information that I heard about Zoom.”

3. Clarity

INSIGHT: A majority of the users interviewed indicated that privacy terms and policies should be structured and articulated in an easily comprehensible manner.

“I think some of it is not very upfront, you don’t know what you are signing up for half the time.”

Learning from the data

Most users are not opposed to data mining - A reoccurring theme was a general concern of being kept in the dark.

Surveys

Interestingly, 7/18 users indicated their openness to use a tool that allowed third-party access to their personal data, but wanted to be made aware of this during the onboarding process, while 11/18 users were more inclined to use services that made it clear why it collects the personal data that it does.

Interviews

2/3 users expressed their frustration about the apparent lack of transparency by the tools they currently use on what the of data was being collected, and vague terms of service templates. This gave me the idea to find a way to also succinctly but clearly highlight this info to users.

Who’s it made for?

I designed this product to primarily target users such as Jason (below). Jason represents a specific demographic of users that are that are quite savvy with existing remote conferencing tools, but would like greater control over their personal data. These users want to be in the know on what they share, how it’s used and generally more clarity around data leaks.

User story

How would a user ideally interact with the prototype to accomplish certain task? This was one of the first problems I had to solve along the way.

Building on conventions

Understanding that most users would already have used one or more remote working products, and as a result had an established idea of what tasks they would expect a new product to help them accomplish; I used that as jump-off point for what features I wanted to buy into the prototype.

Fig: A snippet of the user-story showing what tasks a user could accomplish

Fig: An initial task flow highlighting the primary functionality

Work flow

I created a primary work flow for a user interacting with the product to perform the task of video calling and simultaneously sending a document.

*During the course of the project, I had to Iterate on the work flow after conducting my first round of user tests; users interacted with the product much differently than I had initially assumed.

Initial sketches

(Top row) An initial concept sketch of a user trying to accomplish a primary task of making a video call to a colleague while simultaneously sending them a work file.

(Bottom row) An initial concept sketch of a user trying to accomplish a secondary task of sending a work file to a colleague via the instant messaging feature on the app.

Going digital

Paper prototype

It was important to test and refine the user experience before diving deep into digital wire framing. To accomplish this, I used the marvel tool to create a quick low-effort prototype, see interactive screens here.

I sent this prototype to my peers and other designers within my network as a means of soliciting quick feedback.

Taking feedback

The peer feedback I received was invaluable, it helped me quickly pivot in some certain areas of my initial design before proceeding to create medium fidelity wireframe designs in Figma.

Fig: A low fidelity paper prototype screen

Fig: An early version of the medium fidelity wireframes

What changed?

Work flow

The changes made to the work flow were primarily around the logic of the interaction, simplifying the user experience and accounting for systems status and response.

Designing an intuitive experience

I worked on making the interaction seamless and intuitive enough to allow a first-time user quickly complete a task without much of a steep learning curve.

Fig: Updated task flow with improved synchrony between imputs and response

Back to the drawing board

I decided to start the ideation process afresh and went back to pen and paper to conceptualize an updated version of the UI elements and workflow.

Making every pixel count

I focused my sketches on exploring a simpler way for a user to interact with the UI played with ways to maximize the screen real estate.

Fig: Exploratory crazy 8 sketches to improve the UI

Fig: Updated screens showing refinement between versions

User interface

Some of the changes I made to the UI were largely around accessibility standards, Information architecture and reducing the ambiguity of some of the icons I had chosen for the interface.

a. Larger fonts, icons and images to so users can use product even when phone is held at a distance.

b. Relocated the sign-in CTA button to the bottom, and changed the icon as well.

c. Relocated the phone icon from the top left corner, and replaced it with a camera icon, which I think betters serves the need of the user (for capturing documents and sending to a team member.)

d. Top navigational bar icons and icons within pop-up chat feature were updated with improved legibility.

Finally, a testable prototype!

After making the improvements to the task-flow and wireframes based on peer feed-back, I finally had a medium fidelity version of the prototype I could test with actual users.

Here is an interactive link showing the updates I made to the primary task flow with redesigned screens.

The value of rapid testing

It goes without saying that the only way to significantly improve a product is to put it in the hands of the people its designed for at any given opportunity.

Every experience designer understands the importance of testing quickly and often. Personally, the hours leading up to the first round of user tests for any project always fills me with anticipation and a sense of nervous excitement.

Fig: Redesigned V1 home screen medium fidelity wireframe

The first round of test really helped reshape my approach and better design the experience whilst keeping the user in mind.

What they said

Testers commented that the Camera Icon be swapped with the search icon as they would intuitively expect it to be located there  given that most of the apps they are already used to are designed that way.

See usability testing plan & sessions output link here.

Fig: First round of user test assigned tasks and outcome

High impact low effort

It was important to find a balance between giving the users what they needed and what I could possibly deliver in meaningful time.

I used the priority matrix method to help determine what changes would deliver the most value to users at this stage of the product cycle. using the matrix was critical as it helped me stay focused on the important changes that were sure to considerably improve the experience for the user.

Fig: Priority matrix showing areas of improvements made to V1

Small improvements go a long way

Fig: Updated screens showing refinement between versions

Refining through from insights

The improvements I made were focused on addressing areas that critically impeded usability of the prototype.

a. CTA label changed to reflect actual function. This was an error missed during the initial prototyping.

b. Relocated the camera icon to the bottom navigation bar for easy access and to meet established standards.

c. Relocated the search icon to the top of the screen, and included a search bar. *4/5 users mentioned that they intuitively would expect the search icon to be located at the top of the screen.

A second iteration

Here is a link to the Interactive prototype of the re-designed (V2) wireframes.

Measuring the re-design impact

As before, the primary task the user is trying to accomplish remains the same, but I made some minor adjustments to improve the interaction, and flow between screens.

Fig: Login screen updated after the first round of user test

After completing the iterations based on feedback from user test 1; I went ahead with a second round of test. Users were asked to perform 5 distinct task, one main task flow, and four navigational tasks to gauge if the improvements done yielded better test results.

Icon labels matter!

The feedback I got pointed to a disconnect between how I intended users to interact with the prototype and how they actually did during testing. Some users were confused on how to navigate the prototype due to a lack of icon labels.

See usability testing plan & sessions output link here.

Fig: Second round of user test assigned tasks and outcome

What’s important?

Typically usability tests reveal so much about a product, and every bit of data gathered during these sessions could at times be overwhelming to a designer when considering what changes to prioritize even when using a priority matrix method.

Iteration never stops!

Understanding that the design process is never a one of thing, but a process that continues throughout the lifecycle of the product helped me stay focused on what changes I needed to focus on in the interim, knowing full well that areas not prioritized on immediately would eventually get resolved in due time.

Fig: Priority matrix showing areas of improvements made to V2

Optimizing the experience

Fig: Updated V3 screens showing changes between versions

Feedback loop

A few improvements before high fidelity!

I made a number of important updates to the prototype using the data gathered from the latest usability test.

a. Adding Icon labels, reduced icon sizes, and adding a minimum of about 44px clickable area around icons to meet iOS standards.

b. Re-design and update of UI elements based on user feedback that V2 “felt very scanty and that the experience was below par”.

c. Size of bottom navigational bar icons reduced and spaced out for better accessibility.

d. Included additional features and secondary task flow; a calendar, shared files folder, starting a conference call.

A third iteration

With the areas of prioritization based on user-feedback improved upon and some additional features included, I felt the prototype and concept was in a strong enough position to move the designs to high fidelity. See V3 Interactive prototype here.

Establishing a framework

Moving forward, my goal is to conduct additional rounds of user test on the high fidelity wireframes, and keep the iteration process ongoing within scheduled product update cycles.

Fig: Moodboard showing inspiration for the light and dark UI theme

Considerations

Mood boards - My Inspiration for the UI of the app was primarily influenced by the lightness of the clouds.

Brand name - Appropriate for the target demographic | Easily brand-able, short and memorable.

Brand colors - The brand colors were inspired by the moodboard. Colors extracted directly from the board and refined with a color-picker tool.

Typography - I used SF Pro Display as the typography within the app because I felt it strongly complemented the SF symbol Iconography set that was also used.

Fig: Moodoard showing the inspiration for chosen typography

Fig: Exploratory sketches for brand logo and word mark

Interactive Prototype

See the high fidelity interactive prototype here.

Key features at a glance!

Home screen

One tap access to video conferencing, file-share, and calendar features.

Calendar

Set up reminders with the Calendar feature, or sync existing Google or iOS calendar. Preview upcoming meetings on the horizontal scroll menu on the home screen.

Video & File Share

Remote work, collaborate with team members using end-end encryption capability.

Fig: Home screen wireframe in high fidelity

Fig: Responsive marketing website - desktop

A web app!

More screen real estate

I also designed a web app as alternative way to interact with the product.

How it enhances the experience

The web app is intended to provide the user with the ability to conveniently carryout video meetings on a bigger view port.

Users can conveniently follow up on upcoming project deadlines and messages while working on their laptops.

Fig: Desktop web app home screen

User test 1

I learnt that despite my hesitation going into the first round of the test, the feedback received really helped shape the next step in the product development. I was able to focus on identified problem areas and capitalize on opportunities to further improve the usability.

User test 2

Going into the second round of tests, I was a lot more comfortable with the idea of observing the user, and detaching myself from the design. The information gathered from non verbal cues are absolutely critical to further refinement, and a huge take away from this round of testing is the fact that iteration and product development never stops. Next steps of the product development will include establishing brand colors, language, and rethinking the placement of home screen icons to make better use of available screen real-estate.