How we use Merlin, Affinity Designer, After Effects, InVision and Atlassian
I recently read this article by Lewis Ngugi, an exceptional UX consultant in Kenya. It is about his process and while commenting on it, I thought it would be a good idea to document the process I used in my last 2 projects.
Client Centred Work
Many articles have emphasised that the best case scenario is when a client is involved in a project, every step of the way. My addition to the emphasis is that the work I do for a client is more of a relationship than a task. This creates empathy on the developer side in understanding the client’s pain points. Over time I have found that it is very important to explain the place of the web site or platform from the client’s business process point-of-view.
HipChat and Confluence — Client Centred Work
We use Atlassian products to the hilt. We have been using HipChat for communicating within the team and occasionally with clients. My clients, however have preferred an end-of-week email to give a status report which we also post on the project Confluence space for the dev team. One thing I learnt from Lewis is to be making a weekly plan and posting it. This will definitely help us to focus.
Merlin — Project Planning
At the very beginning when asked for a proposal, we use Merlin for project planning. That way, our projects have no guesswork to what is required in terms of time or team resources. I normally output the project schedule as a Gantt Chart and as a CalDav file for use in any Calendar software. I then produce the budget as a PDF for the client. The project manager on the client’s team can import the CalDav into the Google calendar or whatever they use at the company and track the project milestones.
Merlin also exports a CSV file that we import into Jira. In future we should use Portfolio for Jira. This will keep our Gantt chart alive and in one place. I normally update my Merlin file so that I can track resource use and generate scheduled reports for the stakeholders. But once my eye is off it, this may fall through the cracks.
InVision — UI Prototype
I wanted to upgrade my Web design pipeline. I used UXPin during the trial period on a client project. The client’s team had a dev who was willing to look at the actual design process and UXPin worked well that way, I found UXPin works for a dev who wants to code the frontend live on the Cloud. But I don’t know a Web dev who doesn’t massage the code offline.
<RANT>
Having used Illustrator since version 5 on Mac OS 7.6, Adobe have made a decision that we in Kenya cannot purchase their products and yet we buy from everyone else, online. Affinity Designer and Affinity Photo replaced Adobe Illustrator and Photoshop quickly. The only apps I have to get through a reseller is After Effects and InDesign. Once Serif.com produce Affinity Publisher, I can live with the hoops to get After Effects.
</RANT>
InVision has a more “traditional” process in that it only takes flattened images. I have not tried Craft, the Sketch and Photoshop plugins which allow you to upload “hot” files.
I found when I wear the design hat and work on UI and UX completely, it saves me code time later. It also easier to hand over to a frontend developer if necessary. This is the ideal and it only happens properly on personal projects. InVision also wants users to go “design online” with InVision Studio. I will try it out once its available, just to satisfy my curiosity.
Small Business
For a company with a small team, normally up to 10 members, I jump the Wireframe part of the UX design. I move straight from information architecture to high resolution prototype designs.
Once I finish my UI designs, I go to InVision, create a project and put together a prototype. InVision allows client reviews, an activity monitor for the team lead and the client to oversee what is being done and basic click-through UX on the prototype that one can download and run on the local host. Mostly it is enough.
After Effects
For comprehensive UX work, I could use Adobe After Effects (AE) and hope to get the Bodymovin plugin. This would allow me to export directly from AE to HTML5 and JavaScript, thus the animation done in After Effects to be exported as code. I can’t wait to get my hands on it.
While Principle, a macOS app, is very good for the UX designer, the fact that I have many years of AE under my belt and the possibility of exporting to code and that AE is cross-platform means AE wins.
The Signoff
Once the client is happy with the UI and then looks at the UX interactively, through video playback or after user testing, things almost always change. InVision has a workflow where the UI can be signed off as it gets done. That is a good thing.
Development — Jira, Confluence, HipChat, SourceTree and BitBucket
At Atlassian, the project administrator creates a Company profile and adds the project members. A team member’s Atlassian “home” is where all the activity taking place across all the Jira projects and Confluence spaces is congregated. Jira is where the project sits and Confluence is where all the project information goes. That way, there is only one source of truth for the entire project.
I use the 2 processes for software development. There is the traditional “waterfall” development process for the initial phase of most projects. I use the imported CSV schedule that are turned into issues in Jira. The issues are then assigned to team members and each member has a Kanban board that appears in the profile. Tasks can be managed visually by clicking on any “card” and attaching files, adding subtasks and linking to another Jira issue.
This works with the “Agile” development as well which my second process. Recently, in one project, the open source technology used changed after it became part of the Web standards. This is definitely a “Scrum” candidate. And now that Atlassian bought Trello, I have not even had time to look at what that looks like.
Together with Jira and Confluence, we have also integrated Bitbucket and HipChat. HipChat receives all the communication coming from any of these platforms. SourceTree is a desktop app that gives me a visual representation of the Bitbucket repo.
Atlassian is sooo deep that every time I discover something, it’s magical. I am yet to fully utilise Bitbucket with Pipelines fully for CI/CD. But that is a whole new article on my DevOps process.
If you have any questions on my process or have some awesome ideas on what I can do, don’t be shy. 😝
Check out our site afroshok.com for more tales on what I do.
