Time keeps on slipping into the future ...
back
Transcriber mobile app design by Robert Jarrell

Transcriber iOS App

Transcriptions Made Simple

Transcriber is an iOS mobile app that provides a simple way to record dictations and order transcriptions. The app was designed and built from scratch and my role on the project was design director and project manager. I collaborated with two UX designers to conduct research, design, prototyping and usability testing and also worked with a product owner and iOS developer on the client side.

The project goals consisted of the following:

  • Define scope and create an MVP
  • Use an agile process that allows the developer to provide feasibility feedback and begin work on foundational components
  • Use design thinking and agile methods to define the app features
  • Create a simple to use app that has differentiating features, but uses common patterns
  • Create a prototype to test features and usability with 5 target users so we can gather feedback and iterate on the design (if needed)

Photo of Grio Website Designs Mockups

Process

Agile & Design Thinking
  • Methods Used
  • Agile
  • Project Plan
  • Gantt Chart
  • User Stories & Scenarios
  • MVP Definition
  • Competitor Analysis
  • Strategy
  • Visual Design
  • Prototype
  • Concept & Usability Testing

The challenge at the outset was working with a product owner who was not very familiar with agile or design thinking. To help him gain empathy for the product’s end user I advised him to clarify the problems the app was trying to solve and define user roles, user stories, and scenarios. There wasn’t a budget to do user interviews and create personas so we had to base decisions on assumptions about the user’s needs, pain points, and goals. Since we would be testing a prototype we all felt that this was okay.

The value of defining user roles and stories is that it allows the product owner to gain empathy but also map them to different touch points and consider the user’s journey. In addition to the mobile app there was the marketing site, app download page, web app component, and email communications. By looking at the big picture the product owner could determine a holistic strategy and create a road map.

While the product owner was preparing this initial work I created a project plan that captured the phases of work, deliverables, and approximate timeline. Although this was not a complex project the plan helps everyone involved see the work that is to be done and their dependencies.

Project Plan

Project Plan

Product Scope

Once the product owner completed the stories he shared it with the team. It was clear that the amount of user stories and features were too big for the budget so we defined an MVP and created a backlog. We now had a good sense of scope and the tasks the users needed to perform to achieve their goals.

Research

Next the design team worked on the competitor analysis of the product’s mobile space. We analyzed three apps and focussed on the following criteria:

  • UI patterns
  • Terminology
  • User flows
  • Registration
  • Record screens
  • Differentiating features
  • Folder organization
  • Purchase transcription

We made video recordings of the app to capture first time experience and screenshots with written analysis that was shared with the team and could be referenced at any time during the project. We presented the analysis to the client and made the following recommendations:

  • Provide simple onboarding to communicate the app’s core features
  • Create a visual design that is flat and minimal (opposite the client’s existing schuemorphic apps)
  • Use a color palette that reflects the client’s brand, but is cleaner and stripped down so the app feels more like a utility, which it is
  • Allow the user to make a recording without creating an account — once they save a recording or purchase a transcription they can then create one

The other benefit of the competitor analysis was that it helped the designers gain domain expertise, form strategies, and make better decisions during the design phase. There were several occasions when questions of terminology and interaction patterns surfaced and we were able to refer to the analysis to make quick decisions. It didn’t necessarily mean that these decisions were correct, but it allowed us to move quickly and in any case we knew we were going to test the app and validate them.

Example Pages from Competitor Analysis

Example Pages from Competitor Analysis

Design & Prototypes

Next we designed the UI/UX experience by mapping the user stories and scenarios to the appropriate features we were designing and then created high-fidelity visual designs based on rough wireframes the client provided. The user stories, scenarios, and wireframes gave us a good foundation and context to work from. We used the wireframes to understand the client’s mental model, but we made several improvements and changes to flows, interactions, and information architecture. After a couple of rounds of design reviews and fine tuning we created prototypes, which we used for testing.

Concept & Usability Testing

We created a test plan, conducted concept and usability test, and provided an analysis of key takeaways and recommendations for the client to consider.

Testing proved successful in many ways — the app concept and usability was intact and test participants found it intuitive. We also discovered new insights about user needs and goals that would impact new features and product strategy. Only a few minor revisions were made to the app and assets were delivered using Zeplin. The developer could also reference the click-through prototype.

Result

A Practical MVP Ready for Market

The app proved to be easy-to-use and provided a friendly user experience. I was able to collaborate with the product owner to create user stories and define an MVP. I directed the creative team during research and testing phases while I was hands-on with prototyping and visual design. The agile process allowed the developer to begin work earlier in the project and weigh in on feasibility. The differentiating features of the app consisted of a robust folder system to organize recordings and add annotations to photos that could be transcribed. On the services side the app delivered fast transcription turn around times and competitive price points. Overall, the project was a success and delivered on time and on budget.

Transcriber iOS App Final Designs
Transcriber iOS App Final Designs