Kristen Howard Design
Mockup_01.jpg

ORDIT

Ordit. The Customisable Task Management App.

UX Case Study.

The Brief: Design a task management application that consolidates current market-leading features and offers a holistic solution to task management.

Delivered: 2017/2018

Ordit began with the idea to find a new approach to one of the most saturated markets in the world of applications, task management. Task management software has existed and evolved since the dawn of the personal computer, offering users the full capabilities of personal organisation in the digital domain. Why would anyone try to fix this tried, tested and delivered category of apps you may ask? The answer to this is fairly simple, task management apps rest on the fundamentals of UX design, combining the needs for efficiency, simplicity, familiarity and individuality. Looking at this offered an approach to app design that demanded looking at and questioning the fundamental concepts of UX design and the user.

x.jpg
 

Initial Research and User Surveying

COMPETITOR ANALYSIS
The first step in identifying a unique approach to task management applications was to research current market-trending apps. Analysis of these competitors included comparative information on competitor profile, marketing profile, core business approach, S.W.O.T profile, UI/UX characteristics, content analysis, design analysis and their site performances.

The analyses looked at leading market brands, as well as smaller free options to cover a broad spectrum of the task management market. Looking at this birthed the idea of focussing on a unique customisation feature, one that offered users the option to essentially design their own app. An attempt to make the learning curve of using the app a definitive process and promote user loyalty by honoring the uniqueness of each individual user or group that want to use the application either for their individual organising or for work team and group project management and organising.

 

USER SURVEYS/INTERVIEWS
The second step in discovering and defining Ordit, was conducting a range of surveys and interviews to establish real data on users and identify what they liked about current apps and what could be added from existing task management applications. The results gave further confirmation that the journey of Ordit would be one focussed on customisation. 

The findings raised some interesting questions, including insight from task management users in work environments finding current applications on the market focussed on features and less about the individual user. In other words, providing a product users expect, instead of modelling the app in a way that allowed users to fulfil their own expectations. 

An interview question asked whether current apps fulfil user's needs and also asked how they would feel about the possibility to customise their app. 50% of users interviewed were happy with current apps, this showed their indifference on this question to customisation, the other 50% agreed it would increase their likelihood of using an app. The interesting part of the finding was that a few users made contact to express how much they would love customisation in an app. With this combined with the lukewarm response of 50% of indifferent users, the challenge presented itself of creating something that felt attractive for users, and also felt new but focussed on customisation options. A challenge indeed!

 

 

 

Competitor Analysis of competing applications for the initial phase of creating Ordit.

Competitor Analysis of competing applications for the initial phase of creating Ordit.

Surveys and Interview data

Surveys and Interview data

Defining the User of Ordit

USER PERSONAS
After researching the market to establish a unique position for Ordit, it was time to start designing models and personas in order to visualise a potential Ordit market and define the purpose of the application. By consolidating the data collected through surveys and interviews, the next step involved translating this data in potential users of Ordit. The users below represent both potential individual and team users. The target demographic in Ordit's initial brief was to appeal to both individual and team users, with an attempt to marry the professional and personal markets. The User Personas explored a sales team leader, a young entrepreneur and a freelance designer/student worker. 

   

 
 

CUSTOMER EXPERIENCE MAP
The next step in defining Ordit for users, was to map the journey of a potential Ordit user and hypothesize their experience. The map put focus on an enjoyable setup process, with some minor learning curves expectedly encountered during an apps initial use. Here it was important to acknowledge the pain points of using a new user interface and application.

TASK MODELLING
This step in defining Ordit illustrated the unique customisation setup, a potential to make or break whether the user connects to app and decides to use it. Customisation will add time to setting up the app, but allows the opportunity to educate the potential user about app features as well as giving them the feeling that they are in control of the app. The pros and cons here are even.

It was here that the idea was born to have an option for ready-to-use templates, as well as a customisation setup. This would create an option for users who wanted to test the app out quickly and not bother with a full 5-10 minute setup. Covering all demographics, four templates were proposed; personal, professional, creative and business.

The final four template options envisioned during task modelling.

The final four template options envisioned during task modelling.

 

 

 

 

Customer Experience Map

Customer Experience Map

Task Model for Ordit setup process

Task Model for Ordit setup process

 

Information Hierarchy and Card Sorting

CONTENT AUDITS
The next phase in the design of Ordit focussed on creating the framework of application content and features. This process began with content audits of competing applications, deconstructing their user flows and translating this insight into Ordit's vision. 

CARD SORTS AND INFORMATION HIERARCHY
Cards were then named and arranged to work out the best and most seamless pathway for users using Ordit; the user signs up, goes through a template or custom setup, then lands at the dashboard where they can edit their app and begin using its features. 

