03
2019
Mobile and Web App
Expishare
Expishare is a image-based social media startup where users can curate a list of sharable experiences that they would like to enjoy. The client approached the Vincit team with wireframes and asked us to design the UI of the very first iteration of the app. Much of the UX was already provided, so we used this info to craft our creative direction.

Vinson Gotingco - Research, UX support, creative direction, UI
Cameron Sagey - Research, creative direction
Justin Beaulieu - Branding
Scott Brassfield - Development lead


Problem

The client approached the Vincit team with wireframes and asked us to design the UI of the very first iteration of the app. Much of the UX was already provided, so we used this info to craft our creative direction. Due to short budgetary hours, we were told to "fill in the wires like a coloring book." We needed to navigate around that type of thinking and show that visual design is much more than that.

Challenges

01

02

03

We were only given 100 hours to design a mobile and responsive web application
Setting proper expectations for the stakeholders--UI design is much more than just a “coloring book”
We were tasked with designing the UI, however the wireframes provided contained some UX holes
research

Wireframes provided by the client

Desktop and mobile app wires

The wires provided contained the neccesary screens for the main user flow, but there were some missing interactions that we had to work through. 

We needed to fill these UX holes. The web app needed to be responsive, but we were only given the desktop breakpoint. We made quick wires to start and refined them in the UI phase. Additionaly wires did not contain additional states such as empty, hover, and error states. Although these are small design tasks, they tend to add up and eat through the budget. To save time, we designed these in the UI phase.

Brainstorming themes surrounding the feelings people have when experiencing new things

According to the client, their target audience were younger millenials who travel often. To appeal to this audience, we whiteboarded for core themes that would eventually fuel the Expishare creative direction.

Whiteboarding for core themes for the app
Visual design
Creative direction

We narrowed down it down to four core themes: curiosity, connections, experience, and freedom

When discovering something new, people need a sense of curiosity. Connections are made between their environment, others, and/or themselves. They experience new and interesting sights, tastes, sounds, and more. Discovery provides a sense of freedom when people leave their daily responsibilites behind.

Creating a visual translation based on the core themes

The visual translation for the four core themes

A moodboard to help match our visual translations

Using gradients: In gathering various travel related images for our moodboard, we were inspired through the colors of these landscapes.

Things such as the sky or water aren’t ever solid colors but rather are gradients. Gradients are more immersive than solid colors, which goes hand in hand with the “Experience” theme. Blue gradients emulate freedom, warm gradients emulate connectedness, and pastel gradients emulate curiosity.

Main gradients used throughout the app

solution
Results

We submitted the Expishare app for the 2020 AAF Awards and won!

We won three awards: silver: interface & navigation, silver: user experience, silver: apps, games, and virtual reality.

Partnering with investors

The Expishare team is hopeful for the app’s adoption success. They have partnered with a couple of investors and are working hard to achieve this goal.

Retrospect

What we'd do differently

Do a better job at reviewing wireframes. From the start of the project, we noticed UX holes. However, as we got deeper into the UI phase, newer UX holes came to our attention. We could have avoided using extra hours had we reviewed the wireframes more throughly from the start.

Also, we could have better optimized our project approach. Our designs for the mobile web app and mobile app had slight differences due to browser vs device interaction capabilities. We could have done a better job of finding ways to make a single design for the two. This would have saved a lot of dev hours.

Thoughts

Even though wireframes were already given to us, UI design is much more than just “filling in the wires like a coloring book.” Despite the wires being already done, we still wanted to take a UX approach when crafting the creative direction.

Overall, we were satisfied that we were able to design a mobile and responsive web app with such little time. It would be great to work on this app again once it has a solid user base to give us more user insights.

Download from the App Store