Product design and concept design for mobile app

From idea to interactive prototype

Safety

Mobile App

Startup

Subtle white arrow pointing down
Closeup of a broken arm of a user of the incident reporting app.
CLIENTGreenlight
LOCATIONLondon
TEAMResearcher, UX designer, systems architect, UI designer, project manager
PROJECT WEBSITE

Sam had recently finished her PhD Thesis in safety procedures and incident reporting in the workplace. The insights she gathered spurred an idea for a start-up that makes incident reporting easy. She wanted to create a prototype that translates her ideas into a real mobile app.

She liked our expertise in working with insights from academic research. We were delighted to work with a bright young founder who had done her homework. It didn’t take long until we kicked off the prototype design project to get her start-up off the ground.


OUR CONTRIBUTIONS

Product strategy

Product Roadmapping

Information Architecture

UX Design

Wireframing

Interactive Prototyping

UI Design

Branding

User Testing

Digital Strategy Consulting





App design overlayed on top of an image of a logistics center.

Turning a PhD thesis into UX thinking

Sam shared her PhD thesis with us, plus a set of research articles, a presentation and a book chapter. We summarised and organised the insights that were relevant to the design of the prototype. We create a bank of ideas, plus a checklist of what would make the prototype a really good tool for reporting incidents in the workplace.

Academic articles used in the design of app prototype.

A LOGICAL INFORMATION ARCHITECTURE

In week 1 we focused on creating an information architecture where user journeys are as simple as possible. However, we had to plan for significant flexibility because the incident forms differ depending on the type of incident. We explored 3 architecture concepts. It was delightful to engage in conversation with Sam, explaining the pros and cons and integrating her perspective.






Diagram with the journey in the app prototype with comments to the left.

Being supportive with product strategy

This is Sam’s first start-up and her first experience creating a digital product. While the designers were working on the prototype design we organised a few separate sessions to shape the overall product strategy. We shared examples from past experiences with her and helped her understand the options she has for development, financing, partnerships with early adopters and how to stage the release of the product.

Quotes

First of all, let me just say that seeing this come to life for the first time was the coolest thing ever for me. Thank you so much for your work and everything you've done in shaping it. 

Image of the customer of the design agency.
Samantha GruskinFounder @GREENLIGHT
Interior office during a product strategy meeting.

The app starts to take shape

Weeks 2 and 3 were intense. We did 3 iterations of wireframes, adding design detail every time. First we figured out how to create a design for the form that can adapt to both short and complex reports. Next we designed a medium fidelity wireframe of the entire process and in the final go we captured the fine detail. At every step we involved Sam, explaining the design thinking and getting her input. Sam’s comments were spot on and she owned the vision of what the app would be from start to finish.






App wireframe designs in a diagram showing the user flow.

A persuasive investor demo

In week 4 we did user testing. We learned a few valuable lessons and had to adapt the user journey, plus other tweaks in the report form. Once the wireframes were completed, we assembled the final prototype.

In week 5 we worked on UI interpretations, showing what the app could be like with visual design. We used the visual UI design assembled and created an investor demo.




Four screenshots of the visual app design from the investor demo.

Prototype delivered in 4 weeks

In 4 weeks we transformed Sam’s enthusiasms and theoretical ideas into a real app that users like. The fact that she was well prepared made it possible for us to focus on design solutions and to have productive conversations after every design iteration.

We worked closely with her to make the most out of her bootstrapped budget. By doing even a little bit of user testing, we improved the design significantly. When it came to the investor demo, we focused on showing what investors are looking for: a product that adds value and the team’s ability to execute.






Design elements

OUTCOMES

Interactive prototype built in 4 weeks

Fully documented for development

Investor demo created in 1 week

Two UI roll-outs for branding ideation