News & Thoughts

The latest from Studio Simpatico

About Our Craft Blog /

Some tidbits from a junior designer

  These last seven months have been a whirlwind of learning more about myself and the working world. Just add a dash of or two of sugar, spice, and everything nice and that sums up my pretty sweet experience as a junior designer at Studio Simpatico. Thought I would share a couple tidbits for others either entering or currently in a similar role.

How Studio Simpatico uses retrospectives to iterate on process

  When we started Simpatico around this time last year, we went through the traditional branding exercise of authoring company values. Reflecting on past work environments and experiences, we identified what was important to us, and distilled these preferences into six core studio values (found on our About page). The third is Constructs:
We are diligent about deadlines and always aim for transparency and clarity of expectations. But--if processes aren’t working, we analyze, iterate, and make them better.
However, unless there’s a plan for follow-through, we realize that articulating aspirational values is an empty exercise. This begs the question: How do we make sure that we are analyzing our processes on a regular basis? As we enter our sophomore year in 2018, how do we ensure the studio is not just "talking the talk," but also "walking the walk"? Today, we’re excited to share how we use “retrospectives” to stay true to our Constructs value, and how we use them  to reflect and iterate on our project management styles, studio practices, team dynamic, and overall approach.

What is a Retrospective?

You may have encountered them as “post-mortems.” Simpatico has opted for the less grim-sounding name “retrospective,” but they’re essentially the same thing: team-oriented activities designed to reflect on past projects, processes and performance. They frame conversation around questions like ‘What went well?’ ‘What needs improvement?’ ‘What actions can we take to improve those things?’, ‘What do we long for going forward?’. These questions help to build bridges between past and future projects, helping any team determine what they should do more of, do away with or change. Lucky for all, these activities aren’t limited by a company’s size. There's no shortage of fun activities when it comes to retrospectives. Whatever your concern or focus, there’s an activity for you and your team. Here are some of our favorites:

Framework 1 (for Projects): VANILLA

Though many may have drab associations with the word 'vanilla,' this activity and the results it produces are far from bland. MATERIALS NEEDED:
  • Whiteboard
  • Markers
  • Sticky notes (3 colors)
  • Timer
Step 1: What went well? (10 min) Have each team member use green sticky notes to write down what they feel went well (one idea per sticky). As people post their stickies on the whiteboard, the facilitator should group similar or duplicate ideas together. Discuss your ideas briefly as a team. Step 2: What needs improvement? (10 min) Same structure as above, but using pink or red stickies. Remind your team that this is about actions and outcomes – not about specific people. Step 3: NEXT STEPS - What concrete actions can the team take to improve those things? Have your team use blue sticky notes to place ideas on the board. Group them and then discuss as a team, agree to which actions you will take, assign owners and a due date to get them DONE.

Framework 2 (for Team Health): THREE LITTLE PIGS

Being a small team has its perks: More opportunities for close collaboration, ample flexibility in process, and a lower chance of your lunch mysteriously disappearing (leave the Ross impressions for more corporate environments, please). Even on a small team, however, maintaining team health does require TLC and follow-up -- that’s where retrospective exercises come in! This second activity uses the well known childhood story “The Three Little Pigs” to foster conversation about ways to improve on team patterns. MATERIALS NEEDED:
  • Whiteboard
  • Markers
  • Sticky notes (3 colors)
Step 1: Draw and explain the participants the 3 columns: House of straw – what do we do that just about hangs together, but could topple over at any minute? (e.g. “our deployment script is very manual, and prone to error – we could break production very easily”) House of sticks – what do we do that is pretty solid, but could be improved? (e.g. “our automated tests are pretty good, but sometime they fail for no reason, and we have to run them, which is a pain”) House of bricks – what do we do that is rock solid? (e.g. “our automated deployment and cutover has never failed. It rocks”) Step 2: Ask the participants to share their notes on post-it and place on one of the three columns Step 3: Filtering and group conversation about action items. Last but not least…

Framework 3 (for Team Health): HOT AIR BALLOON

This simple activity is designed to help your team identify things that make them move faster, and the things that slow them down. MATERIALS NEEDED:
  • Whiteboard
  • Markers
  • Sticky notes
Running the activity Step 1: Ask the participants to write notes and place them on the following two areas: Fire and hot air, and Forces pulling down. – Fire and hot air: What helps us go higher? What are the things that push us forward? – Forces pulling down: Which are the forces pulling us down? Step 2: Group the notes and discuss. See example here: Hot Air Balloon

