portfolio juliane angelina biallas

Dipl.-Des.

Juliane Angelina BiallasUX-Designer | Art Direction | Conception

„Let‘s create a desire you haven‘t dreamed of.“

[email protected] www.juliane-angelina-biallas.com

xing.com/profile/JulianeAngelina_BiallasRilkestr. 18, 40668 Meerbusch

+49 1711998087

Taskly - A Project Management

A UX Case Study August 2016 - January 2017

During my 6-month User Experience (UX) course at Career Foundry the challenge was to create

a project management application from the first idea into a production ready product. The app

is called ‚Taskly‘ and my goal was to build a program that‘s compatible for every day use and

that should replace analogue task tools. The app should be easy to use, casual and with a user-

friendly interface. The target group are individuals, small teams, homemakers and freelancers

that like to use it for personal errands and business projects and collaborating with others in

small groups eg.

Challenge

Taskly an MVP (Minimum Viable Product)

The challenge of this project management app was to create a product within a short amount

of time so I was forced to focus only on Taskly‘s MVP core features by including unique selling

points to let it stand out from the others. I focused on three features: creating a task, selecting a

mode (private, team or business) and adding a plug in for personal needs.

There are so many task management apps out there. The problems lies on the hand: They have

bad usability, they are too overwhelming or too complicated and users feel frustrated about

using it. Also most apps are created for entrepreneurs, big teams and digital pro‘s and aren‘t

created for the use of ‚normal‘ users. The other examples of apps are too simple and haven‘t got

the features for a professional use but are still overwhelming with a bad user experience und

unclear usability.

Taskly should be the first professional task management application that‘s suitable for private

users, individuals, freelancers but also small teams. It should work without the need of knowledge

about complex digital processes. The program should replace analogue task tool solutions and

give users the benefits of a digital product.

The most important fact you should always keep in mind:

Create for the users, not for yourself, and testing and iteration

makes finally a great user experience!

1.1 Research

Competitor Analysis

My task was to conduct a competitor analysis of other task management applications. I decided to

compare the most popular apps: Asana, Basecamp and Trello.

The task was to find about their strenght and weak points and how I could take advantage about it

with buiding Taskly. I created a list with following analysis points:

- Competitor profile (Industry, operating system, competitive advantage, competitive disadvantage)

- Customer profile (Gender visit, education, browsing location, visitors by country)

- Marketing profile (Target market, marketing strategy)

- Website ranking/keywords (Top keywords, what sites users visited before, what sites like to the

app, page title, meta description)

- Core business (Product, pricing and costs)

- SWOT Profile (Strengths/Weaknesses/Opportunities/Threads)

- UI/UX (Usability, layout, navigation structure, compatibility, calls to action)

- Content (Dashboard, project items, calendar view, due dates)

- Design (Attachments & files, file or document library, support, team roles, labels & links, search

function, milestones, content relevance, brand voice)

- Performances (Aesthetic, visual design)

- What‘s good/bad/missing about their product

Based on this analysis I could determine that Taskly’s industry is available as SAAS (software as a

service, a product you don’t own, it’s available online), their potential customers are small to large

companies and business people, clients and business people who are collaborating with others.

I already figured out that normal people that aren’t business people or digital professionals need an

application that is easy to use, just with a few core features and a friendly usability that is what they

are longing for.

All the big task management apps are created for business life and companies with a way to

complicated usability.

1.1 Research

1.2 Research

User surveys

In order to validate or invalidate my hypothesis about Taskly’s customer needs I conducted a user survey

with Survey Monkey. A set of questions with its core features of Taskly’s Minimum Viable Product (MVP).

My hypothesis

Many people don’t know there are professional and easy solutions out there for managing their daily

business and tasks (and not only for people working in a company/professional environment): They

are called task management apps.

Most homemakers, individuals and freelancers that don’t know those apps still prefer planning their

daily business with analogue features such as calendars, sticky notes, file cards and papers or they

even use easy converted programs like excel.

I conducted the test with people fitting to my target group who conducted the test online.

Conclusion

I figured out that many people haven’t even heard about such an app or have to get used to it. An

app would people help organize, plan and simplify all daily business. People just need to get lead to

this subject and a mentor or person who’s working with this tool could show how easily it works and

simplified their daily business management.

User interview

I conducted another survey, this time an user interview with consistent questions in person and on the

