A Case Study:

User Experience Research & Design:

A look into one process used to build a project, this was a training project in partnership with CareerFoundry (Berlin Germany).  This project was not put into production but used to help discover and learn a process for researching and creating a User Experience Design project.

Taskly is a Task Management Application that was like other Task Management Apps on the market, but I was permitted to customize the project to make it my own.  I chose to adjust the project to fit a former line of work that I am familiar with and that I still have connections to people who are in that line of work who could provide feedback (aka Users to do testing with).  I chose to build a project for leadership teams for an Experiential Marketing & Advertising company because I have worked in multiple areas for those kinds of projects and know that the people who manage the programs have a lot of different tasks to manage both in the office and in the field. 

My User base covered three different levels of the team that puts on an Experiential Marketing program. 
1. The Program Manager is normally the person in the office that acts as the center point for both the client (the Brands) and the teams out in the field.  They are involved with translating the Brands goals into an actionable program and building the team of people to execute it.  
2. The Tour Manager is the lead person in the field.  They are the go-to person at the site for each event and control how its run.  They are responsible for the event but do not have any powers when it comes to HR functions. 
3. The Brand Ambassadors are the front-line team.  They can be a permanent crew that travels around with the program or the could be local contractors for each major area.  They are responsible for learning about the Brand and the goals of the event.  They have no leadership responsibilities.

Skills used:
  • In person interviews  (past experiential marketing projects, & focus groups).
  • Online surveys
  • Card sorting
  • Google Analytics 
  • SEO optimization
  • Click testing
  • A/B testing
  • Site mapping
  • User journey mapping 
  • MS Word
  • MS Excel (data collection & organization)
Design Skills used:
  • Adobe: InDesign, Photoshop, Illustrator, PDF, PremierPro
  • UX Pin
  • InVision Studio
  • InVisionApp
  • Wireframing
  • RealPlayer (video)
  • Hand Sketching
  • Color theory
  • Font theory 

Stakeholder / Client: CareerFoundry

Project: To build a task management application
Type of project: Research & Development

My Role: Sole researcher & designer.

Users: People in the Experiential Marketing industry.

Feedback from international mentors.

NOTE: The PDF's tend to be large files and may take some time to load. 

Step 1:

Part 1 Discovery Phase:

At the start of any project the UX team would work with the Stakeholders to identify all the business goals for the project.  This was a new project so I had to identify the competition, research what their strong and weak points are to learn from them what we could do better with Taskly. 

Stakeholder:  CareerFoundry
Product: Taskly A Task Management Application for Desktop, Tablet and Mobile Phone.
Suggested Competition: Centrallo, Meistertask, Smart Sheet
Target Market:  Experiential Marketing and Advertising Agencies.
Target Users: Experiential Marketing Project Managers, Tour Managers & Brand Ambassadors.

Deliverables: Competitor comparison report, showing user journeys, and feature listings.

This is a PDF report from this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

After identifying all of the key factors (ie product type, target market, target demographics etc) an series of evaluations of competitors products were made to discover what they did well and where they had opportunities for improvement.  

Tools used:

  • Competitor feature evaluation & list
  • Competitor user flow
  • General product impression
Step 2:

Part 2 Define & Research Phase:

At this point I started to define what the product is to be and what the function should be.  This involves continued reviews of the competing products (or services) with the idea of defining areas for our product to accel in.  I also was able to start defining the Minimum Viable Product (MVP) and work to gather a strong list of possible Users who will be able to help teach myself what the Users wanted or needed in a product of this kind.  I started with an online survey for our users to start the information process, this led to User Interviews for additional information. 

From this I formed the first generation of User Personas so that I could formulate a more direct connection to the human side of the process.  I also worked with the Stakeholders to refine the business goals for the project.  This also started the procedure of developing some of the processes that users will have to go through to complete different tasks in the application (Customer Experience Maps).  Content Audits were conducted on additional similar products to expand the knowledge database.    Several different versions of site maps were built, starting a possible layout / function order for the product.  I closed out this section by combining our research to form a revised view of our User Personas letting us gain a deeper understanding of who we are working for (the start of constructing the empathy process). 

Deliverables: Competitor Analysis, Taskly MVP, Surveys and User Interviews, User Personas, Customer Experience Maps (Journey Maps), Continued reviews of competition, Introduction to Information Architecture.

