top of page

Rollin App

#UX #UI #Visual Design

This case consist in a brief documentation for a Mobile App Project.

An application that meant to allow user to discover interesting low profile events (almost underground) around their cities, mainly focusing in food/gastronomy, art and music events.

The project intent to emulate working next to the client to design their brand directives and an app for its new service.

Context

The customer is creating an app that will allow people to discover cool events happening in their city.

Users will be able to create accounts, indicate their interests and then see relevant events near them whenever they open the application. Events in the app will be added by “Tastemakers” who will sign up for the service, go through a brief verification process, and will be able to add events to the app’s database whenever they want.

The app will focus on major Brazilian cities with over 1 million inhabitants at launch, but they hope to open it to anyone in any city within a year.

CSD Matrix and Survey Canvas

Case_RollInApp.006.jpg

The user’s app experience: They want to create a simple sign-up flow for users, and then a nice initial curation test, in which users will answer questions about their interests, which will impact the events that will be shown to the user. open the app for the first time (users they may also see events that don’t “fit their interests”, as one of the client’s goals is to help people broaden their horizons).

Users should be able to easily sort and filter by event types when opening the application and then click on individual events and read more information. They must also be able to share, add to the agenda and access the event website (where relevant).

User personas

Creation of initial user personas based on who the intended end users are and what they will use the app for. Try to create at least two different personas so that your final designs take into account the needs of different types of users. Make sure you create a persona for users and influencers alike.

Case_RollInApp.016.jpg

Moodboards

In addition to the mobile app design, the customer would like to develop a style guide very basic that can be applied to this app as well as the name of your new application! The customer will also need to submit the proposed changes to their team. and you will need a document containing the information below.

Styleguide/Brand guidelines

  • Application name

  • Color palette + typography guide (titles, text)

  • Button, links and states (default, focus, active / pressed, etc.)

  • Form elements (entries, option buttons, etc.) and their states (focus, focus, errors etc.)

  • Image content and treatment (what kind of image – black and white, color, etc.)

Workflow

At this point, I’d started creating user flows to map all the different screens needed to design for the app and show how each one flows into the other. Mapping all the screens a user will interact with is the necessary precursor to creating real wireframes for each page.

Workflow

Wireframe

After creating some strong ideas on paper it’s time to start create low-fidelity mockups. It is important to note that wireframes are done in grayscale and placeholder boxes are used in place of images and icons at this point.

Wireframe

High fidelity and Prototyping

In addition to the mobile app design, the customer would like to develop a style guide very basic that can be applied to this app as well as the name of your new application! The customer will also need to submit the proposed changes to their team. and you will need a document containing the information below.

Feel free to experience the interactive mock up

bottom of page