https://www.mattlassiter.com/work daily 1.0 2019-03-12 https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53552cf4e1fc96ef27452c/1548965184022/IMG_20180920_145254357.jpg Work - It’s our community! One of the first priorities was we wanted to build a community or a family. They don’t have to be customers, though awesome if they want to be, but they are people who root for you. To be a company people root for makes every day easier. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c535d760d9297c047ef9900/1548967793181/appInventory.gif Work - Working on an App for the next level! While still in development, we will have an iOS app for phones and iPad. The iPhone app will handle inventory management for store employees, and the iPad app we will have on display within the store to take the place of physical catalogs. Here you can scroll through and see all items, not just displayed items, their pricing, sizing and if they are in stock. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5358d80d9297c047ef205b/1548966119391/IMG_20180921_095818.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53596e4192022feb76692a/1548971775662/IMG_20180923_115711.jpg Work - Catalog of All Items Space within our store can be limited, as such not every item we have is on display. To solve that we create catalogs of our items that we put out for people to flip through, see what else is available and then we can pull it from the back no problem. Additionally, we let people know they can model for us, and how to be involved. Again, we are pushing that building of a community. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5357114785d3587676ba1f/1548965668216/50DNGAWA2018-2.jpg Work - Fans of us. Fans of them. Our community believes in us and we believe in them. When looking for store help, we look to our community. When shooting a product catalog we use our community as models. When we do a runway show we look to our community first to put them forward. We are huge fans of each of them. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53665bb208fc36112b6de2/1548969653287/ Work - With a 10x10 space you have to consider achieving peak efficiency. Much like a website or an app, real estate is a premium. You have limited space, and you need to provide above and beyond expectation. In our space we were able to: - Provide catalog locations to view all items - Eliminate checkout stations by providing payment processing devices to assistants for their phones. - a 2x4 changing room, full branded and hand made with PVC pipe that just looks like a box advertisement. - 3 fully dressed mannequins, 2 clothing racks, and an accessories station - A video area that shows fashion shows, plays music and highlights items. All while maintaining a walkable area that doesn’t get too cramped or feel claustrophobic. We spent about 3 months before building out this store in our own home to both work out transportation logistics and set walkable space. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53663a24a694ffada8298b/1548969545761/IMG_20180923_115740.jpg Work - Free items, complimentary for many different people. Every customer could receive badges or stickers with their purchases. But even visitors who came to talk and browse and be engaged had the opportunity to walk away with something as well, on the house. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c534d661905f4c6356aa40f/1548963203242/50DNG_Website_Promo.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53565be2c483fe6c696a60/1548965528431/BeautyPlus_20180925161137325_save.jpg Work - UX is the only way to create a community You have to provide a reason for a community to exist. That is going to be based on who you are, how you interact, how you present - what you offer and how accessible it is to others. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c84b2b9fa0d603600a8dfc6/5c84b2b99140b78afbdab871/1552200380165/garuda_watch_month.png Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c84b2b9fa0d603600a8dfc6/5c84b2b9e4966b5f3f3dab86/1552200379521/garuda_watch_week.png Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c84b2b9fa0d603600a8dfc6/5c84b2b94e17b679456df63e/1552200379229/garuda_watch_today.png Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c84b47ce5e5f02ba2ec6896/1552200939816/perspective_gif.gif Work - GARUDA Small business sales that update on your wrist. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c84b19deef1a1afdbc58c0c/1552200115563/Garuda_Splash_Watch.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c8578e824a694a6a02fdc5d/5c8578f2ec212de6593b9586/1552251166393/sasuno_visit.gif Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c8578e824a694a6a02fdc5d/5c8578e8eef1a1afdbcb832c/1552251128743/Visit+Spots.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c8578e824a694a6a02fdc5d/5c8578e8f4e1fc79d4fc2510/1552251132044/Home+View.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c8575e88165f5cb5fb8a3ed/1552250385856/susano_overview_animation.gif Work - SASUNO Enter a new region to be given instant travel information. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c6887107817f7d0df4a344c/1550354200695/lo-fi.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c6887ec8165f5f2b28418b7/1550354423140/Screen+Shot+2019-02-16+at+5.00.00+PM.png Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c51fbe842bfc14fd100cc1e/1548876831596/image1-2.jpeg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c687d64e2c48352e123e9cd/1550351780498/wireframe.jpg Work This was our original wireframe to guide development. We knew we wanted a repeatable pattern across different dashboard types. We also knew we wanted each block to be a full implementation of its designated task. For example, if one block displayed how many tokens you own, all of the actions to buy more tokens would take place within that same container. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c6882dcf9619a97a6c80640/1550353122165/Untitled_Artwork.jpg Work We actually did some usability tests on a paper prototype and from that we committed to a few changes. First, we moved the persons name to the left. This was because we needed to make room for a status bar that users had requested on the right. The status bar keeps track of how many reviews you have had, how many songs you have uploaded and how many badges have been awarded to you by reviewers. All of which you can take in at a glance. This request was not particularly complex so we prioritized to have it within this iteration of development. While the status bar didn’t reveal itself to be helpful in the moment of user testing, the follow up interviews post-test lead us to recognize that our users wanted quick information about their platform use without combing through their playlist, review backlog or account status to find that information. We also introduced the idea of a review and what that initially may look like in their “review station”. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c521d1c032be4976656413a/1548885337419/Ovechr+Demo.gif Work - Here is a little demo. This is a small demo of a couple of functions users can take advantage of. This demo shows buying tokens, requesting a review, and canceling a review request. Everything visible in this demo was implemented by me, and it was so much fun. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5219ed88251b50ff933a62/1548884467943/ Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c51fcf9562fa7d24bb1c178/1548877094518/citysplatter.png Work - Visual Community One thing that was apparent in our user interview was that a service built around feedback and constructive criticism, while awesome, is also intimidating. As such we wanted to have a visual language that feels “warm”, “inviting” and “playful”. These were words that initiated positive responses in regard to adaptation. While many things will go into creating a positive community, visual language can assist on the outset.This reveled to us as a product of a small series of focus groups. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c51e84788251b9403eb8616/1548871798280/UserPersonas.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c521a0d1ae6cf877ab416cb/1548884502463/Screen+Shot+2019-01-30+at+4.19.34+PM.png Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5086284fa51afe64bbf0fb/1548781922410/musicCloud.png Work - OVECHR ”Through the bond of music, we spark the flame of collaboration between musicians, who’s goals lie ahead of them, and the mentors that can help them reach new heights.” This is a music platform that connects artists to mentors with the primary method of engagement being an in depth review purchased by a token system. Skills Leveraged: - User Personas - Art Direction - UI Design - Front End Engineering https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c687f0e8165f5f2b283bdc3/1550352159307/Wireframes.jpg Work For the token purchase, we knew we needed a zero state, quantity selection, purchase view and tokens owned view. The user would be able to step through and complete each of these sections without ever reloading the page. This was important to both promote a swift interaction and also cut down on complex routing logic for the backend developer. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c51fa6f0ebbe83c29163a84/1548876416319/IconSets.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c51f0a80e2e72a4895f51ce/1548873912146/giphy.gif Work While your goal is to deliver a great experience, a lot of misguided ideas can come from too many assumptions. It’s an inexpensive task to work alongside your target audience. I like to interview people I think may be relevant to the cause. The last thing we want to do is to go through dev only to end up with a product that leaves….a bad taste in the user's mouth! So we interview, we collect info, we get into the heads of our users and I craft up some user personas. These personas represent a generalized group of users we think may be represented in significant numbers. By developing the personas we are able to build better products for specific groups with higher accuracy thanks to the cooperative nature of it. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c52190b2b6a2887d1720773/1548884243997/giphy-2.gif Work - Testing and Time Limits. We needed to move fast, our dev window is limited. We will have two developers on this project, of which I am one. We want to hammer this app out in about 2 months. The scope of the project is reasonable for this iteration but it’s still a small window. Luckily for us remote user testing is a thing, and we could use high-fidelity mockups to accommodate that. We were/are not terribly concerned about being particularly secretive. So the idea of using remote testing didn’t bother us. We were also able to collect 12 tests within a couple of days which included screen, video and audio recordings. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5215bd758d46e7a7f292c2/1548883423040/Screen+Shot+2019-01-30+at+4.11.21+PM.png Work - Vue and VueX From the start we had decided to use Vue and the Vuex state store for our front end. We have some fancy business going on in the backend that we do keep to ourselves for now. That said, serving as the front end engineer, the combination of Vue and Vuex was fun for me. In the same way that I enjoy component based design systems, I quickly appreciated component based engineering systems. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c87261d24a694d822b49442/1552361004368/momodi_mock.gif Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c87264f7817f76990e62ea5/5c8726537817f76990e62edb/1552361047333/momodi_mbp.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c87264f7817f76990e62ea5/5c87264fe5e5f09d2cc8a065/1552361046873/momodi_mbp2.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c87264f7817f76990e62ea5/5c87264f104c7bffb1e9048b/1552361045329/momodi_mbp3.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c87267a53450a6e2f704e74/1552361085056/ Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c4f6f1e2b6a28cc38daad54/1548709895423/Selection.jpg Work - User Interaction Narrowed to Key Actions For this MVP phase, the goal was to not only give the user the ability to purchase their tickets, but also resell them in our own secondary ticket market. If they wanted to, they could also transfer their tickets to friends, if the event organizer allowed it. This was a demonstrable use case for smart contracts. The actual ticket itself could be used by activating it, which would supply a QR code for consumption at the event door. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c4f63d521c67cd91a863d9d/1548706962526/PhoneLogin.jpg Work - True Tickets: Blockchain Event Ticketing. An event ecosystem to manage, and fulfill event tickets on a blockchain for producers and managers, as well as an app for attendees to buy, sell and transfer tickets. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c7424734e17b6166838b233/1551115433997/TT_Demo.gif Work - The future of the app intends to target concerts and sporting events. The next phase is a ways off, but the groundwork is here and the intent is understood. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53df744e17b66b26e9cd34/1549000968928/Screen+Shot+2019-02-01+at+12.55.40+AM.png Work - MVP or not, there was plenty to design and develop. This is a small overview of some of the views designed and developed. It represented the baseline needs for what they wanted to prove out to their investors. We had 2.5 months to build it all and demo that it works as expected. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c4f771d352f53657750b73d/1548711723542/transfer.jpg Work - Clarity for Each Action The last thing we wanted for this was users to take action without knowing the full consequence. Early on in user testing, we identified that it could be easy to mistakenly send incorrect selections, this being particularly true across certain age gaps. While this wasn’t meant to be a full implementation, we still knew by adding just a bit of extra information we could solve those cases. While this was an MVP, it was used in the field for live testing for private events, concerts and even a music festival to great success! Today True Tickets maintains the app but is currently focused on building a platform for a different subset of users. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c4f6bfc7924e83934430d8f/1548709907394/TTSearch.jpg Work - Easy Event Search and Selection At the minimum viable product(MVP) phase we needed to focus on proving the backend systems could actually work! We had a two and a half month period to have an MVP ready to demo at IBM Think. We needed to prove blockchain could work in the sphere of day to day use. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53c575e5e5f0059e52ebc5/1548994042947/IMG_0045.jpg Work - I was flown out to partake in user testing at IBM Think This was on the spot user testing! We got good feedback, we gathered real data - it was great! We had to do some early questioning to weed out people who are too tech savvy, or are usability experts. In doing so we ended up testing mostly venture capitalist reps, and other assistants. To be sure, this wasn’t our only testing trial, future tests had specific participants across multiple audience criteria, but this was too good an opportunity to pass up watching people interact with the app in the moment. We had a few success criteria to look for. 1. The user could search for the “IBM Think” mock event and purchase 2 tickets. 2. The user knew which event was the correct IBM event by reading the labels. (We had several IBM events, but only one IBM Think event). 3. The user could successfully activate their ticket for the event without assistance. It was presented however as simply: “Please use the application to purchase 2 tickets to the ‘IBM Think’ event” and then “Please activate your newly purchased tickets”. We gained valuable insight as a result. The post-task survey SEQ scores: Criteria 1: 5.8/7 ( 112 trials ) Criteria 3: 4.9/7 ( 94 trials ) - It turned out “activating” was ambiguous in of itself! Criteria 2 was observational, no SEQ requested. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53c59ee4966bf470de419c/1548993988513/tempImg.JPG Work - Testing Area We setup testing areas with multiple kiosks within the booth, and even ran a few contests as an incentive to borrow some peoples time. While the convention hall itself may not have been the usual quiet location that avoids distraction, in a way that helps a lot too. This app will see widespread use at events in loud areas with limitless distraction. This seemed relevant and worth not running away from. Plus we still did isolated trials at a later date regardless. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53e77b24a6946784bea421/1549002662268/EventSelectDemo.gif Work - True Tickets looks forward to the next phase of their app. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c53dd1c419202f09d52806d/1548999968995/ Work - Administrative App In addition to the mobile app, I assisted in the development of the initial administration web app. This was the interface between the mobile app and the blockchain. While the initial iteration which we are depicting here was a significant first leap into the sophistication of the app. This functionality has extended significantly. The main idea here was an interface for event managers to generate the tickets for their event. Beyond that, there isn’t much for more for me to say, but it was a solid beginning to what has evolved and scaled well as needed. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c4f90c34d7a9c3614d4f1c9/1548718328244/mockIX.jpg Work - Interaction Flow Diagram Wireframes started immediately, along with any testing I could put together. Remote testing was not an option at this stage given the secrecy of the project itself. While doing low-fidelity wireframes, I along with a team of other UX designers scoped out what actions we knew would have to occur. This gave up a map of features we had to have no matter what. Which lead to a key development deliverable, an interaction flow. This document served the role of clearing any ambiguity for developers and the initial wireframe phase. This allowed us to spec out each view, all possible actions (that we know of) and the resulting behaviors or required rules. I picked up this trick from another great UX designer, Havana Nguyen, and consider it an awesome tool to help bridge the gap between UX and dev. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c524700c74c50734e5bdf82/1548896014502/ovechrcity.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5347066e9a7f6e72e991c2/1548961566293/50DNG_Website_Promo.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5c70cb9140b749eb7fcbf0/1549562066211/TTPort.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c84bcebeb393173c6e1d231/1552202992161/garuda_front_animation.gif Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c856f667817f7cf02c51901/1552248679693/Sasuno+Splash.jpg Work https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c8726b80d92971c1d00843c/1552361153104/momodi_mock.gif Work https://www.mattlassiter.com/past-clients daily 0.75 2019-02-13 https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c646232ee6eb0317a597103/1550081159178/ Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf953450a312b76fd2f/1550081159178/AIA.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c6457038165f547d43db880/1550079754642/Screen+Shot+2019-02-13+at+12.40.53+PM.png Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf96e9a7f50565a39ef/1550082596177/Accuserv.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf9f4e1fc3db2de17a8/1550081199797/Hunter+Mueseum.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf9e79c70b79c57dc07/1550081357058/TechTown.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c646043e4966b7f86e636c4/1550082490557/SupplyHog.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c6460434e17b623de566e46/1550082467704/Highpoint.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf97817f73285282e93/1550081236716/Royal+Highnies.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c646151fa0d607da6b580fe/1550082433004/LWFF.jpg Past Clients https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/5c64563315fcc0666eb8abd8/5c645bf9f9619aec6fc9ab73/1550081331941/Cogent+Studios.jpg Past Clients https://www.mattlassiter.com/new-page daily 0.75 2019-01-31 https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c533ba69140b7e2a177bb6b/1548958665185/logo.png New Page - UX is About People Skills Leveraged: - Community Engagement - Traveling Booth Experience - In Person/Web Payment Processing - Model and Employee Experience https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c534597f9619a5fb23970f0/1548961258431/websitemac.png New Page - On our Website… The website itself is a Wordpress theme I set up that lets you build sections visually. It was important to have a CMS that could be used by not just me, but any employee who may need to make changes to inventory or product images. Instead of building from scratch, I chose to leverage a theme that, with some alterations, let us move quickly and lower the learning curb - a decision I am glad we made. https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5331eae4966bb0a427a7d9/1548956170246/50DNG_Website_Promo.jpg New Page https://www.mattlassiter.com/about daily 0.75 2019-02-13 https://static1.squarespace.com/static/5c4f4bbae749403c6f80279b/t/5c5388b39140b7274669cfca/1548978397781/49783400_10214329266974549_8537696176089071616_n.jpg About