VOLTUS

A mobile application to help users find outlets

Overview

Timeline

Hackathon, 3ish days

My Role

UI/UX Design,

Product Design, Branding

The goal of the app is to save time by cutting down the lengthy process of finding an outlet for studying, work, etc. This app will automate that time-consuming process.

Deliverables

Product mockups, Prototypes, Brand styleguide

Intro

Problem

Oftentimes for university students, when searching for places to study, whether it be in the university library, local cafe, or secret study rooms; one of the longest parts of the process is searching for an outlet to sustain longer study sessions. More often than not, the actual searching process can actually be longer than the study session itself. We wanted to provide a solution for this problem through a mobile app that could provide a status of availability for these outlets.

Final Prototype

VOLTUS is an outlet searching application that a group of friends and I worked on at a local university hackathon in a span of three days. We developed the idea including initial design, branding, and created a low-fidelity functional product over the course of a weekend and plan on executing it to fruition.

The main premise is the lack of knowledge we noticed over where "good" outlets were located in our university. We found ourselves spending a lot of time looking for optimal study places with decent and available outlets. This application was to address those issues so that we could use our study time more efficiently.

THE FLOW

Home Screen

These are the first initial screens that the user encounters. The loading screen is implemented to establish and spread brand awareness and as the user enters the app, the first decision is to input the location of their choosing and then to choose a building in that vicinity.

This function would utilize a GPS type of interface and would require different companies and buildings to essentially opt into the service.

THE FLOW

Floor Selection

For this part of the application, users are able to navigate visually through the building that they choose and see different sections that represent areas where outlets exist.

Each of these sections would also have an indicator of some kind (whether it be visual, auditory, etc.) to show its availability status. For the prototype, we went with a green/red indicator, but for future features, we would try and implement a color-blind version as well.

THE FLOW

Outlet Status

Once an outlet section is chosen, the user will have the chance to see the outlet in more detail and view the "outlet specifications" as well as multiple outlets when applicable. The outlets themselves will show as either red or green to indicate it's current status.

Underneath this visual diagram, there would be a community reviews section where different users could "rate" these outlets and go into more candid details about the outlet.

Live Prototype

This application would have future expansions in terms of features such as additional options for user interface and design features such as different visual filters and options to account for user who may have color-blindness.

Overall the app functions to save time for users and to help automate the process of this search.

TEST THIS PROTOTYPE FOR YOURSELF! 👉

Deliverables

PROCESS

Goals & Outcomes

We decided on these two personas to serve as a model for our target audience base. They help represent the average user that we would see this application benefitting with the focus being on their lifestyles, goals/needs, and current pain points in the process and problem that we outlined above.

PROCESS

Proto-Personas

John Doe

20 years old, University Student

Lifestyle:

Has a daily course schedule that requires John to be mobile and have the ability to set up a workspace wherever they go, whether that be in class, in the library, or at a coffee shop. Their hours are somewhat erratic and can change depending on the week. They run on caffeine and minimal sleep.

Key Goals:

・Plan out their schedule and their agenda

・Organize their study materials and deadlines

・Create an efficient workflow and workspace to optimize their time

・Execute their workflow and perform well in their studies

Pain Points:

・I can't find a stable study spot and an available outlet during finals

・When I finally find an outlet, it ends up being faulty and now I've wasted time

・I need to cut down the time it takes to find an outlet to focus more on studying

Jane Doe

31 years old, Traveling Entrepreneur

Lifestyle:

Has an extremely busy schedule filled with business meetings, travels frequently and needs the same ability to set up as they go in places that they may not always have access to the internet. Their hours are a bit more routine, but they also most likely run on caffeine and frequent coffee shops to have a stable location for their workspace.

Key Goals:

・Create a workflow that can be adaptable to their lifestyle and travels

・Manage their time well, since time = money

・Organize their content and be able to jump in a meeting in a second

・Needs the ability to charge their electronics, so they're always plugged in

Pain Points:

・I have limited time when traveling and need to quickly find a workspace

・I keep running into unavailable outlets and workspaces

・I need to know which outlets in different countries will take my adapter

Process

PROCESS

Customer Journey Map

PROCESS

Competitive Analysis

PROCESS

01. Flowchart

For the first part of the design and functionality process, I started out with a simple and direct flowchart. I wanted to get a good sense of the navigation of the app and to understand how the app would flow before jumping into designing the actual prototype itself. This general flowchart visualizes the basic flow of the app.

I also included a section of "Future Features" for possible future functionalities and to make sure the app is scalable. Some of these possible features include live updates, a colorblind mode, and possibly an expanded community section.

PROCESS

02. Initial Planning

For the second part of the process, I went ahead and started sketching out some ideas for each screen of the app. I sketched some ideas for different features and how the general layout would function.

One feature that we wanted to implement was keeping the app a one-handed experience by utilizing sliding features, so sliding up to view the outlets and keeping the floor number always viewable at the top of the screen.

PROCESS

03. Low-Fidelity Prototypes

For the third part of this process breakdown, I wanted to feature the initial low(er)-fidelity prototypes. These screens show the bare minimum function of the app.

It features zero branding and is just showing the skeleton of what the app would become. It has a few features like the outlet specifications and the home screen/navigation screen that the user will first encounter.

PROCESS

04. Branding

For the branding, I kept it very minimal since we were on a pretty tight time crunch and decided on one bold color of yellow and a white highlight.

I created an overall brand styleguide and showcased Europa as our bold display typeface with Avenir as the matching body typeface and kept everything very minimal, but clean to present the idea.

PROCESS

05. Pitching!

And at the end of this short, but long weekend, we got to pitch our ideas to the hackathon judges! I put together a succinct presentation and we demoed our prototype on our mobile phones as well as a desktop video.

Our team comprised of three members and we demoed alongside a slew of other students attending the hackathon.

I am very grateful for my teammates and this experience. I learned so much over these three days and I really enjoyed the challenge of pushing out a minimum viable prototype that my teammates and I could be proud of and excited about. I learned a lot about how important the relationship between a designer and a developer is and how helpful it can be when you both speak a bit of each other's language.

Next Steps:

・Add more functional features

・Create a high-fidelity prototype

・Take over outlets all over the world!!