As a software developer, with a love and passion for working with front end, I embarked on a journey of deepening my knowledge of product design with a goal to enhance my engineering skills and workflow.

The goal of “Updog” case study was to see how I can supplement my software engineering skills with a better understanding of product design principles and workflow.

The result of the course is a small app built using ReactJS and TypeScript.

Defining the problem

Goal: Establishing a platform connecting dog owners with reliable and skilled dog sitters for their pets.

Problem & pain points: Dog owners don’t feel safe when handing over their dogs to someone outside of friends and family circle to take care of them.

Users: Dog owners, dog walkers

User flow

Considering that most users drop out of the new app if they are met with a login page first, I decided to make a flow that allows user to freely explore some features before being prompted to log in.

Wireframes, sketches, moodboards

Design and implementation

After ideating with sketches and low fidelity wireframes, it was time to implement high fidelity designs. However, during the process, I couldn’t stop but question why do the double work?

What if the high fidelity design was done in code directly? Otherwise, the design work would have to be hand over to the dev team, adding extra time to the development. I wanted to see if there is a benefit in jumping straight to code to both design and develop the product.

So many questions, and so I decided to explore just that.

I discovered a benefit of further developing the ‘design eye’ as a software engineer.

Why?

• Enables design iteration directly in code - after which the implementation is done and different versions can be used in, for example, A/B tests.

• Faster and real time implementation of the design feedback - during mentoring sessions I found it rather simple to iterate on the code and implement the design feedback directly, leaving me with very minimal work after the meeting which allowed me to use the available time to continue working on new features.

More broadly speaking I noticed increase in velocity of development and design.

What next?

The great thing about already having the front end of the app developed is that, in theory, after the backend is created, this is a product ready for market. After which we can extract data on how users use the app better and with actual users. We can gather information that will inform our next steps - either doubling down on some of the features or doing a full pivot.

Tools used

Final thoughts

• I really enjoyed diving into the creative process of product design, leaving me wanting to develop the design eye further

• There does seem to be a benefit of developing design sense as a developers. Not only could it speed up the process of product development, but it would also increase the team velocity. I can see how bringing this mix of skills can help any team and project in the future, especially startups.

App's code on GitHub: Updog Repository

Bonus content

I used some of my photographies of my dogs in different icons. Here they are in their full glory.