ux portfolio - irp-cdn.multiscreensite.com · steve zebrowski +44(0)7725199277...

STEVE ZEBROWSKI

+44(0)7725199277 [email protected] stevezebrowski.co.uk 64 Caraway Drive, Wood Hall Park, Swindon, SN2 2RG.

UX PORTFOLIO

Hick’s Law

Gestalt Principles Mental Models

Fitt’s Law

Pattern guides

Competitive Analysis

Heuristic Evaluation

Usability Testing

Task analysis

Contextual Enquiry

Interaction design

User interviewsWireframing

Storyboards

Empathy map

UsabilityAccessibility

REDESIGN OF SOLICITORS REGULATION AUTHORITY SYSTEMSBusiness Case

Solicitors Regulation Authority are the UK’s governing body for Solicitors and legal firms. They manage any complaints from the public of any bad practice and allow solicitors and legal firms to regitster as practicing professionals. They have internal systems that need to communicate with a web portal for their clients. The internal systems are used by different parts of the business speciallising in specific areas. Often there can be cases that have information spread accross different areas and are updated by different people over time.

The requirement was to design a much easier system to use that can contain all data from different areas of the organisation allowing the correct user to gain the right information reducing errors and saving time finding correct information.

My Involvement

I was resposible for the complete end to end UX from research to design and user testing working with real users internal and external and stakeholders at all levels.

Outcome

• Internal systems needed little training to learn.• User testing showed that the system was much

easier to use and reduced the time in finding specific information by up to 80%.

• Added functionality gave users the ability to perform tasks that were orriginally done on paper.

• External and internal profiles looked the same for more efficent customer support.

• Reduction in external calls coming into customer support centre by 86%.

To start with I ran workshops with real internal users from each part of the business to find out what they needed to do. Mapping their tasks in the order they needed to be done. I wanted to find out about each user and what tasks they performed and how they share information between different teams.

I also looked at where they have pain points within their current system and what would make their lives easier.

© 2018 Steve Zebrowski

With the information from the workshops I was able to create personas. This example is of an Assistant Intervention Officer.

Each workshop had at least two Intervention/Caseworkers, an Intervention/Casework team manager and a subject matter expert.

Once the tasks were analysed I’d put them into workflows for sign off.

This gave me an insight of the type of internal users and how they think, what tasks they do and how they interact with one another.

REDESIGN OF SOLICITORS REGULATION AUTHORITY SYSTEMS

This formed context for starting low fidelity wireframes using Axure. I would convert the findings from each workshop and relay the designs in the following workshop. This allowed the user to see how information could be structured and a basis for a design of a platform that all users could use from different parts of the business.

The users would give feedback on the design and I’d update the wireframes. Each time there were updates, I’d increase the fidelity. Once the design was relatively defined I’d add the companies branding based on their styleguide.


I then turned the wireframes into an interactive demo using Axure. This allowed me to test real scenarios with example content to see if we could break the design. At this point 95% of tasks were working. Where the design didn’t work I’d print out the screens and get users to write comments where they wanted changes. I’d make the changes to the demo and we would have another workshop to test the scenarios again. I wanted to get all the tasks to work ready for user testing with people who haven’t been involved with the design so far.

At this stage I was already planning how the user testing sessions would go. Booking users and creating a test protocol of tasks that were deemed most important.

Once the user testing is complete I’d produce a report that was shared to the stakeholders. The testing sessions were very successful as I wanted to make sure that by this stage the design was working. This saved a lot of time re-designing and re-testing which allowed us to give developers items to build sooner.

I also work the same way with external users where I could. The usability report shown is part of the external user testing for the web portal that links to the same data as the internal systems.

Any recommendations that came from user testing was implemented in the designs. Very little was needed to be changed. The biggest issue was a couple of naming conventions such as for communications/notifications. I asked users what name they’d preferred to call it and updated the design accordingly.

At this point the design was ready to go into full development. I gave the developers the demo complete with notes which was how the developers wanted the requirements given to them.


REDESIGN OF SOLICITORS REGULATION AUTHORITY SYSTEMS


TRAINING PROVIDERS PLATFORMBusiness CaseThere was a requirement to allow employers to let young workers sign up to apprenticeships more easily due to a new law coming out in 2017 in the UK. Also, there was a need for a training platform that allows different types of users such as apprentices, assessors, and administrators, different levels of access to training materials.

My InvolvementI needed to find out:

• Who the users are• What would be their motivation• What tasks would they need to perform• Where would they need to perform such tasks – would there be distractions/hindrances• Issues with current software• How can such a platform reduce errors and make tasks easier/quicker

Initially I had meetings/workshops with different people at a training provider to get the basic understanding of different users and what they currently do. I found that there can be more than one type of the same user. From this I set up interviews and contextual enquiries with different types of users to get a more detail understanding of the tasks they had to perform. Watching them in real life situations and asking questions along the way.

