Gmail Flash

Send an email with attached file in only 3 taps

Stage

You go down the stairs in a supermarket and your mobile rings. You receive a new email that you want to reply quickly with an attached file, but you have the other hand busy with a shopping bag.
Why not creating a fast Gmail in which you can do this task in 3 taps?

This is a challenge on the UX UI Bootcamp in Neoland.

We had specific components to create:

  • A basic branding of the App (Logo + Naming + Style basic guide )
  • Login with fingerprint
  • An Onboarding with a maximum of 4 screens
  • A wireframe
  • Settings of 1 screen only
Flow chart of a user sending an email with an attachment

The initial decision was to prototype and design for Android. Then the UI exercise advanced with the ideation of a flowchart used to describe both back-end processes and user task flows. Ours was focused on a user in need of sending an email with a picture attached.

Once the flowchart was done and clear, we started building our mockup, at first on paper and then passed to digital.

Mockup of Gmail Flash made with whimsical

The high fidelity mockup represented the idea we had to make the whole experience quick and pleasant maintaining the classic Gmail soul.

Firstly we added 4 buttons below the email preview: reply, reply with attachment, re-send and delete. For us the four options we wanted to keep clearly visible to the user.

Later we focused on how to make the selection of a media or a file the most organized and easy to get.

The user has to orient himself quickly. We desired that finding files or media to attach to the email was just about a scroll down of the page.

While creating the settings we thought: if the user is reading an email, he should be able to adjust and customise the display in order to see clearly the text. Wherever the user is. How? Adding new features.

If a classic white background is not satisfactory enough, the user is able to choose different background colours.

Font can be amplified or reduced based on the user need and the brightness can be adjusted as well in order to read also with annoying sunlight behind.

Additionally, you can activate or deactivate notifications regarding each specific mail, by turning on or off the “Notifications” button in settings.

After ideating our prototype we created a style guide, in which we resumed the font, the logo, the colours used and the asset of our App.

As you can see the style we followed is the classic Gmail, maintaining in this way the brand and the sense of trust can provide the google mail colour scheme and structure.

The logo is a result of the classic Gmail logo and an icon we fancied that indicated speed. We used Adobe Illustrator to merge the two components and eventually we transferred it into Sketch.

Style sheet

Ultimately we recorded our final prototype using Marvel as a prototype tool, a free and easy tool to display your projects.

Enjoy the video!

Thanks to my partner in this challenge Giulia Guglielmetti.