SOMME APP

ROLE

UI/UX Designer

WHAT I DID

UX Research, Wireframing, Visual Design, Prototyping

DURATION

5 months

TOOLS

Figma

DELIVERABLES

Business model canvas, User flows & MVP Prototype

BRIEF

A multidisciplinary team with various backgrounds worked on an innovation project by which we could generate sustainable local economy in Catalonia; food & beverage industry in specific.

GOAL

Develop an innovation on an existing product and/or service from a multidisciplinary & holistic perspective. 

PROCESS

Before going through details, I want to start by highlighting how I structured the project.

wine-proces
wine-discover

BRAINSTORMING

I started with brainstorming within the team using miro. So, everyone could collaborate & share the topics they are interested in & relevant to sustainability as a general issue. Each one of the team shared their desired topics, and then I was able to categorize them.

categorizing-wine

After that, we decided on the main topics, then we transformed them into HMW statements. It helped us see the ways by which we can solve users’ problems. Afterwards, we initiated voting system to vote for the best HMW. As a result, sustainable local economy (micro-environment) was the winner. Since we are all living in Barcelona, we thought about Catalonia's local economy.

vottt-wine

TREND ANALYSIS

We analysed the trend & the basic needs of society by acknowledging the causes of change. Also, what triggers that we could make use of so that we would know how to innovate and which field should we choose. 

analysis-trendwine-1

Since we needed to narrow down the topic in order to proceed with the following phases, we were able to choose the food & beverages industry, Catalonia's viticulture in particular. Also, we decided on the blockchain technology that provides secure & transparent information about the products details.

food-ico-blue
blockchain-blue

DESK RESEARCH

After brainstorming & our decisions that we made on food & beverages industry in Catalonia, we needed to dig in more in the industry to specify the product that we would proceed working with. So, we collaborated & searched for the most widely known in Spain which is Catalan wine.

research-wine-phase

USER INTERVIEWS

I interviewed 3 different people to get more in depth review about their experience since I needed some valuable inputs to check the areas that need to be improved & developed. I started with writing a pre-interview script so everyone of the team can follow the same structure.

script-pre-inter

Then, I organized the way we would interview the interviewees, starting from general to specific questions.

interview-process-wine

As a result, I got valuable insights from the interviewees & I was able to understand their furstrations, problems, & their inspirations regarding the solution that they would like to have one day.

ans-inter-wine
wine-define

TARGET USERS

Based on those findings, we were able to identify our target audience as young professionals & baby boomers, either locals or tourists. They are interested in IoT, smart cities, & new technologies. Not to mention that their most favourite drink is a tasty wine glass, & they are willing to get to know everything about it.

usertarget-wine

USER PERSONA

We began the define phase by using our interviewee data, and secondary research to create user persona to help bring out a major pain-point that the user might experience. 

user-wine

USER JOURNEY MAP

Then, we mapped out a user journey map. The persona 'Ricardo' would be a young professional who got furstrated after buying a wine bottle from a store. After mapping out the user journey, we pinpointed specific areas of interaction that the user might go through. Our goal was to ideate improvements for those areas. 

cust-journey-wine

VALUE PROPOSITION

We needed to look at the business side of the innovation, & how the customer would find have a valid reason to get our service. So, we collaborated together & each one of us added the proposition that would be easy to understand.

valurpropooo-wine

BUSINESS MODEL CANVAS

Afterwards, we wanted to map out the infrastructure, customers, & finances that would achieve our value proposition.

busin-wine

MVP MAPPING

With all that knowledge, we were ready to define our MVP. The primary goal is to solve the user’s problems.

mapping-wine
wine-prototype

VISUAL DESIGN

Before delving into lo-fi wireframes, colors & hi-fi prototype, we included some of the accessible & inclusive design rules that we would add in the solution. As designers, we have responsibilities towards the community & one of them is to design for all people; a diverse set of users who will interact with the product.

visualdesign-rules

TYPOGRAPHY

Now, let me introduce you to the fonts that are implemented in the solution, either the mobile application or the logo.

typo-wine

COLORS IDENTITY

According the color palette of wine, we selected these colors. The first line includes the primary & secondary colors while the second line includes the typography & background colors.

color-palette

LOGO

Name Origin: "Somme"

It comes from the term "sommelier" which is originally French, but also used in Catalonia (the rest of Spain has used the term "sumiller"). The sommelier is a wine expert who among other tasks helps customers to choose an optimal wine for every occasion & taste, just like our solution.

Why Somme?
For many years, linguists have maintained that word length is related to the frequency of use. The shorter ones tend to be the most common, the easiest to remember, and therefore the ones that stay in the consumer's memory the most. The term sommelier is not expressly long, but it becomes heavy when referring to an application. That is why the name that stabs the application is "somme". A fresh & catchy name.

Logo Origin:

The logo intends to represent: the raw material of the wine (the grapes), the location (Catalonia) & the appellation that makes it different from the rest of the grapes & wines (D.O). It has an austere & minimalist style, following the wine tradition full of simplicity. The result is an image type that combines the symbol representing the mentioned elements & the tagline.

logo-wine-somme

USER FLOWS

Therefore, I created three user flows to connect users with the MVP screens with no effort.

So, the following user flows are to achieve 3 simple tasks:

1- New user/ sign up.

2- Returning user/ log in.

3- Scan QR code that is placed on the bottle to get wine DNA.

wine-1st-flow
wine-2nd-flow
wine-3rd-flow

Lo-Fi WIREFRAMES

Afterwards, I used screen record option in my macbook to record my interaction with the lo-fi prototype. Then, uploaded the video on youtube. You can enjoy watching here or follow this link: https://youtu.be/Xe5EAOvxclM

Hi-Fi PROTOTYPE

Then, I applied the chosen colors, typography & logo to create a hi-fi prototype using Figma. Then, uploaded the video on youtube. You can enjoy watching here or follow this link: https://youtu.be/r_wmu6gg5Cc

CONCLUSIONS & OUTCOMES

The project took five months & it was a try to elevate the local economy in Catalonia using blockchain technology for sustainable development. We were eager to add some authenticity to the solution. Therefore we interviewed users to get proper feedback from their point of view so we could get to know their real problems that they are facing. Not to mention that the one thing that I would implement or change in this project is to perform user testing on user flows, lo-fi wireframes, & hi-fi prototype & go for a couple of design iterations.