Carbon Technologies logo
Image on the Carbon Provisioning App on a laptop screens.
Understanding

The Objective:

My initial takeaways.

CarbonProvision allows a company’s IT team to seamlessly add custom apps into the Apple's Setup Assistant process. This remote app also allows IT to not have to be present when a new computer is being set up by the end user.

Project Guidelines

1. The tool should walk the user through provisioning their system without  IT help.

2. The interface should be instantly familiar to the user.

3. It must handle passing the secure token from the GUI created User account to the programmatically created Admin account without burdening the user with the process.

My Responsibilities

Design Roles:

What I did.

• Project Lead - Individual Project
• Product Research
• UX/UI & Visual Design

Deliverables:

How I did it.

User Surveys, Personas, Competitive Analysis, User Stories & Flows, Prototypes, Wireframes, User Testing, & Visual Design.

Tools & Duration

Tools Used.

Adobe XD, Adobe Photoshop, & Adobe Illustrator

Duration.

Approximately 3 weeks

Project Objective

The Challenge

Was to:

The app needed to be a seamless, transitioning from Apple's Setup Assistant into the app. The major focus was to keep a similar interface as the Setup Assistant, so the user felt that this was a continuation of what they just finished. On top of that, there was a need to communicate that this is customer specific configuration. Since the app was running in Kiosk mode, we had to make do with very limited components of the OS UI. Finally, after the app ran, it still had tasks to complete (i.e. FileVault encryption and end-user notification of failures and tech support options). Some of these tasks were out of our control (i.e. FileVault encryption), but needed to occur before we could perform our last tasks (i.e. end-user notification of failures and tech support options)

The Solution

Was the:

CarbonProvision is a Mac OS X application written in a combination of languages (Swift, LiveCode, Bash and Python). The user and competitive research showed a strong desire to stay with the look-and-feel of Apple's SetupAssistant and to keep the process simple, because this would be the first time the user is touching their new system. CarbonProvision benefited by clear definition of the expected user communities (Admin and End-user). By focusing on these, we could make sure that IT's requirements were met and then verify and modify the workflow to meet the needs of the end-users. While it took additional Usability Testing rounds, the information gathered from the two different groups was very different. While Admin testing largely showed strength and deficiencies in the UX, most End-user testing seemed to focus on UI.

User Research

Competitive Analysis

Understanding the competition.

A SWOT Analysis was performed primarily to determine the strengths of each competitive product. CarbonProvision is not a competitor, but instead an in-house product to create a best-of-breed provisioning process for the Mac community. We looked at DEPNotify, Mac@IBM and SplashBuddy as the three most popular products. This was determined by internet searches and the question being asked at a meeting in NYC of Mac Admins. This analysis provided great insight and also helped focus the product on mimicking Apple's Setup Assistant to maintain continuity. Another gem from the NYC Mac Admins meeting was that they were asked about the other poorly received products in this space that broke the paradigm of the Setup Assistant UI. Those products were lambasted by these admins, especially when asked if those products generated more help desk tickets, to which the answer "Yes" was unanimous.

Image of DEPNotift logo
DEPNotify
Image of Mac@IBM logo
Mac@IBM
Image of SplashBuddy logo
SplashBuddy

User Surveys

Why assume when you can just ask.

I performed a User Survey with 15 respondents that were experienced Mac Admins or Mac Users. The input from these users directed every feature and behavior of the workflow minus one, which was overridden by a HIPPA requirement. Based upon how well the product was received by the general community and the specific areas of praise, it is clear that the information gathered from the User Survey is directly attributable to the success of the product. The final product was so well received in this community that a project to replicate this on the Windows platform was immediately launched.

Pie chart #1

The Apple Setup Assistant performs a power check before allowing the user to start the process. Should we implement a similar power check before allowing an end-user to go through provisioning?

Bullet point
Yes - 66.77%
Bullet point
No - 33.3%
Pie chart #2

Are you an IT Admin or are you an End-User?

Bullet point
Both - 93.3%
Bullet point
End-User - 3.35%
Bullet point
IT Admin - 3.35%
Pie chart #3

7. Based upon question 6, Do you think the extra development to add this functionality would be worth adding to this project?

Bullet point
Yes - 86.7%
Bullet point
No - 13.3%
Pie chart #4

We have demonstrated DEPNotify, SplashBuddy and Mac@IBM installation processes. Each of those have very different methods of communicating the installation process. Which process do you prefer?

Bullet point
SplashBuddy - 60%
Bullet point
Mac@IBM - 20%
Bullet point
DEPNotify - 20%

User Personas

Empathizing & understanding the end user.

I created User Personas of two individuals that represented two different user communities.

Admins:

This group represents the part of the community focused on why this product is being created in the first place. While IT configuration and desk-side delivery were the current method, the customer wanted to empower the user to perform this task themselves. IT wanted to make sure that all of their requirements were met. If they couldn't be met, then the efficiency of End-user provisioning would be greatly diminished.

