Portfolio Juliane Angelina Biallas
- 1. Dipl.-Des. Juliane Angelina Biallas UX-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
- 2. 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.
- 3. 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!
- 4. 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
- 5. 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
- 6. 1.2 Research User surveys InordertovalidateorinvalidatemyhypothesisaboutTaskly’scustomerneedsIconductedausersurvey withSurveyMonkey.AsetofquestionswithitscorefeaturesofTaskly’sMinimumViableProduct(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.
- 7. 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
- 8. 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.
- 9. 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
- 10. 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
- 11. 1.4 Research
- 12. 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. InthistaskmodelIcreatedtheprocessofa groupwhoismanagingandplanningaproject(abellydance event planned on day x) with Taskly. It increases efficiency and conversion rates.
- 13. 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.
- 14. 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.
- 15. 2.1 Information Architecture Card sorting and sitemap
- 16. 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)
- 17. 3.1 Prototyping & Usability Testing Wireframes
- 18. 3.2 Prototyping & Usability Testing 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.
- 19. 3.2 Prototyping & Usability Testing
- 20. 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 BUSINESS MODE Juliane Biallas Position: UX Designer Settings About me Short bio Email address Log Out Are you sure you want to delete this? Yes No New task ADDRESSCALENDAR NOTESFILE CARDS GROCERY LIST NOTEBOOK THIS IS AN EXAMPLE OF A HEADER This is an Example of a Sub Head Lorem 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
- 21. 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.
- 22. 4.3 Visual design Interface design mobile 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
- 23. 4.3 Visual design Interface design mobile
- 24. 4.4 Visual design Interface design tablet Interface design tablet This is the interface design of Taskly for tablet 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
- 25. 4.4 Visual design Interface design tablet
- 26. 4.5 Visual design Interface design desktop This is the interface design of Taskly for desktop 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
- 28. 4.6 Visual design Notonesingletaskto do? Mr. Task feels upset because he hassn‘t got a single task towrite. Helphimout! Are you sure you want to delete this? Hello Jane nice to see you back! Welcome! I‘m Mr.Taskand 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.
- 29. 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.
- 30. Old version New tested version 5.1 A/B testing and analytics
- 31. 5.2 A/B testing and analytics 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.
- 32. 5.3 A/B testing and analytics 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‘tbemissing(userscaneasilyloginalsowhenthey‘reregisteredinothersocialmediachannels). The conversion rate will rase what leads to more users that will subscribe to Taskly.
- 33. 5.3 A/B testing and analytics 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.