These are PFD reports generated for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 3:

Part 3 Research phase people / Tech discovery:

3A: Looking to confirm several ideas and to discover any opportunities I was able to conduct in person and online card sorting exercises to help better sort the information in the eyes of the user.  I was close in most cases however they did supply some stronger ideas. 
Deliverables: Better terminology, and organization of information and site layout. 

3B: Words have a big impact on how users respond to and interact with products.  Terminology used on buttons to body copy are a way provide an ease of understanding and a way to prevent confusion.  One of the key ways that verbiage is utilized is by Search Engine Optimization, words have both meaning and a cash value when applied in the correct way.  Google Analytics is a source that provides a break down on the values and impacts of words when users do searches.  This can be used to boost the power for a product to be found and placed high on the list. 

Deliverables: Tag lines and keywords to improve searchability, additional information architecture

These are PDF reports generated for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 4:

Sketches from different parts of this section along with photos of real users doing non-interactive testing.

Part 4 Research phase understanding people more: Sketches, sketches and more sketches.

4A: When building a process, it is good to understand how people will interact with it so that you can construct it in a way to prevent problems.  This is one location where adding visual elements can lead to new discoveries.  Sometimes the easiest way to achieve this is to build User Paths to map out the processes, this can confirm positive ideas and discover areas that might become an issue.  Its easier to fix a issue that is on pencil and paper than it is to fix it in code.  Multiple iterations are used to refine these processes till they are the most productive.  In most cases there are no correct or incorrect ideas, rather options to explore and refine.

Deliverables: Pencil and paper sketches, there are never enough.

4B: Testing your ideas with people.  Once you believe you have a solid process you hand them over to real users to see if they can figure out what to do.  This is also a great time to discover where and when in each part of the process they have issues that will need adjusted.  Paper mockups let the user test the flow and report any and all hang ups that are causing confusion or are unnecessary. 

Deliverables:  Refined sketches, photos, reviews.

These are PDF reports generated for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 5:

Random samples of wireframes from different parts of this section.

Part 5 Visual building phase, Working with the screens:

5A:  In most situations most, digital applications will be accessed on a range of screen sizes.  The processes worked out earlier will need to work the same so that the user has a sense of continuity no matter how they interact with the product.  Depending on the application being developed the product could be accessed more on a smaller screen.  If the research shows this to be the case, then designing for a mobile first philosophy should reduce potential conflicts.  In this phase a more refined version of the sketches is used showing more details but still done in black and white.  Typically, these are done on software packages such as InVision Studio, UX Pin or other vector based graphic programs.  Again, the more iterations done are usually better, the early discovery of problems now are easier to fix than finding them later. 

Deliverables:  Lots of digital sketches for a range of platforms.

5B: Visual Building Phase: Testing with people.
While working in this phase it’s a good idea to have real users interact with the refined sketches to confirm that no new issues are creeping into the design as it evolves.  This process can be done with both paper prototypes and interactive screens.  Software tools like InVisionApp let a designer build a strong mock up of all the screens and provide ways to include buttons to interact with.  Moving from paper to a screen (all sizes) in this way can find additional issues along the User Path.

Deliverables:  Highly refined Black & White mockups and interactive files used in testing, feedback from users, and refined designs.

These are PDF reports for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 6:

Part 6 Visual building phase: Improved iterations and better revisions.

6A: At this stage I was looking at specific details of each process in the Application and refining to remove any additional obstacles and to clarify any remaining issues.  Details are polished so that the user feels as comfortable moving around and interacting with all parts of each screen.

Deliverables:  Refined User Flows / Processes, refined sketches. 

6B: A mix of UX and UI, the introduction of emotional design:
Just like words color is a very powerful tool to use to help guide a user along a path to resolve a process.  Color can be used to help draw a user’s eye to a specific part of the screen that needs attention.  It can also be used for coding for different levels of users or processes.  Color is also a very powerful tool to convey a theme or mood that can influence how a user reacts to a product and it can help prevent issues depending on the environment the screen is viewed in (a dark room, bright sunlight etc.).

Deliverables: Color pallets, font styles, themes (brand related). 

These are PDF reports for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 7:

Part 7 Visual building phase: Style guides & design hierarchy.

