Make your work Easy

Easel.ly | Infographic Tool Website

This project was a real client and a team project that lasted about three weeks. We were assigned clients randomly. Our client was a company that is offering infographic tool services that made it easier for people to create designs. Our customer said he would like to know more about the ability to make charts among the various functions on the website. He also said he would like us to focus more on the research materials than on the overall style of the website. So we tried to plan our research period a little longer to get a variety of data, and we wanted to create Mid-fi wire frames to present solutions based on our research. Our team conducted the Competitive, Comparative, and Heuristics Analysis. And we set up Proto-persona in groups of 16–24 and 25–44. And based on that, we conducted a user interview to find out the current users' thoughts and opinions about the infographic tools. We also run Usability Tests to use Proto-persona to learn about existing clients’ websites and competitors. We also created wireframes and prototypes to conduct Usability Tests on our solutions. In particular, we wanted to do the same as the first Usability test question to see how much better our solution is compared to Easelly's and Competitors’ websites.

01. Explore

Who’s the client?

• Based in Seattle, Washington
• Founded by Vernon Southward a former software developer and program manager at Microsoft
• Infographic solution tool whose mission is to present information in a visual way
• Service: Business & Nonprofits, Teachers, Students, and enterprise
• Top client: US Bank
• Target Market: Small business 25–44
• Offers membership and custom graphic design services

Newest Feature: “Chart” option

BACKGROUND

• Easelly is a simple infographic maker for individuals and small businesses.

02. Deliver

Problem

CHALLENGE

• From the Client: We are looking for ways to improve our current charting system, to make it more user-friendly. We need a UX team to get an understanding of our customers' current impressions of the system, and spot opportunities for improvement.

RESOURCES AVAILABLE

• UX Researcher to collaborate with
• Existing research/analytics
• Bucket of customers to interview/test with

TECHNICAL CONSTRAINTS

• Browser-based product

Solution

03. Discover

Competitive Analysis

We wanted to compare the chart functions of the customer’s website with competitors to determine the current level of Easelly. There are a total of four competitors we chose. It is Canva, Infogram, Venngage, and Piktocharts. Canva and Easelly were rated as easy-to-use tools, and the other three competitors were considered relatively more demanding than Canva and Easelly, but at a sufficiently user-friendly level. And with a total of nine evaluation criteria, we were able to see what kind of infographic tools are in the marketplace. Four competitors were getting similar scores. However, they had strengths in different parts. Piktochart scored well on Team & Branding, Infogram on Flexibility & Team, Venngage on Flexibility & Branding Canva on All format types & Branding.
These results allowed us to think that these four competitors are well-known to users and stably used by users. We analyzed a total of five places, including our customer, Easelly, through Google Trend, and the usage rate of competitors seemed strong.
Especially, we found out from the analysis of categories that Easelly does not have a wide range of template types. So I thought that to catch a user, it would be necessary to have a unique characteristic of Easelly.

And we compared the types of charts that Easelly provides with competitors to analyze the chart functions requested by customers. I tried to compare what charts they have by dividing the groups into Standard Chart and Non-Standard Chart. And we wanted to find out what other competitors are doing based on the items that Easy doesn’t have. In the Standard section, Venngage and Infogram had all the items, and two others and Easelly had similar scores. However, in the Non-Standard chart section, we were able to know that Easelly did not have 11 out of 13 items, so Easelly only had basic charts compared to other companies. We thought that if Easelly wanted to focus on chart function, a lot of expansion would be needed for chart types.

Here is a comparison of the navigation bar.
As we conducted our first Usability Test, we were confident that there was a problem with the navigation bar on the current website. Even I tried to use the client’s website at first, but I stayed for a long time to look for a workspace to make a chart on the website. So we compared the navigation bars of competitors to collect ideas for Easelly’s navigation bar. Easelly had a total of four main menus in the global navigation system. But we didn’t know clearly where to go to use the design tools. Easelly had a menu called ‘Getting Started’ with unexpected menus such as Blog, Terms of Use, and Privacy Policy. The navigation bars of relatively different competitors were using very intuitive menus. Especially, it was at the front of the menu because it was the main service to make design easier for users. Also, their menus clearly guided users through ‘Create’ or ‘Templates’. Therefore, we thought we should provide a clear solution to the navigation.