phone with my target group.

So I gathered qualitative data and I figured out user problems. I could validate a lot of assumptions and

created optimized MVP core features for Taskly.

1.2 Research

1.3 Research

Taskly‘s MVP‘s and S.M.A.R.T goals

Concerning my user surveys I could figure out Taskly’s user needs and its business S.M.A.R.T. (Specific,

Measurable, Actionable, Relevant, Trackable) goals.

1. I want Taskly to be very easy to use, simple and with an elegant design.

2. I would like to make the project and calendar section more integrated and possibly located in

the same place.

3. The ability to easily move individual tasks between projects would be beneficial.

4. We’d like to be able to visualize a project in progress and who is working on it.

5. We want to show teammates’ tasks and priorities and assign them to the respective team members.

6. We would like to be able to notify each team member when a task is completed.

–> SMART goal: We want to provide a free trial package for potential customers with beneficial features

regarding their needs to catch a conversion rate of 20% as paid subscribers.

Regarding to this solutions I want to write down the updated MVP:

– Easy usability and friendly modern design

– Flexible dashboard (private/business)

– Plug-ins for additional features like collaborating in a group

– Calendar view or other analogue tool view

– Change and move tasks via drag and drop

– Reminder notifications for tasks (what’s due, done upcoming)

– Sign in also with social media account like linkedin/facebook

1.3 Research

1.4 Research

User Personas

I created personas to model, summarize and communicate them based on my quantitative data from

user research and analytics. They are related to my target group. The user personas are depicted as

specific persons but they aren‘t real individuals. I should create three user personas who all maintain:

- Demographics

- Occupation

- A quote

- Keywords

- Background

- Challenges

- Goals

- Frustrations

- Technology

- Identifiers/Personality

1.4 Research

1.5 Research

Task Model

Task models are logical descriptions shown in a visual model all of the activities to be performed in

reaching user’s goals. For Taskly I created this model to understand about the steps users go through

when they are planning a project e.g.

In this task model I created the process of a group who is managing and planning a project (a bellydance

event planned on day x) with Taskly. It increases efficiency and conversion rates.

1.6 Research

Customer Experience Map

A customer experience map is a visualised journey of a user’s process through e.g. conducting a

purchase in an online store. I created a map regarding to Taskly’s bellydance group that helped me to

identify problem areas. The journey map shows all stages from the event planning to the final event

and post event actions.

2.1 Information Architecture

Card sorting and sitemap

I conducted a content audit and a SEO research of the identified competitors of Taskly. After this I did

card sorting with a group of people who helped me to figure out sorting Taskly’s main navigation.

To do the test I cut out pieces of paper where I wrote down Taskly’s navigation points like log in/out etc.

My test group needed to sort the cards into a structure and prioritize them. With the results I created

the sitemap of Taskly.

2.1 Information Architecture

Card sorting and sitemap

3.1 Prototyping & Usability Testing

Wireframes

After the sketching phase I created digital wireframes starting with the mobile first approach. This

approach helped me creating a better experience on tablet and desktop devices because it was the

most challenging part when you consider errors prevention and lack of space and opportunities.

I used UXPin to create the wireframes for all devices.

Usability testing

Then I loaded the prototype into InVision and tested them with users and iterations helped me creating

a great user experience.

https://invis.io/ZX94TWIUT (link to invision tablet interactive prototype)

https://invis.io/JX94TXA3N ( link to invision desktop interactive prototype)

https://invis.io/8594B2WTD (link to invision mobile interactive prototype)


Wireframes


Usability testing

The wireframes and prototypes I’ve created were tested again and again with users from Taskly’s target

group and I went through a lot of iteration processes. I tested mobile, tablet and desktop versions.

I conducted live tests in InVision where participants tested alone and I conducted paper prototype tests

with users sitting right next to me.

Both options have their pros and cons, when you conduct a test and the test person sits right next to

you, you can distract or influence them in their user flow. On the other hand when you conduct a test

when you let your participants conduct the test alone they feel lost or missing a helping hand when

they have important or specific questions, also it’s a good option to see how the user interact while he‘s

doing the test and how long he takes for an interaction.

Through the tests other usability issues came up and I solved them through iterations and retesting to

make them validate.

4.1 Visual design

Style Tile

For the visual design of Taskly I decided for a great font, the right colour palette and I created a mood