7A: Picking a color pallet can be related to the brand in some cases or it can be related to the user personas.  In the case of Taskly, there are 3 levels of users and each required a different color pallet to be used as a guide so that the User can confirm they are in the correct part of the App.   With color the font used on a screen has a large impact on the readability in different conditions.  A fine weighted font will be hard to read in bright sunlight, while a heavy font can appear over bearing for no reason.  Images, color pallets and fonts combine to form a Style Theme that can become part of the product brand (that supports the company’s brand).  When all these parts are combined you have the Product Style Guide that helps to direct the look and feel.

7B:  Patterns and Hierarchy in Design:
Users are much more comfortable when there is a similar feel through out a product experience.  Buttons, text fields, body copy, fonts, icons & logos should all have a similar shape and feel throughout a design.  The use of a visual hierarchy can help sort information (i.e. different headline sizes makes it easier to sort the sections to read) and can be used to direct the flow of eye and interactions. 

7C: The use of psychology in design, a person can absorb only so much information at one time.  Patterns can be used to put information into digestible chunks that are easier and faster to understand.  However, braking too far away from what is known can lead to issues of un-necessary confusion or rejection.  Users tend to be more comfortable accepting gradual change (i.e. baby steps) when supported by processes and visual clues that are familiar.  In most cases product design is a fluid process that is supported by evolution rather than revolution.

Deliverables: Style Guides, refined screens showing color.

These are PDF reports for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 8:

Part 8 Visual refinement phase: User testing and more testing, and then Data

8A: Now that most of the details are refined and polished, it's time to get back in front of more users.  The development team has been working alongside your design process (if you are in an Agile Environment) and should be close to having a final product ready.  You are still able to make changes, but they require more effort.  High-fidelity interactive prototypes are a great tool to put in front of users and have them work with.  They should be able to perform all the processes while only finding minor adjustments or tweaks as needed.  Sometimes you are in a situation where you need help choosing between two strong options, and this is where A/B testing come to your rescue.  This is typically a very details situation where you present two options to a group of users and ask them a series of details specific questions.

8B: This is a process that can be done with almost any level of refined mockups that can verify that your user process is correct is called Click Testing.  Users use a special program or website that can track where they interact with the screen.  When they click on a specific area it is recorded, and hopefully it is on the correct part of the design.  A similar tool is used for eye tracking that will tell you how users view your product.

8C: Data, Data and more Data!  While Taskly was not built the step following the release of a digital product is to collect Data.  This can be done via a range of tools, the most common is Google Analytics (GA).  GA has a large collection of tools that can gather a large selection of information about the users who visit a website or your App.  This information can be used to adjust for future revisions, it can also be a help in confirming that your research and design ideas were correct. 


These are PDF reports for this section:

If you open the full screen view you will need to click the browser back arrow to return to this screen.

Step 9:

This is a PDF report for this section:

Part 9 A portfolio ready project.

This brings Taskly to a close.  This was a conceptual project to illustrate one User Experience Research & Design process.  Projects can have different process based on what that project needs are.  Companies can have different processes for different reasons.  Some companies follow a Waterfall style because of current structure systems or management styles.  Other companies follow a more Agile system, bringing in all of the departments connected with a project to provide input in the early stages.  I am betting that in most cases most of the UX projects being built follow a hybrid of the two styles in one way or another.  Because of the nature of how CareerFoundry and the Taskly project were completed it followed more of a Waterfall process (the project was not completed 100% and there was no code built). 

Thank you for taking some time to review this project.

Deliverables:  A portfolio ready presentation of Taskly, there is a much more in depth report showing all of the work collected but it is large.

If you open the full screen view you will need to click the browser back arrow to return to this screen.

In closing: A sample project:

This project was an opportunity to explore one of the ways that a digital product can be developed, there are more.  I was a team of one but I was able to receive feedback from a collection of international instructors, mentors and coaches.  There were chances to explore some of the cultural difference in how projects are viewed and completed.  At the time Taskly was being worked on the big topic being discussed in the UX community was Waterfall vs Agile Environments when building teams and design locations.  This was an enjoyable project to be a part of and I am looking forward to working on more in the future. 

My main observation from this project was simple, there are a large number of similarities between Digital Product Development & Physical Product Development both in thinking and processes.  My original design education was from the Columbus College of Art & Design with a degree in Industrial & Environmental Design (physical product design) and the two systems follow the same pattern of interacting with the people on both sides of the process to build a complete product that tries to best answer a problem.  

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram