Roles and Duration

The conceptual project was a 2 day design sprint and my role was UX designer. This was a collaborative effort with:

• 3 UX Designers

  Paige Baxter, Alessandra Zarate-Sanderlin, Katelyn Johnson

• 3 Front End Developers

  Matt Miner, Freshta Bashari, Lucky Ly

Methods

Design studio

Concept sketching

Wireframing

Prototyping

HTML5 Coding

CSS Coding

JS Coding

Tools

Pen

Paper

Figma

Codepen.io

Bootstrap

Express js

Are you experienced?

UX designers new to the UX job market do not have experience working with developers. Without this experience, UX Designers will have a challenging time finding work.

A mixing of two worlds

To answer that question. The instructional team at General Assembly designed a project to give UX designers exposure to collaborate with developers. The only caveat is we have 2 days to create a finished project.

Where do to begin?

The process started with a project plan, we needed to get an understanding of what tools they use and how compatible our tools our to theirs. After a brief discussion, we all settled on how to hand off work to our developer friends. We also aligned our expectations on communications and timeline so that there would be no miscommunications. Next we reviewed the project brief to get an understanding of the scope of work.

Ready, set, draw!

Our objective was to design a landing page and dashboard page that can viewed on a desktop and mobile device. The landing page was to entice birdwatchers of all ages to sign up and be part of the birdwatchers group. The dashboard is to allow the client to monitor members signed up for the group activity.

First activity as a group is to generate some quick concepts with design studio. We involved developers in this activity to make sure they have input for features we want to incorporate into the landing page and dashboard.

Divide and conquer

Once we made our design decisions collectively, we divided our task and began to build our site. The UX design group start work on the low fidelity wireframes for the landing page and dashboard while our develop counter part sets up the framework for a desktop page and also a mobile version.

Align any misalignments

At the end of day 1, we met together as a team to go over the progress of our work. We shared our low fidelity wireframes to discuss features that we can execute with the time constraint we are faced with. We ended the meeting with our understanding of deliverables for a project handoff to the developers. We worked through the night to put together a mid fidelity wireframe along with annotations and redlines to inform the developers of our design intent.

“Best experience working with the UX team”

We worked up to the last minute before our presentation to the class. Our team performed very well as a single unit. There were of course bumps along with the way, with how each developer interprets the handoff files. One developer really appreciated our accurate details of pixel information while another developer was coding by ‘eyeballing’ everything. Overall, we were able to successfully release a desktop site and a mobile version for our presentation.

A merge for the better

The developers came through with the designs that we implemented in just 24 hours. The features that we discussed early in the meetings and also during our check in meetings were implemented on our prototype. It was very inspiring to witness the process first hand.

What next?

• We would continue work with the developers to implement features that we did not have time for on this sprint.

• Implement filtering and sorting feature for the dashboard.

• Continue development of the rest of the landing page to make all links functional

Takeaways from all this

Overall I learned what it is like to work with developers. Some takeaways I got from this great experience:

• Understand developer’s work flow early- this will help with how designs will work with the coding portion of the work

• Agree on deliverables - this will help with amount of annotations and redlines needed for handoff file to developers

• Determine how UX softwares are compatible with Developer softwares - In my case we had to turn over all files as pdfs.

If I had to do this all over again, I would approach the project with taking less time to understand what we can and can’t do. Much of the discussion would get sidetracked and end up taking more time than necessary to answer a question. But overall, I really enjoyed the experience and it allowed me to grow as designer to understand how to work with developers.