Comparative Analysis

We selected Warby Parker, FlexiSpot, and Figma as our comparators to conduct the comparative analysis. We were able to see how these three sites provide users with options for their services. First, Warby Parker offers action buttons to users with large images and simple, clear sentences. And while the FlexiSpot offers a wide range of options, we could think of it as a focus on clarifying categories and using appropriate images to enable users to complete the setup of the product without having to worry too much. And lastly, Figma has iconized the options so that users can quickly make decisions about their choices. Through these, we were able to note that we are using appropriate visualizations to help users choose what users should consider and choose and that we are clearly proposing their services to users.

To conduct the comparative analysis at this part, we selected Zoom and Figma as comparators. The Zoom used table charts and text to deliver price information about their membership services to users. And it seemed to appeal strongly to the price that most users would pay attention to using vector elements. The Figma was also presenting differences in their functions through checkmarks depending on the membership type. What we found here is that the two of us used a table chart to organize the contents in common. Secondly, Zoom strongly states how much users should pay and how much they can save depending on the type of membership, and Figma emphasizes how many functions users can use. Overall, we could see that these two companies are appealing their services to users through visualization.

We chose Youtube and Figma to do the comparative analysis for this part. No matter how easy a tool is, for users who are new or just used, all programs are new and difficult to use for them. Therefore, we thought it would be a good idea to let users know about new features like Youtube through the pop-up windows and encourage them to try them. Also, when users use new functions on the Figma, we thought it would be a nice way to show them a pop-up window so that users can complete their goals without being embarrassed, providing information about new functions and how to use them. Therefore, we thought it would be great to provide a guide to users who use Easelly when new features are released or for the first time.

Heuristics Analysis

We tried to analyze a total of 5 items.
The first is Visibility of Status. From the navigation, we thought it would be difficult for users to get started on Easelly’s home page. Also, their templates can be used as an alternative route, but it is located at the bottom of the homepage with long and lengthy explanations, so we wondered if users could easily enter here. So we put Severity 4 on this part.

The second is about User Control and Freedom. As mentioned earlier, it is not easy for users to enter the workspace. And we thought that the welcome phrase on the first page that users will face after they enter the workspace would be a distraction to users. It was literally placed as a textual element on the workspace, rather than letters that had the ability to disappear when users started using any content. Therefore, users should try to erase it first, try to design it, or try to design it first. So we’re going to give Severity 4 to this part.

The third is Flexibility and Efficiency of Use. Easy had quite a variety of templates. However, we wondered if the templates were being classified into appropriate categories. The reason is that when we did the first user test, one user was searching to use a chart on the search bar, which failed to print out the results. Also, I felt that there are not many categories. The reason for this is that when we did Competitive Analysis, we studied competitors and found that they either had quite a variety of templates or had one very detailed function. So we decided to assign Severity 3 to this part.

The fourth is Help and Documentation. Most of Easy’s functions seemed to be easy to use. However, this will feel very different depending on the user’s ability to use the computer. Easy was explaining the function of using Easy by providing help to users through the Chat function on the homepage and running a blog. However, we wondered how well users can use the menu because it is not properly arranged. So we decided to assign Severity 3 to this part.

Finally, Help Users with Errors. We thought that users would not be anxious if they faced an error because the chat function we talked about earlier is available directly on the website. And when we tried to design it ourselves in Easelly’s workspace, we didn’t find any big errors. However, when we tried to import data files, we noticed that if the Columns & Rows structure of the files is not in the form that Easy provides, Easy cannot read the data files properly. So we’re going to give Severity 2 to this part.

Proto-Persona

To find out what we thought about infographic tools for different age groups, we divided the age groups into two groups and researched by setting up two Pro-persona.

The first Proto-persona is Jackson, 21-year-old. Jackson is an Anthropology student at SFSU, San Francisco, and is currently taking his remotely due to the pandemic. Ever since he was a kid he loved observing how people interact with products, services, and experiences to comeuppance with innovations. He’s open-minded and has the ability to “see” things that have gone unnoticed. He often seeks inspiration from unusual places. He is tech-savvy and often does data-driven presentations for his classes.