End-user:

This group represents the mass user base of the product. These End-users will generally only interact with the tool whenever they receive a new Mac (at hire time and approximately every three years for a refresh) but will be directly responsible to perform the configuration. If the app did not allow an End-user to use it without external instruction, then the efficiency of End-user provisioning would be worthless.

Information Architecture

User Stories

Prioritizing features & expectations.

Based off the User Survey and more in-depth User Personas, I created User Stories to determine the types of tasks to include in the product. Using percentages and statistics from user research, as well as specific comments made by potential users, I compiled lists for new and returning users comprised of 15 tasks.

LOW PRIORITY TASKS
As a user, I want to…

• Be able to learn what about the company’s services before I speak to a representative.

• Be able to get a quote or request info for my project with ease.

• To be able to see the work they have printed previously.

HIGH PRIORITY TASKS
As a user, I want to…

• Be able to see testimonials of previous clients.

• I want to work with an environmentally friendly company.

• I want to be able to see their site from my mobile phone.

User Flows

Understanding the jury first.

Focusing the User Flows based upon the two User Personas was beneficial to ensure that the primary needs of both user communities were being served. In the case of IT, the impact of not performing all of their tasks would be that the process would have less value. In the End-user case, if a large number of End-users were unable to go through the process them selves without external help, then the entire project would be cancelled as the product would be worthless.

Image of the Onboarding flow

Initial Sketches

To know smart design, you do not need all of the polish.  

First, I designed Wireframes with pen and paper. This would create quick options for the apps logical, visual consistency and navigation to ensure the app stays simple and clear for the end user without taking all the time on the computer.

Image of initial sketches and the initial wireframe of the same state

Initial Wireframes

Piecing it all together.

Then I create the Wireframes in a digital form using Adobe XD. For inspiration I referenced competitive provisioning products DEPNotify, Mac@IBM and SplashBuddy as the three most popular products.

Image of two of the initial wireframes

Usability Testing

Understanding not assuming what works.

I used Adobe XD to create this prototype using the digital wireframes created previously. The Adobe XD Prototype was used to perform the Usability Test with three different users. The users were given three tasks in which they provided invaluable feedback for how to improve clarity and user-friendliness for the product. All three of the respondents had no real issues as I ran the User Testing process. I believe this is due to the applications simple and user friendliness, unlike the competitors we were using for reference, as well as all the feedback gathered through the research process.

Visual Design

Branding

Creating the brand's personality.

I was attempting to capture a high-quality looking logo that has a modern yet confident look and feel. I also wanted to make sure I was creating a logo with personality all of its own, not “generic” looking like the direct competitor’s logos “DEPNotify, Mac@IBM and SplashBuddy”.

Image of 1st logo option
Image of 2nd logo option
Image of 3rd logo option
Image of 4th logo option
Image of 5th logo option
Image of 6th logo option

Style Guide

Logo usages & restrictions.

The style guide was created with the intent of showing how the logo and its variations are allowed to be presented. This is usually due to presentation restraints such as background, print process, colors limitations.

Image of Style Guide

Design System

Ensuring consistency & reusability.

The UI Kit was created to have elements and requirements to hand off to the developer. Hopefully this information will inform the developer of any specifications or restraints that are intended to follow from the design process and/or the clients approval. This can also result in a considerable amount of time saved for the developer due to less questions and rework.

Image of UI Kit

Mockups

Initial test drive.

At this stage by using Adobe XD I am finally able to see how all the pieces come together. I started by applying style guide requirements and at the same time looking at each page as a whole. High quality images were found and other resources that the style guide did not provide helped create the best user interface and experience.

Image of the desktop and mobile app

Hi-Fi Prototype & Preference Testing

Bringing the design to life.

This was the fun step. Creating the final look of the mobile and desktop designs were meticulous work, but finally validating my hypotheses about the visual design choices with actual users was even harder. Not only didI have to study how users used the app, but I had to defend some of my design choices because at times they were questioned and challenged in preference and usability tests. However, each revision I created helped to arrive at better iterations that struck closer to the mark of what Boomerang needed to become and the testers helped target weak spots in the design and usability.

Conclusion

Learning & Takeaways

Understanding the journey & experiences:

When creating this app, I was committed to utilizing the UX processes. Admittedly there were times when I felt that this process was taking me down the wrong path and taking longer than expected. Ultimately after analyzing all the data collected, the modifications as well as discussions with respondents and the developer, I was surprised to see how well the design and its workflow had resonated with anyone that tried the app. Some steps were difficult to execute, and I needed assistance with developing some questions (especially for the Admin Group) due to not knowing the technical terminology needed to communicate. The entire working group was very pleased with the push towards a data driven design. I feel more confident in both the process and my abilities thanks to doing this project.

Image of a Laptop iMac and a cell phone with the Boomerangs app on the Sign In page.
Interested In More?
If you are interested in more information, I’d love to hear from you!
GET IN TOUCH