In closing ...

As we enter 2018 with nervous excitement, we’re looking forward to continuing to learn, evolve, and grow our studio processes, design approaches, and project management principles. If you’re looking to do the same, discover more activities on Fun Retrospectives. Happy new year, everyone!

How Studio Simpatico approaches product design

In Art class, my Kindergarten teacher Mrs. Cooperson had us follow a simple and methodical approach to creating drawings:
  1. Lock down an idea.
  2. Create a pencil sketch.
  3. Draw over it in pen.
  4. Choose some crayons.
  5. Color.
  6. Voila! Ready for fridge prime time.
By requiring teacher sign-off before allowing us to proceed to the next step, Mrs. Cooperson saved our class a lot of time and paper. Three decades later, Studio Simpatico's process for creating digital products mirrors what I learned from Mrs. Cooperson. Below, learn more about the steps we take when tackling UX and product design challenges.

Step One: The PRD (lock down the idea)

In Kindergarten, my goal was to draw something that would make Mom so delighted that my drawing would end up on the fridge. That was my business requirement. To fulfill my business requirements, I might decide to draw a beach (because Mom loves the ocean). These days, we call the plan of what to build the PRD (Product Requirements Document). The PRD bridges business requirements and design: it articulates exactly what will be built and why, and brings the team together with a shared vision of the product, general functionality, all its features, and high level user flows. A PRD may also indicated what is MVP (minimum viable product -- a/k/a which features need to be in the first release of the product), vs. which can be postponed for later. Some clients come to us with fully baked PRDs. Others hire us to help them write it. Either way, we love using Google Docs so we can work collaboratively through the requirements. For great details about writing a PRD, we'd encourage you to check out Martin Cagan's How to Write a Good PRD.

Step Two: Site Map (the pencil sketch)

Once we received approval on our plans, Mrs. Cooperson cleared us to grab pencils to begin our masterpieces. The pencil's eraser ensured that our inevitable mistakes could be rectified with minimal effort. The site map is a rough, highly zoomed out deliverable that we begin once the client signs off on the PRD. A site map shows the overall flow and makeup of a website or application. Check out an example site map/user flow for a mobile app we designed, Versed. During this phase, we love thinking in broad strokes and working collaboratively and creatively with our clients. This usually involves 2-3 rounds of revisions based on feedback and collaborating with key stakeholders until we arrive at a site map that we feel accurately captures the correct user flows and business requirements.

Step Three: Wireframes (the pen drawing)

Generally speaking, our UX process is about starting with the lowest level of fidelity, locking in decisions, and then zooming in to flesh out the nitty-gritty details. Once we know the overall flow of the interface and how all the screens fit together, we zoom in to create more detailed, annotated wireframes outlining the information hierarchy, functionality, and directional guidance for each screen. See how the site map evolved into wireframes for Versed. Again, this phase typically involves a few collaborative sessions and rounds of feedback with the client.

Step Four: The Visual Framework (choosing the crayons)

Mrs. Cooperson’s verbal approval of my pen drawing meant it was time to sprint to the front of the class to pick out some crayons. For Simpatico, when the wireframes are finalized, that means it’s time to start thinking about the visuals: typography, sizing, colors, and all the other components that make up visual design. We typically mock up two to three critical screens and work with the client over multiple iterations to develop a style that feels in keeping with the brand’s personality and visual identity. When the visual language has started to take shape, we typically codify elements and decisions in the form of a visual style guide.

Step Five: Visual Design (coloring)

The final step? Applying the visual language from step 4 to all the screens, details, and microinteractions outlined in the wireframes. Note that we prefer to use Sketch for product design, which allows us to effortlessly create robust documentation for developers along with prototypes to illustrate any animation, interactivity, or microinteractions. (If you’re interested in learning more about why we prefer Sketch, check out our blog post here.) See the final designs for Versed to better understand what happens when a style guide is applied to wireframes

The Simpatico Design Process: Understand, Imagine, Make

At Simpatico, we design for a variety of verticals, media, and projects—from real estate developer websites to non-profit organization logos to fin tech product/UI design. As a small shop, we're committed to being flexible about deviating from our typical process when we think it will produce better results for our clients. That said, our approach almost always follows the same overall three-step structure.