Experience Audit: Sketch

This exercise is to challenge and thoughtfully analyze the experience of using a digital product or service. In this assignment, I will be the user - where I will thoroughly document absolutely everything that is relevant to experience of using Sketch for the first time.

Part 1: Expectations + Goals

Why am I choosing Sketch as my product for this experience audit? Well this past week I was hired to create the front-end design for a cryptocurrency site. Usually I create all my mockups in photoshop but I decided that learning a new technology could be incredibly useful for my future career in design. 

So when a friend raved and honestly, hyped up Sketch - I thought, why not? 

The digit prototyping software is useful in which it helps a designer, developer and other involved in the project view it through cloud sharing. Sketch also always you to create a digital prototype that will look fairly similar to the site a team is creating. 

My goals for this experience is outlined below: 

• Create same quality of visuals that I would in Adobe Illustrator or Photoshop
• An easier and more efficient way to design a digital prototype
• To be able to share the experience with the two other developers on the team simply 
• Understand a software better for design standards in the industry

Truthfully, I feel as if I picked a digital technology that will need commitment in order to learn. This experience will take hours, days possibly and most definitely practice to really understand and utilize all the capabilities of the program.

I am incredibly excited to start this journey in possibly finding a new tool to assist in efficient prototyping to convey a message to employers, clients, and colleagues. My will be doing the experience completely alone in order to truly understand the software on my own - if I were to have help from another individual I know my experience would be different and I may not learn as much as I would on learning by doing on my own. 

Part 2: The Experience

My experience will start with downloading the product. I started by going to the Sketch website to find, conveniently, there is a  free 30-day trial. I clicked the start download button and was pleased to find that I did not have to enter an email and it took under two minutes to download the complete files. 

After downloading, I was ready to jump in. Right away, I was prompted to an on-boarding similar to that of Adobe Products which felt similar and comfortable to navigate. However, I was confused by the type of document to choose from. 

This is the interface for the start page of Sketch. It gives you a new document and recent documents page as you can see as well as a templates page that will come up shortly in the experience 

Slightly confused, I decided to go with a blank new document. However, I quickly found that the new document page was very confusing. So I decided to close out of the application and relaunched. When the application opened, the same welcome page popped up. I decided to see what templates were all about. Below, you can see the template tab interface.  

There are more options and possible instructions that could come after clicking one of the template options. 

Immediately, this felt more approachable. I decided to click on web design since my project will be designed for the web. Choosing the web design option made the process of getting start much simpler. When the template opened, there was a welcome page with brief instructions on how to use the given artboards, symbols, and elements. Within the developer/design interface there was also a section that gave multiples pages, most likely for a larger project that required several iterations and multiple web pages.  

Opens to the Sketch Wireframing Kit and instructions.

Desktop sized artboard where I started designing the desktop wireframes.

From previous knowledge, I knew that it a user was able to import vector objects from illustrator into sketch for more complex shapes. However, in my instance I already created a couple of the interfaces on Illustrator so I wanted to import those elements into sketch to save myself some time. However, I did not know how to do that so I googled: "import illustrator file to sketch". I found my answer very quickly. On a forum, some responded to a similar question where it said that you can copy and paste from illustrator to sketch but could not import files. So thinking I had everything figured out I just started copy and pasting what I thought would make the process more simple. To my dismay, when copying and pasting the interface see to get converter improperly at points.

My illustrator mockups that would be soon put into sketch. 

Unfortunately, I had to do a lot of fine tweaking to the elements I was copying and pasting into the program. For example, I had to regroup every element into appropriate folders. 

Demonstration of the navigation and the kind of elements that are in it. 

From the picture on the right, there is a title, currency options, exchange button, and a hamburger menu that is all represented on the left picture in the group element navigation that is apart of the sketch interface. This is similar to that of photoshop's layers which made it easy to navigate how to put elements in and out of groups. Groups make it easier to move similar elements together - for example, you would use a group for a button that needs to stay together when moved. After learning and understanding how to copy and paste correctly between illustrator and sketch, I found that I was creating buttons wrong and that just creating a mock up would not allow functionality - or so I thought. 

So I decided to start playing around with the symbols page to understand it better. On the symbols page, there were preset buttons that were not styled. However, I quickly found that the button was just placed on top of a small artboard that just styled with rectangles and text. So I decided to use the preset artboard and style the button the way I wanted it. I repeated by duplicating the button through the left side navigation where the groups once were displayed for the other page. After playing around with the tools that are given on the right side of the interface, I finally found the right way to create a button on my own. 

Check out the video below to see how to make buttons in sketch: 

After finally creating buttons the correct way, I was on my way to finishing the home page of the website. My goal was accomplished, I was able to create the exact visuals that I did in illustrator. 

Home Page for the website with functional buttons. 

After creating the home page - which took about 3 hours to complete, I was pretty exhausted and decided the last thing that I would try to figure out is how to export specific elements to the CSS and SVG code export capabilities that sketch is also known for. This is a great tool in theory, however, could be modified so more complex elements could be converted to code. Through learning about how to export code, I found that Sketch has great documentation of the app that I wish I found much earlier in the experience.   

Documentation on their website is easy to navigate with useful videos tutorials and simple explanations that increase productivity when first learning the software.  

After reading the instructions for the CSS/SVG code export, I was able to successfully get the code on my first try. Below you can see that I decided to export the whole navigation bar and it did export the basic essentials to start creating it on a webpage. 

Unfortunately, except for exporting rudimentary elements the CSS exporter does not do well with more complex elements like a button. For example, it cannot identify the padding on a button, the color, fill, stoke, or text that it contains - below you can see that it only exports the name of the grouped elements. 

Other than the hyped about code exporting capabilities, I was fairly satisfied with my Sketch experience. I was able to accomplish all four goals in some aspect during the process. 

• Create same quality of visuals that I would in Adobe Illustrator or Photoshop
• An easier and more efficient way to design a digital prototype
• To be able to share the experience with the two other developers on the team simply 
• Understand a software better for design standards in the industry

I will definitely be using Sketch in the future and feel comfortable if I had to create a prototype on through the application. 

Part 3: Reflection and analysis

Starting on sticky notes, I created a diagram of the events that I endured during the process in chronological order to help with answer this question: How did you feel throughout the experience?

The yellow green sticky notes outlines the chain of events that I went through for the process:

To further understand my experience, the blue sticky notes are outlining my emotions that go specifically with an action that I did during my audit. 

Many of my emotions and behaviors were connected to being confused and wanting to figure out the solution which helped in furthering my knowledge of Sketch. Personally, if a user that was not familiar with the Adobe Creative Suite or other creative softwares they would most likely be lost. With my knowledge of the product and other prototyping softwares, I can say that I was pretty happy with the experience and that I could probably learn its full capabilities fairly quick.

After completely understanding my emotions, below is a visual representation of my behavior, emotions, attitude towards the experience I had with Sketch. My experience can be compared to that of navigating a new city before the age of smart phones.