OutcomeThe whole project was segmented due to extreme time constrains. This meant that myself and another UX contractor would work on different sections at the same time. We would work together where there were similarities i.e. how controls would work, navigation, and how other functions would work.The final product went into build in January 2017 and was launched in April 2017.

www.bud.co.uk

When I started on this project the first things I wanted to find out was who would be the users and how would they interact with such a product. The way I went about it was to interview different users with a company that offered training courses to business for apprentices. I needed to find out what would make their lives easier if there was a better training platform. One example of user research was I interviewed two types of users at the same time. A learner and an assessor while they were working at a nursery. Left is part of a Contextual Inquiry for the assessor.

This formed the content for each persona and the first task analysis. The persona shown is for an Experienced Assessor.


TRAINING PROVIDERS PLATFORM


Once the personas had been created I started to analyse their tasks from the research. I would go through each user type and list their main tasks they need to carry out using post-its. I would do this in order of how the overall process would work from an employer wanting to put their apprentices onto a course through to the learner carrying out the course and the assessor grading the learner through to the training providers managers and directors seeing how successful the training platform is.

I would then put these tasks into high level workflows and add notes. Any questions I'd still have I'd add in a red box. I'll then send this to everyone in the project to get agreement, so the project can move to the next step.

Next, I'd start working up some low fidelity wireframes of each task and make them into a clickable demo in Axure. This helps Developers to see how a task requests specific data, so they can start working on the back-end design.

At this stage I will share the demo internally before I run it past users. I some case where there's time I would perform Guerrilla testing sessions. Most occasions in this project we had no time to do much testing, so I'd show the demo to users and get their feedback. I'll make any updates as needed.

When everyone is happy I'll pass the demo to the UI Designer and Developer. I think particular project they preferred I worked with then directly rather than write up documentation. However, I always like to right notes in the demo as I have found developers like this.

HOME ALARM – APP INSTEAD OF TEXT COMMUNICATIONBusiness Case

A design for a home alarm had been produced. There needs to be a way for a user to communicate with it when they are away from home. People within the project thought using text messaging was enough. I thought an app would be better.

My Involvement

I found out that using text messaging to communicate is a big security issue after speaking to a tech lead. He listed several main reasons why not to use text.

I decided to do some user testing to help validate if text communication would be difficult.

I set up a few user testing session using an equal number of two user types, Early Tech Adopters and Technophobes. I chose a set number of typical tasks a user would perform. I set up a demo to make it feel like they were texting the alarm system as there was no working prototype at this stage.

I collated the results into a spreadsheet and presented the results in PowerPoint. The results showed people didn’t like having to remember codes to text to the system. They also thought there would be security issues. This helped persuading people that an app makes sense.

Outcome

I changed the direction of the project using user research as evidence that an app would work better for the users than using text messaging both technically and by being more user friendly.

The Excel sheet shown shows results of the tasks of the user testing.

From the results I put all the main findings into a presentation and explained the findings to all the project stakeholders. I also showed that the main competitors all had apps. This influenced the project stakeholders into believing that having an app was a good idea.

So, I research the data requirements and looked as the tasks users would carry out and put together workflows using Visio.



From the workflows I could produce wireframes and a high-fidelity demo showing styles using Axure. Most of the styles already existed so to save time I used these with the demo. Where there were styles missing I either resourced a Visual Designer or I came up with the styles myself. I presented the demo back to the stakeholders for sign off ready for build.

HOME ALARM – APP INSTEAD OF TEXT COMMUNICATION

FUSION DESKTOP SOFTWAREBusiness Case

The current way of importing millions of objects into a database was slow and often buggy producing many different types of errors. There was no quick easy way to check or correct these errors so a faster better system was required.

My Involvement

I ran several different workshops with product owners and key users to find out what are their main pain points, who are the users and how they currently resolve errors. Some of the workshops and interviews were done via WebEx in cases where people were in different countries. These would be recorded for reference.

I led a team of UX and Visual Designers to come up with personas and a set of tasks each user type did. Then I managed the ideation phase with design and wireframe iterations and presented the designs to different teams that were involved and would be affected by the software. User tested was carried out and updates were made to each task and communicated to development teams around the world.

The whole project was working in an Agile environment with 4 week sprints.

Outcome

The product was launched in 2015 and within 3 months won best software design in the in the marine industry, allowing users to drastically save time and reduce errors.

http://hexagonppm.com/products/information-management-product-family/smartplant-fusion

I started of working with the product manager, a tech lead and another UX designers in a workshop to plan what was needed and to get a better understanding of the users and their tasks. Here are examples of some of the white boarding produced in these workshops.

The output of the workshops was knowing what types of users there were and what their task are.

Leading a small team of UX Designers we came up with some personas. The persona shown is for a Plant Engineer. I designed the persona template and shared it out to the other designers to keep all personas looking like a suite using the same style and showing details in the same way.

From the personas I worked on the high-level workflows for each of the type of users and split the individual tasks of each user to different UX designers to produce task workflows in detail. Shown is an example of one I produced in Visio.



