Problem Statement
Given only the concept/business idea of the startup, without looking at their design/app, how can we design the most usable interface for it from scratch?
Statiq is a company based in the New Delhi suburb of Gurugram, India and a member of the YCombinator Class of 2020. It allows individuals to find & reserve Elective Vehicle (EV) charging stations through its app.
Essentially, it aims to build India's largest EV charging network.
We decided to design a mobile app for Statiq due to the following reasons:
Users will most likely be using the app when they're on the road, looking for EV-charging stations nearby.
Users can use the map and navigation features of the app to get to the chosen stations using the phone.
Our goal is to build an app that is easy to use, especially to first-time users, and provides a streamlined process of booking stations.
In order to do so, we decided that the app would have a Google Maps-like interface (since most people are already familiar with it) to show various charging options near the user's current location & show the availability, waiting time, distance, rating, types of EV that can be charged to help users choose which station to go to, and a navigation feature to bring the user to the station.
We think anyone who owns an electric vehicle could benefit from this interface as it helps them locate charging stations faster and make reservations easier.
Each member in our group brainstormed a set of 3-4 screens in order to start off with a diverse set of possible layouts.
Coincidentally, a few of us ended up focusing on much different aspects of the app: some had more detailed reservation processes, others touched on things like past reservation records, personal settings, etc.
The set of sketches are shown below:
We merged selected pages & designs from each set of sketches to build an interface that demonstrates our solution to the startup's goal of reducing pollution by connecting the users & owners of EV charging stations.
We categorized each functionality into groups, and designed a navigation bar at the bottom that contains the 3 main feature groups: the Map Page, Profile Page, and History Page.
The set of sketches are shown below:
We then created an interactive Hi-Fi mockup based on our wireframes, actually implementing the layout, buttons, screen transitions and more.
We brought our interactive mockup to studio & received feedback & suggestions on how to further improve the app. We then incorporated these feedback into our design.
Studio Critique
Improvements Made
We uploaded our mockup to UserTesting.com, where, given a selected task & a set of questions, real users from around the world will try to accomplish the objective on our app, and give us feedback by answering our interview questions.
Main Objective: Reserve a Type 2 Charger at Park Station @ 3:45pm
Task Questions
Feedback Questions
Results
Besides changing the navigation text instructions from "Swipe Up to Naviage" to "Swipe Up to Enter Navigation Mode" to make it clear that navigation is a separate functionality that is different than the maps homepage, we could also consider adding an additional screen in our hi-fi mockup to showcase what the specific page would look like to users
Receiving user feedback is incredibly important to making an inuitive app with good user experience. The effects of a lot of design decisions remain largely ambiguous until actual users share their feedback from a different perspective from the designers.
Having multiple iterations allows us to make modifications to our groundwork design early on, and get feedback on features throughout the development lifecycle.