The second Proto-persona is Westerberg Sandy, 35-year-old. Westerberg Sandy is a graduate School Student. She always uses charts based on various statistics to help students understand when giving lectures. This is because the students’ feedback is better when she lectures with the lecture materials than without the materials. Therefore, she always tries to visualize the data by using the chart even though she has a lot of work.

We took a closer look at Easelly through these two backgrounds, needs, and pain points.

User Interview

We wanted to find users for user interviews according to our Proto-persona. Therefore, we were able to conduct interviews with a total of 7 users. So, five of them are 25 to 44 years old, two of them are 16 to 24 years old, and we were able to hear from them about the infographic tool through the six questions above.

Affinity Mapping

We were able to organize the data obtained through user interviews into 13 groups, and we were able to create an “I” Statement to organize what users think.

• I want to use charts for Data Analysis
• I want to use it for Presenting my research
• I want to use various types of Chart
• I use Excel or Google Sheet when transferring my data into the infographic tool
• I want to use tools without sign up at first
• I want to use a lot of options about templates or other features
• I want to customize data on Easelly

To focus on the newly introduced chart function, our customer set the chart as the main purpose of conducting the user interview and conducted the user interview. First of all, we can see that basically there was a limit to the answer to the experience because users usually use charts to analyze something. However, I thought that if Easelly was to move away from the basic chart types and provide users with more diverse kinds of charts, users could be more active in using Easelly. The reason is that we asked our users about paid membership, and they answered that if they could use more services through the platform, they would be able to actively use paid membership. Therefore, if Easelly offers a wider variety of services than current services, we can see the possibility of more users joining the paid membership. And we could see that users are usually importing data into infographic tools after entering it in other programs when editing data. This may be because other programs are familiar to users when entering data. Therefore, if users can edit data within Easelly without using other programs, users will feel convenient and it will be easier for them to visit.

Persona

We’ve decided to set our persona as the 24–44 age group among the two age groups set by Proto Persona to suggest the possibility of joining a paid membership.

Therefore Christy Traver is a 36-year-old software engineer and a small business owner. She utilizes statistics to show her work to other team members and stakeholders. Christy would love to use a hassle-free website that lets her create content. And her needs are using infographics for representation and graphs to convey ideas, showing progress & compare. Also, her pain points are Infographic tools can be complicated and time-consuming, Do not know how to use the features, Not enough options to customize, Have to sign up for service without knowing what you are getting.

Scenario

Christy Traver has a presentation next week to some potential investors in her online dating business. She has been working very hard on the dating platform and wants to grab the attention of the investors with the graphics she will share with them. She plans to put a few different charts in her slide deck and the infographic PDF she will share with them after the presentation to ensure she will make a lasting impression on the investors. She is looking for a quick and easy way to make sure she grabs the attention with a colorful chart that brings life to her business idea and showcases her value proposition.

User Journey

Our persona christy will visit Easelly to prepare for her presentation. She got excited about the presentation for a moment, but she got confused as soon as she accessed the website. The reason is that she didn’t know what she had to click to make the chart she wants. There is various information about the company on the homepage, but she didn’t have time to look at them closely. And she looked into the global navigation bar, but she couldn’t figure out what menu she had to click to create a chart. After a long thought, she finally clicks the Template Gallery menu under the Getting Started, and she was able to browse various templates. But she didn’t want to use an existing template, she wanted to create a Blank Template and make a chart there. So she is looking for a Blank template for a while so she has to stay in the template gallery for another long time. Eventually, she couldn’t find the Blank Template so she just decided to use a random template to create a chart. But she wanted to be able to customize her chart a little more. And when she finished the final work and downloaded the chart, she checked the image and found that the colors she set were not printed on the image, they were printed in black, and eventually, she failed to complete the chart.

User Flows

So we created two Userflows for this situation.

First, Users access the Easelly website and then they will land on the homepage. And through navigation, our persona will try to use the blank template by browsing the template. However, if users do not sign up, the blank template will not be available by users. So We thought this was an opportunity for Easelly. Because they’re blocked by the sign-up, so If users can’t do what they want to do, eventually they’ll leave without trying to do more. So we wanted to create new Flows for this part.

And the next second user flows is about users trying to create a chart on the Blank template and importing data. If users create a wrong data file to import, then they have to change its columns and rows of data, if then they will be very frustrated and annoyed because they have to double work. So we thought that if Easelly could switch the column and row of the data file without editing separately, then that would be a great feature for Easelly.

