A piece on collaboration between UXUI + Web Dev cohorts, and how we worked our way slowly to a proven model. Here at Wyncode Academy we practice what we preach. As the Head Instructor for the UXUI Immersive Program I am constantly reminding students to iterate on their designs with solid user feedback and data.

uxui demo.gif

As I sit here and write this blog the Academy is a buzz with discussions, collaborations, and eagerness to work together from designers and developers alike.

“Working with developers has been an extremely valuable experience” - said UXUI student - Meade McCoy UX Researcher

“Getting all the assets was very helpful, any time I have a question they respond with a solution” - said a Full Stack student - Syed Rahman Developer

We are now 7 cohorts in with our UXUI programs and 33 in with Full stack web development. From the initiation of the UXUI program our goal was to have both cohorts merge at some point to be a collaboration on a digital product with both.

So how did we get here, to this collaboration euphoria among unlikely disciplines?

First it is worth noting that each cohort works on a final group project at the end, for UXUI it is their third project of the cohort and for Full Stack it is their second. Students come up with their own project ideas for the final in both UXUI and Full Stack. The projects last about 3 weeks, these are the projects that allow them to demonstrate and show off what they’ve learned in the ten weeks.

01 Iteration // Team bonding & socializing

The very first thing we did in the UXUI Cohort 1 was get our designers and developers together in a social settings, team bonding events, and open working space side by side. This allowed them to understand what each other was going through, how much work they both had and the challenges and empathy for each other and their disciplines. This was our approach with cohorts 1 & 2, as our main goal was to ensure the content and lecture material was solid for the UXUI cohort.

Results

Appreciation for each other, feeling a sense of “we’re in this together”. The disciplines got along really well, there was a lot of empathy and understanding. Both cohorts had a lot of work to do and the team bonding events allowed them to make friends, compare notes and kick back a bit and ask some high-level questions “are you sleeping at all?” or “homework is painful”. A first start to any good relationship is a basic getting to know each other phase, but still a big gap and lack of understanding of how the two roles work together in the real world.

“It is a completely different spectrum of the work, it is complementary, clashing from time to time, because of varying ideas, but definitely valuable, that is a fact” - said a Full Stack student - Raphaël Burkhardt Developer

02 Iteration // Winner, winner, chicken dinner

Cohorts 2, 3 & 4 UX project winners had the opportunity to present their projects to the following Full Stack Web Development class as a final project option. The hand off was rather simple, mainly a presentation. This was a great first pass at Full Stack Web Development creating something that UXUI designed using a product design process. However, since it was a prior class that was no longer in session it made it challenging to ask questions and general communication was limited.

uxuidesigner.png

Pitch Night Winners UXUI C3 & Web Dev (Mike Meade, Clara Kohn, Lily Malykhina WebDev: Ricardo Aviles, Eduard Fernandez, Haseeb Rehman) - courtesy of Band Together - creator Clara Kohn.

Results

The idea and designs were well received by the developers mostly because the design, layout and user flows were thoroughly thought through and backed by best practices and solid design decisions. So this sounds like a no brainer for a Full Stack Web Development team to select a UXUI project, this wasn’t always the case. Our belief is that at this point they still didn’t quite understand the value of picking an already designed project. In addition, the UXUI students were graduated and gone by the time the developers started to work on it. For the very first time a UXUI project that won also resulted in a win for Full Stack Web Development on Pitch Night. Awesome!

portfolio uxui .gif

Guardian Project Portfolio/Project (UXUI: Lauren Winston and Tatyana Plakso WebDev: Alicia Piedra, Maurice Vigueras, Isabel Virgille) creators - mockups Tatyana, prototype Lauren Winston.

03 Iteration // Stagger cohorts & present ideas

Cohorts 5 & 6 were staggered to start final projects 2 weeks ahead of Full Stack Web Development so that UXUI could present their final project read out or presentations as project ideas for Full Stack Web Development. This meant that the Dev team had the option to select an already designed project and work with the UXUI cohort until they finished (about 2 weeks prior to Full Stack Web Development finishing), again not ideal, but as an iteration it felt like a slow progression to a more collaboration without jeopardizing lecture/content material in each cohort.

We also created a combined lecture for both cohorts presented by the two Head Instructors for Full Stack Web Development, and UXUI Immersive to explain the two different disciplines and in an effort to appreciate each other, how our brains work and most importantly the value of planning out the “thing” you are going to build. My favorite exaggerated analogy is imagine you want to build a 2 story building, you wouldn’t buy the land and have your construction crew show up without a blueprint. The blueprint is our designs and the building is our digital product.