Content Audits (top), Card Sorting (bottom)

Content Audits (top), Card Sorting (bottom)

Information Hierarchy for Ordit's web, tablets and phone applications.

Information Hierarchy for Ordit's web, tablets and phone applications.

 

ORDIT INFORMATION POPULATING
During this phase content was also created to populate future mockups and wireframes, this included call to actions and product descriptions.

Copy writing

Copy writing

 

 

Wireframing

PAPER PROTOTYPES
With the plan for Ordit's information in place, the next phase involved designing individual screens for Ordit's mobile, tablet and web applications. 

Paper Prototypes for the customisation user flow on mobile app.

Paper Prototypes for the customisation user flow on mobile app.

DIGITAL WIREFRAMING
Paper prototypes were converted into digital wireframes, ready for user testing. See below for the user flow illustrating how a user would set up a balance sheets in Ordit's "Sheets" feature (a spreadsheet alternative). A feature created to accommodate business and personal finance users. 

Tablet User Flow: Setup and edit a balance sheet

Tablet User Flow: Setup and edit a balance sheet

Mobile User Flow: Setup and edit a balance sheet

Mobile User Flow: Setup and edit a balance sheet

 

 

User Testing

Interactive testing on InVision

Interactive testing on InVision

INTERACTIVE AND NON-INTERACTIVE TESTING
Now that the wireframing for Ordit's user flow and user interface was completely mapped out, it was time to take test some prototypes. This process included non-interactive and interactive (via InVision) user testing sessions. During the testing phase a few pain points were discovered with users, these were ranked by priority and fixed during the final prototype design phase:

  • The customisation consisted of 12 initial features, this was reduced to 9 to achieve Ordit’s goal of simplicity.
  • Various design flaws: some parts of Ordit’s design were repositioned in response to some pain points intensified by users.
  • Buttons: some buttons were redesigned after users got confused when trying to complete commands.
  • Consistency in various design features (calendar, projects, tasks, sheets etc)
  • Omission of "setup assist" feature and focus on clear and easy-to-understand individual setup screens.

 

 

A/B Testing: Top Left: Design 1, Middle: Design 2, Bottom Right: Design 3

A/B Testing: Top Left: Design 1, Middle: Design 2, Bottom Right: Design 3

A/B TESTING: RELAYING UI DESIGNS TO THE USERS
A/B testing was used to establish the best colour scheme and UI aesthetics for Ordit. The initial colour scheme was based on the colours of the artist Mondrian, these symbolised creativity, simplicity and a child-like joy. The test results yielded the need to reduce the colours of Ordit to lighter versions as this appealed to more users. 

DESIGN 1 (0%) NO RESPONSE
Original bold colour-scheme. 
Pros: Bold, attention-grabbing, primitive
Cons: Too harsh, too loud, too violent

DESIGN 2 (25%) MINIMAL RESPONSE
Lighter pastel variation
Pros: Modern, feminine but bold
Cons: Childish, lacking strength and confidence

DESIGN 3 (75%) BEST RESPONSE
Lighter pastel variation of Design 1
Pros: Modern, Primative/primary, easy
 

 

Example click test   

Example click test

 

CLICK TESTING: RELAYING UI DESIGNS TO THE USERS

GOALS:
Click tests were created to see where users clicked when using certain parts of the application, the main goal was to neutralise pain points.

EXAMPLE SESSION FINDINGS:
Here on the left you can see that users were a little confused where to click for Income on the balance sheet (first picture). They were also confused about where to click when accessing sheets from the dashboard menu, although most users found their way either through search or by clicking the function directly. The test illuminated UI pain points and a need to change some visual hierarchies.

EXAMPLE SESSION IMPLEMENTATIONS:
The result (bottom left) of this was to change visual hierarchies and make it easier for users of find their way - see here for the menu icon changes and additional menu bar to make it clearer for users to find things in the dashboard. You can also see in the last image that the bottom bar was removed to create more space for users.

Further testing was undertaken to determine how users responded to the rest of the application. The test results were implemented into the final UI design for Ordit's web, mobile and tablet applications.

 

 

 

 

 

Delivering Ordit

FINAL UI FOR SCREENS:
Final screens for the customisation setup user flow. You can see below the final 9 main features of Ordit for customisation; Calendar, Projects, Tasks, Contacts, Lists, Groups and Group Messenger, Sheets, Moodboards (an internal Pintrest style feature), Media Center (cloud storage).

 

STYLE SHEET

 

 

MORE OF ORDIT: