Spot

Web Application | UI Design
Overview

Personal project with friend, who wanted to create an app that can be used to pin items/devices to the map. Items can be pinned to the map from current location using gps or entering coordinates manually. 

My role

UI Designer

Tools
Figma

My Design Process

Idea
Lorem ipsum dolor sit amet
Research
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Sketch
Lorem ipsum dolor sit amet
Design
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Prototype
Lorem ipsum dolor sit amet

My Design Process

Idea

Lorem ipsum dolor sit amet,

Research

Lorem ipsum dolor sit amet,

Sketch

Lorem ipsum dolor sit amet,

Design

Lorem ipsum dolor sit amet,

Prototype

Lorem ipsum dolor sit amet

Idea

Lorem ipsum dolor sit amet,

Research

Lorem ipsum dolor sit amet,

Sketch

Lorem ipsum dolor sit amet,

Design

Lorem ipsum dolor sit amet,

Prototype

Lorem ipsum dolor sit amet

Mobile App wireframes

At the beginning I already saw a rough image of the application in my mind, so I went straight to the wireframing with the sketch that I had imagined.

The main usecase of the application was with a mobile, so I decided to start with mobilefirst-thinking and
create wireframes for the mobile only. The desktop version is easy to create based on the mobile UI’s.

I wanted the application be as clean as possible and to use only neutral colors with a one highlight color for the pins and other icons. I found the right color before I started to create the wireframes, so I chose to use it already in this stage. I also designed components that I would use in the finished design, so they would be ready to use. 

I created sign in / sign up pages that utilizes Oauth2 authorization protocol, a home page with scrollable item list and pages for creating and deleting items. 

Finished Design

Overview

Lorem ipsum ipsum..

|

© 2022 Minna Juuma