Results

The combined lecture finally created some understanding and a clear value for what each discipline has to achieve and what they care about, this lecture was very well received. It was at this point that it started to feel like a more blended approach. With that said, the ideas were UXUI project ideas, implemented the way UXUI wanted them to be, without much input or collaboration with the developers. So upon seeing the presentations, they also did not always feel the idea was 1. Good and 2. Easy to implement, and 3. Had a stake in it. At times the projects even felt too ambitious from UXUI as this was a designer flexing their designer muscles, but from Full Stack Web Development it may not have flexed their muscles enough or would simply not be feasible in the time frame (we all know how that is).

ux designer .png

Team EPS (Enhanced Publication System for the AirForce) was created by (UXUI: Alex Brierton and Nishita Aswani WebDev: Daniel Brierton, Simon Choren, Azmat Aziz).

“This is more real world, you know how they think and what they need and are looking for” said UXUI student - Valerie Rieger UXUI Designer

“What I find tremendously important about UXUI is that it gives an overview of functionality, how everything behaving and working” said Full Stack student - Raphaël Burkhardt Developer

04 Iteration // Aligned and Combined

Cohort 7 is the model that we really love at this point. We decided to encourage both classes to collaborate on final project ideas. This cohort presented and voted on project ideas together before any design was even started. Our first ever truly combined Wyntank (collection of ideas) between UXUI and Full Stack Web Development. This allowed for more alignment, a feeling of team decision verses picking something already finished. It also allowed us to collaborate together with critical moments in the process, such as collaboration in the User Journey, Feature Ideation session, and the MVP definition. Additionally, the teams (UXUI+Dev) joined daily standups, and reviews at every step or phase. The final hand off provided to development created a simulated experience for developers receiving design files and for designers to understand what developers need and what types of questions have, and also what they would be willing to do (e.g. export images from a Sketch file) and knowing they don’t typically have Sketch installed or have a PC. All very good experiences, preparing them for a real world company, team, and project. We absolutely love this model and feel that with our slow and steady iteration approach we can now apply this to all cohorts for 2020!

Results

This has been by far our best collaboration, although it requires us to get through all the class content and lectures while parallel pathing through the projects, it does require a bit more time commitment in terms of collaboration. More time spent with each other, but that ultimately resulted in more vested interest from both sides, a pure excitement as progress is revealed. Every person on the team was able to contribute and provide ideas, vote on features, understand each others process and needs.

Final takeaways

The Full Stack Web Development projects have never looked so good, our files and hand off from designers, I barely see in a professional setting, and the real world experience for both is invaluable. How to navigate a Sketch file, or which API should we use are all key on the job experiences that most do not receive in a ten week bootcamp.

“Makes me grateful to have a frame to be working in, don’t have to look for font size or eye it, don’t lose time” said a Full Stack student - Raphaël Burkhardt Developer

UXatwyncode.png

Read Me file for hand off from created by (UXUI: Carolina Munoz & Rebekah Leiva WebDev: Raphaël Burkhardt, Timothy Martinez, Matthew Palmer)

readmefiles.png

Critical for hand off:

  1. Sitemap

  2. Wireframes (Sketch files)

  3. User Flows & annotations

  4. Design System (using Invision DSM)

  5. Mockups (Sketch files)

  6. Prototypes (using Adobe XD, Invision)

  7. Interaction Design examples

  8. Assets (any iconography, photography UI elements)

  9. And finally the Read Me file that houses all updated links and is considered the one source of truth

  10. Constant communication and conversations

uxbootcmap.gif

Interaction model for how to animation - creator Rebekah Leiva - Creating gifs and purposeful animations and use of UI elements that support the user (aka Plant lovers) journey.

(UXUI: Carolina Munoz & Rebekah Leiva WebDev: Raphaël Burkhardt, Timothy Martinez, Matthew Palmer)

sitemapwyncode.png

Files for hand off from UXUI Designer to Developers - creators Carolina Munoz & Rebekah Leiva

Come check us out at Wyncode in Wynwood Miami, FL for one of our many events, pitch nights, or portfolio nights.

Proclaimed & written by Gessica Tortolano, Head Instructor UXUI Immersive at Wyncode Academy