<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=443149619225659&ev=PageView&noscript=1"> CapSure: The Evolution of an App

We would like to email you valuable insights on software development and DevOps! (We promise not to stalk you or share your info)


CapSure: The Evolution of an App

CapSure: The Evolution of an App

Originally posted on Medium.

Professional development and ongoing training are essential in the tech world. It was with that in mind that I registered almost 18 months ago for the Interaction Design specialization course at UCSD online (https://www.coursera.org/specializations/interaction-design).  I will save my reflections on the course for another post, but I thought you might enjoy a little summary of the capstone project which was the final 10 week class within the 8-course specialization. Our assignment was to conceptualize, design, test, and market a mobile app.

You’re the project manager responsible for a client team and an internal team of designers and developers. In this role, you are constantly receiving feedback from internal devs and QAs, from client product owners, and from test users. Much of this feedback needs to be converted into requirements and actionable tasks for one or more members of your team. This documentation process consumes many hours per week and requires a high level of attention to detail in order to communicate feedback clearly and correctly. Online product demos represent a great opportunity to collect quality feedback from multiple users in a short period of time and it was during such an online demo that an idea was born.

Capsure Logo.png

CapSure is designed as a plug-in for the Zoom online meeting app. While users view and interact with content in the Zoom meeting (such as a software demo), capSure adds the ability for observers to take a screenshot and then add comments within a few clicks either while the meeting is happening or immediately after the meeting. These feedback items are added to a dashboard that is accessible to the project manager who can review entries one at a time, adding comments if needed, and then publishing the screen capture with any comments to the manager’s project management software (JIRA or similar) as a task to be addressed by the design and development teams.

Medium Image 1.jpeg

Storyboards allowed us to share our idea before investing too much time. Now only if I could draw people...

We observed project managers and UX architects in their work settings to identify their current habits and methods for capturing user feedback during software demos and for publishing useful feedback to their project management systems. These observations and interviews revealed a variety of methods, but all had one thing in common — multiple steps along with 10–15 minutes spent capturing and annotating sample images to describe changes needed to the software shown in the demo. Observations showed that end users — the client-side viewers of the software demos — simply texted or verbalized their feedback rather than producing it in a reusable digital format. This put the burden of the digital conversion on the project manager or UX architect. There had to be a better way.

Medium Image 2-3.jpeg

Liz (left, project manager) and TJ (UX Specialist) during a live demo of a software product in development.

We began to ideate an application that could integrate with Zoom for image capture, creating paper prototypes to gather initial feedback for the concept. User comments were positive and our test group was excited about an application that could capture and publish data in real time, combining several steps in the collection to publication flow.

Medium Image 4.jpeg

Paper prototypes made it easy to simulate and adjust the flow of the app.

After a few tweaks to the paper model, we decided to focus exclusively on the more difficult project manager role (review, commenting, and publication to JIRA, etc.) since the observer role was more easily addressed and because we had direct access to managers and UX staff. While the original product idea was conceived as a desktop application (lots of screen real estate) wireframes for the manager flow were created in Balsamiq and then imported to inVision to make it easy to share and test on the more challenging mobile device — an iPhone in this case. We then went to work with our test user group which consisted of “real live” project managers and UX staff and a new friend (Alex) who is taking the same Coursera class as me.

Again, feedback was generally positive with a short learning curve for the application. Tests did identify minor problems with list screens (we need dates and times for each entry) and the detail screen shown above and below (Why are there 2 comment buttons? How do the marks on the screenshot relate to the actual comments?)

Medium Image 5.jpeg

Balsamiq was great for low fidelity wireframing, but we needed inVision to share effectively on a real phone,

Experimental-Driven Design
After two rounds of adjustments to our wireframes, we uncovered an opportunity to refine a key area of the application. The item detail screen (shown above) needed to be intuitive and efficient and our original design was not quite “there.” So we gathered tester comments and ideas in order to create an alternative design for this important screen and ran an A/B test through UserTesting.com.

Medium Image 6.jpeg

Feedback was generally positive for both designs, but layout B received slightly more favorable ratings for ease of use. One A group test subject actually suggested removing the magnifying glass icon from the design, making room for the thumbnail to be moved to the left, suggestions that were already incorporated into the B version (yes, we are psychic).

With our UX research behind us, we then applied the skin to our skeleton. One tester noted that our “design” as shown in the wireframes was a “bit out of date,” so we attempted to apply a flat, more modern design in this last stage. Icons were simplified and shades of “capSure green” were used to create sections within busy screens.

View the promo video here: https://youtu.be/00_eVFKJ-ao

Medium Image 7.jpegFinal designs for the capSure MVP

 Capsure Logo.png

Real Feedback. Real Fast. 


Recent posts

The Latest in .Net Core
7 Tech Trends for 2019 Part 2
7 Tech Trends for 2019 Part 1
New Opportunity…or New Nightmare? A Developer’s Guide to Switching Technologies
Do You Really Need a Mobile App?


Share this article


About the author

Steve Vest, User Experience Architect, Small Footprint. After 17 years and several roles within the website and application business, Steve claims to know a thing or two about UI design, UX and working with clients and dev teams to build and evolve quality interactive products. He is passionate about the art and science of making end users feel satisfied and competent while creating experiences that evoke the “I really like how this thing works” rating.
New Call-to-action
Ready to partner with an expert in custom software development? Learn about our fast, cost-effective approach to creating world-class software solutions.
301 N Main St, Winston Tower, Suite 2206
Republicii 24
400015 Cluj

The Small Footprint Blog

Keeping up with the latest in custom software development? Visit Small Footprint's blog for expertise, insights and innovative software strategies.