Project – Mobile App and Service

 
 

IxD
UI text

MVP scope
Prototyping

Visual design
Task analysis
User research

Process design
Product strategy
Competitor analysis
Wireframes and specs
Information architecture

The Need

A startup wanted to turn its vision for a consumer mobile app and service into a buildable solution.

The founder had lots of ideas about what the product could do, directions it could go, and different kinds of users it could serve. Restrictions included a limited budget for development and post-launch operations.


Product Design Collaboration

I met with the founder for a multi-day discovery session. We captured and refined the product vision and principles, business requirements, and project constraints.

We collaborated on an array of potential user personas, and narrowed the product focus to an initial subset of target users. We walked through potential user and employee process flows, and eliminated bottlenecks (of both time and cost varieties) by brainstorming alternatives.

We began narrowing the project scope to a minimal set of features that would best serve the initial target users and the business goals. This would be our minimum viable product (MVP).

A whiteboard capture of process flow discussions

A whiteboard capture of process flow discussions


functional requirements [above], wireframe spec pages [below]

functional requirements [above], wireframe spec pages [below]

Wireframes and Specifications

I authored a lightweight functional requirements specification for MVP that spanned a mobile app, a database & web API, and web-based administrator tools.

Concept sketching helped me to discover a simple, usable UI navigation and architecture for the desired features. I then began wireframing the application using Balsamiq. This  turned into a 65-page wireframes specification.

Though the application development would likely be performed and managed in an agile fashion, the above specifications needed to be robust at the outset, to allow potential vendors to accurately estimate the complete cost for development and launch of the MVP applications.

p10m.png

High-Fidelity Mockups and Prototyping

InVision was used for team review of design variations. I developed the final hi-fi screen resources using Adobe XD, and developed a clickable prototype in both Adobe XD and InVision. 

Adobe XD prototype screens set

Adobe XD prototype screens set

Adobe XD screen design example

Adobe XD screen design example


Transition animation example

Transition animation example

Transitions and MIcrointeractions

I created a handful of transition animations and microinteractions using Adobe After Effects, and integrated the output into the InVision prototype.