There are so many things we love about being a small studio, and one of them is how direct and transparent we can be with our clients.

  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.

  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!

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

As a design studio, we’re frequently asked if we “design logos.” While the answer is technically yes, we like to think of it a little differently. To Simpatico, a logo is one piece of a larger mosaic, comprised of many elements that make up your visual identity.

We get a lot of questions about the software and tools we use to build our projects. When it comes to web and app design, Sketch is the one we can’t do without.

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.

We build and maintain sites for our clients using WordPress, and specialize in building custom themes. We use our rich background in user experience to ensure that the WordPress back-end (where you login to update your content) is as user-friendly as the front-end (what your users see).

When we're asked to submit website proposals, one of the first things we try to suss out is what's best for the client: suggesting that we build a custom WordPress theme, or recommending they use an existing theme. This often prompts an understandable question: What's the difference?

This week, we are pleased to feature a guest blog post from Josh Vickery, VP of Engineering for SquareFoot. We recently completed a WordPress build for SquareFoot. Josh was able to create a workaround allowing us to install their blog inside their root directory, squarefoot.com - and was kind enough to share with us the details!

Once your shiny website is ready to go, it's important to make sure the world sees it and it plays a critical part in your overall business goals.

When you build websites for a living, being asked about hosting providers comes with the territory. How should I select hosting? Do you have any recommendations? Why on earth would I pay more when I can get hosting for $3 a month?

I’ve always been jealous of teachers, lawyers, and doctors. They go to a bar, a party, or even home for the holidays, mention what they do, and everyone nods, understands, and moves along. This isn’t the case for UX design … “Wait, a what?”

For all small business WordPress sites that we create, we install and use the Yoast SEO plugin, which is (at the time of this article's writing) the industry leader. SEO, or search engine optimization, is an important tool to help you drive traffic from search results on search engines like Google, Yahoo, and Bing to your website.