Card Sorting

This is what we did to create global navigation because we found a problem with the global navigation when we did the first user interview. We’ve tried a total of 4 card sorting. The results were very diverse and complicated. Therefore, we were convinced that there was a problem with the current website’s global navigation bar.

Sitemap

Therefore, we created the following sitemaps based on the Card sorting results. Easelly’s homepage has a lot of information about the service. Therefore, we thought the global navigation bar should be as intuitive and easy as possible. Therefore, we created Home, Create, Learn, Pricing as the main menu category.

04. Design

Sketch

We tried to show the results of the research we did through our wireframes. We especially focused on the workspace where users make charts, the reason is that this space will be the place where users stay the longest. So our sketch is about The first image is the default workspace, the second is the user trying to chart through navigation, and the user trying to import files. The fourth and fifth are the steps to customize the chart.

Prototype Video

Our prototype video shows the website first and then shows how users log on to the Easy website, enter the workspace, and create a chart. But our solution offers both ways. One is to sign up and log in to access that workspace. The other contains a solution that the system requests to sign up or login when you want to save or share files after entering the workspace without signing up and logging in. Besides, the navigation bar is designed intuitively so that users do not feel as confused as possible when entering the workspace using global navigation.

05. Deliver

Usability Test

We conducted the first Usability Test based on the questions above. And at this point, We realized we need more insights into the charting feature. So we designed a usability test with these 5 tasks & gave a scenario (Please read the 5 tasks). Not only did we try to use our client’s website, but we also tried users to use each of the competitors’ websites that we set for the competitive analysis by dividing four for each team member. So we wanted to compare these two results with the test results for our future solution.

These are the solutions that we came up with for the home page.

• Prominent search bar
• We arranged the customer testimonials together
• We organized the content on Z-layout bc it allows users to scan the content easily,
• Eye-tracking research findings recommend found these patterns. we picked Z over F bc simplicity is the priority here.
• We organized the workspace according to specific tasks that the user has to do.
• On the left side navigation bar, we included the things that you want to add to the workspace, for example, templates, charts, videos
• Right side-all the editing options, to customize the charts.
• We added toggle buttons and sliding bars. so users can easily customize.
• we separated “edit data” and “style settings “bc with usability test#1 we realized when people wanted to change currency they tried to edit the numbers (currency, percentage, decimals) style settings such as colors separately.

We completed our solution and performed our second Usability Test. The contents of the questions were the same as the first test. This is because I thought that we could compare the test results made in the same environment together. However, most of our test participants would like to use it easily again, especially the older participants we tested. They said that easily simple and concise compared to competitors.

We created a column graph to compare usability test results

• X-axis: 5 tasks for Easelly, Competitors, Prototype(Suggested Solutions)
• Y-axis: Duration to complete each task
• Average time to complete all 5 tasks: Easelly — 8.45 min | Competitors — 7.73 min | Prototype — 5.90 min
• With our proposed prototype users can save 15.30 hours per year.

Through this Usability Test, we can see that it takes more time for users to perform certain tasks on competitors’ websites than on Easelly. But given the relative variety of chart types they have today, we were able to think that the time at the competition and at Easy is not much different. Considering that there are not many types of charts on the Easy website, the Easy website is relatively less clear and intuitive, considering that there is not much time difference. But we were able to see that our prototypes are mostly better than our competitors, as well as our customers’ existing websites.

Reflections

In this project, we focused on the chart functions and conducted in-depth research at the request of the customer and created the solution accordingly. So we wanted to further develop our solution by adding a little more reactive interaction and a little more upgraded capability in the next step. And we thought that the current Mid-fi wire frames’ version is in its final stages, but we thought it would be good to make and complete the Hi-fi wire frames in the future.

06. Team Introduction

• My Role: Research, Interaction Design, Visual Design
• Tools: Trello, Miro, Figma, Google Drive, Google Docs/Sheets

Our team has four members, Ayesha, Hana, Kathryn, and Subin, and the team name is Team Easelly. And we used the project management program ‘Trello’ to manage the team schedule, and we created our team channels separately on Slack to communicate with each other and saved all the data by creating a Share drive on Google Drive.