board with an emotional design regarding the user needs and a harmonic friendly layout. Concerning

the moodboard I created a style tile. A stile tile is more specific as a mood board but less precise then

a mock up. It shows already the guiding style and examples of the program or website how it should

look like.

TASK Y

?

PRIVATE MODE

TEAM MODE

BUSINESSMODE

Juliane BiallasPosition: UX Designer

Settings

About me

Short bio

Email address

Log OutAre you sure you want

to delete this?

Yes No

New task

ADDRESSCALENDAR NOTESFILE CARDS GROCERY LIST NOTEBOOK

THIS IS AN EXAMPLE OF A HEADERThis is an Example of a Sub HeadLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel feugait nulla facilisi.

This is an example of a Text link »

TYPOGRAPHY

COLORS

STYLES/PATTERNS

user-friendly illustrativ

materialisticflat individual

personal

ADJECTIVES

PLUG-IN‘SCREATOR TOOL

ARCHIVE

BUTTONS/FORMS

Date and time Subtask Reminder Attachment

4.2 Visual design

UI Kit

Then I created the UI Kit for Taskly. We discussed about the UI Kit and I made iterations for a great user

interface and a strong brand awareness.

4.3 Visual design

Interface design mobile


This is the interface design of Taskly for mobile devices. Taskly has three modes:

- Private mode (green)

- Business mode (yellow)

- Team mode (pink)

The interface includes:

- 6 task tools: calendar, file cards, notes, notebook, grocery list, address book.

- Adding plug-ins

- Creating a task

- Showing the three different modes

4.3 Visual design


4.4 Visual design

Interface design tablet


This is the interface design of Taskly for tablet devices. Taskly has three modes:



- Team mode (pink)



- Adding plug-ins

- Creating a task


4.4 Visual design


4.5 Visual design

Interface design desktop

This is the interface design of Taskly for desktop devices. Taskly has three modes:



- Team mode (pink)



- Adding plug-ins

- Creating a task


4.5 Visual design

4.6 Visual design

Not one single task to do? Mr. Task feels upset because

he hassn‘t got a single task to write.Help him out!

Are you sure you wantto delete this?

Hello

Janenice to see you back!

Welcome! I‘m Mr. Task and I‘ll

guide you through Taskly.

Mascot Mr. Task

I created this mascot Mr. Task for Taskly. He should bring a bit fun and joy into the program, create a

user-firendly design and guide the user through the program for a great user experience.

5.1 A/B testing and analytics

Click testing

Conducting the test with VerifyApp

I created a multi page click test with VerifyApp. I uploaded four different pages of my Taskly‘s app to test

if there are still problems to solve. The link was shared via social media (facebook and slack) and also

sent via email. 30 people conduced the test. I created a task for every page and users had to click into

random spots on the screen where they thought it was right. One example would be: Where would you

click when you want to create a new task?

Results

After testing it was clearly that one navigation on a page was totally misunderstood. It had a huge

usability problem because participants couldn‘t find the right solution to select and change the task

tool button (from calendar mode to file cards mode). I made iterations and designed a new interface

module for this page with the result of a better usability and great user experience because users can

easily find the right button where they find an overview of all the task tools.

Red spots

The red spots on every page showed where users had clicked and gave me insights what I could

improve and what it already a great user experience for them.

Old version

New tested version



Google analytics

I conducted an A/B test with google analytics. I created two versions of Taskly’s sign up page. Version

Av with the option to sign up via email and version B with the option to sign up via email or by using a

social media account. The task was to find out which version would have more conversions with the

result of more paying subscribers.


Data AARRR

Acquisition: I want to implement a user friendly landing page that invites users to sign up and register

for Taskly. A catching copy that lists the benefits for users and reasons why they should sign up, its

USP and eye-catching calls to action buttons. Regarding the log in section the social media log in icons

shouldn‘t be missing (users can easily log in also when they‘re registered in other social media channels).

The conversion rate will rase what leads to more users that will subscribe to Taskly.


Data AARRR

Retention: It‘s important that users return to Taskly. This should be working as simple as possible. A

great solution would be implementing this by adding preset options, e.g. saving user data, automatically

log in functions or preset functions for tools users use frequently that starts automatically or important

tasks that are already shown on their dashboard.

portfolio juliane angelina biallas

Documents