Working from the signed off workflows each designer would work on a particular section/task to produce wireframes in Balsamiq. We would collaborate on a regular bases to make sure we were all being consistent with our patterns and how each task linked to one another. The wireframes would be updated after and change requests we made by key stakeholders and users. In some cases I would request user testing resource of certain tasks. I would work with the tester to produce a test plan and would be a viewer of the tests writing notes. Due to the fact that the tests were done in the US I would watch the tests via WebEx.

If there were any issues, these would be listed and addressed by the relevant UX Designer. We would all work together to sign off all designs and any patterns.

Where there are any new patterns designed these would have to be documented and a pattern document would have to be produced and signed off for the pattern to be produced and used by any development teams.

For this to happen one of the patterns I worked (shown) on was to produce way to navigate from the homepage to an individual task within a module/software.

The pattern guide would show:

• What problem the pattern solves• How to use the pattern• Why use the pattern• And examples

FUSION DESKTOP SOFTWARE

SPECP – USER ACCESS DESKTOP SOFTWARE Business Case

Nearly all the software produced by Intergraph isn’t compatible with Active Directory Groups. There needed to be a tool that allows all different software to share Active Directory permissions for different software and users and their roles. This is the first stage to get all software sharing similar permission functionality.

My Involvement

I interviewed product owners and UX designers who work on different software to find out what permissions are needed. I also carried out Contextual Enquiries of real users to find out how they get new user permissions and how they import this data into different software.

I then mapped out the different tasks users had to perform from the individual software to Active Directory Groups. This formed the basis of how this new piece of software works.

From this I produced wireframes and presented these back to the different software product owners and users to check the design would work. I’d make any iteration as needed.

Outcome

At the time I left, the project had not been launched as it was still in the design stage.

Shown are some of the whiteboards from some of the workshops I ran. We knew who the users were, so these workshops were for getting a really good understanding of how the different systems work and how they could somehow work together.

In this project there was only one type of user, a System Administrator. I had to find a way on how each software could work all in the same way. I decided to liaise with UX Designers and Product Owners of other software to find out how their software worked in relation to user access and permissions.

I drew up some workflows to show Developers and Product Owners how the new software could work for their software, making iterations as needed until sign off.



The next step was to design some wireframes for the part of the software where users get imported into the system and assigned to different projects and sites.

The top three wireframes are examples of the core control of importing users and user groups into the system.

Next, I worked with the UX Designers of each of the other products within Intergraph to come up with a universal UI. This was to align the software ready for future updates, so all Intergraph products would work in the same way.

I came up with some wireframes to show how the core information management software would work while the other UX Designers would do the same for their software. We would collaborate regularly to make sure we were coming up with something that can work across all Intergraph's software.

The bottom three example wireframes are the generic part of the system that allows all Intergraph software to edit user and user group permissions.

SPECP – USER ACCESS DESKTOP SOFTWARE

PETS AT HOME – RESPONSIVE VIP SIGN-UP AND SECTION Business Case

Update the VIP registration form and section and to make it responsive and more up to date and easier for the user.

My Involvement

I gathered requirements from Account Directors and simplified the workflow for registration. I sketched concepts showing the kind of UI elements I recommended to use that work on different mobile platforms and presented the ideas.

I produced the wireframes and made an interactive demo for Guerrilla testing with users.

For the user testing I produced a protocol to see how existing users and new users would find the proposed redesign of the registration form and the new VIP section.

The results were very positive with all task found to be very easy to perform. Each user was asked at the end of each session the 10 System Usability Score questions. The result was 93%.

This meant I could present back to the client how easy the new design was and explain how the users responded in the testing sessions.

Once the design was signed off I documented the wireframes for the Digital Designers and Developers to produce.

Outcome

The project was launched about 6 months after I left.

Shown are some of the sketches I produced. I worked on the mobile first. If you can get it to work on a mobile screen then you can get it to work on a larger screen. I wanted to make the entire UI touch friendly even for a PC screen using Bootstrap components. I also wanted to show what the user has selected to reduce cognitive load.



As the registration form was pretty straight forward the next step was to produce wireframes and work them up to an interactive demo in Axure ready for user testing. I wanted to do the user testing on a mobile phone to see how users can interact using touch. Using the mobile was more informative than using a laptop and based on user data more users applied using mobile devices. The Axure demo I produced was responsive so I could show to the client what the design could look like on different devices.

PETS AT HOME – RESPONSIVE VIP SIGN-UP AND SECTION


Once the demo was made and shown to all the internal stakeholders I ran some user testing. I picked three users that were familiar with Pets at Home and three that weren't. I wanted to see how they found the updated form.

Shown is part of the user testing protocol I designed for the user testing.

I wanted to show people in the project a score of the design to help them understand the value of UX Design and user testing. This project was done in a company where UX was new to them. So as part of the user testing I used System Usability Scale calculator to help.

PETS AT HOME – RESPONSIVE VIP SIGN-UP AND SECTION

ux portfolio - irp-cdn.multiscreensite.com · steve zebrowski +44(0)7725199277...

Documents