Microclimate is an application for the writing and deploying of microservices. Our primary user persona, Jane, is an application developer tasked with updating existing, outdated monolithic applications with applications based on a more modern microservices-based architecture. She can use Microclimate to easily write projects in Java, Swift, Node, Python, and Go and deploy them to a kubernetes environment when she's done.
My role in this project was that of a UX Designer. I was responsible for all aspects of a user-centered design process, from initial interviews and contextual inquiries, to writing user stories and user task flows, and then translating these understandings into sketches and wire-frames. I worked very closely with my development colleagues, often validating design ideas with them. Finally, our team had a dedicated user researcher who ran user validation sessions on our prototypes.
The first thing we did was to unpack the problem space in a design thinking workshop as a team. We went through the process of creating a number of design thinking artifacts including stakeholder maps and empathy maps in order to better understand our target users. Once we understood who our users were, we were able to move on to creating needs statements which we eventually turned into hills for the product.
From the insights gained in the workshop we moved on to creating some user personas to help guide our design effort. Jane, our primary persona is based on the user interviews and contextual inquiries we conducted.
Then we worked on writing user stories and populating our Github repository. From our backlog of user stories, we started to get work assigned and could start ideating.
The next step was to create as-is and to-be user scenarios and task flows so as to clearly map out user needs and goals.
This is a simple user flow for a scenario. In this case, it's the process of adding a new programming language to the application.
This is simply another method of documenting a user flow but in this case it's done using simple language. What the user sees is captured above the line and what the user does is presented below the line.
Once we had a clear understanding of our user's needs and goals, we could begin exploring page layout. Because my design colleague and I were not co-located, we spent many hours working via video calls using our trusty ziggy cameras. These sketches are simply a representation of my ability to wield a sharpie and paper to create and communicate design ideas.
My sketches would then be shared with my development colleagues to ensure that I was on the right track. Multiple interations of sketches would generally occur.
My sketches would then be shared with my development colleagues to ensure that I was on the right track. Multiple interations of sketches would generally occur.
The next step in the process was to start turning the sketches into wire-frames in Sketch. Below are some annotated, mid-fidelity wire frames. As a final step in the ideation process we use Invision to create simple, clickable prototypes for sharing designs with our development colleagues and for user validation sessions.
And finally we see some screens from the finished product.