teamroberto

T2 [BCC Project] vs TEAMROBERTO

production

Comments Closed


Share this post

:// INTRO

The BCC Project is a Mobile App which helps Service Members in their efforts to change any specific behavior. One of my first tasks was to develop the look and design aesthetic for the project. My duties on this project included: Visual design, color palette, background design, reward design, personas and context scenarios.

:// PRODUCTION

The first step? Firing up my Pinterest boards to gather design inspiration and present it to the team.

++ Mood Boards ++

After the mood boards, I developed the personas and context scenarios in order to have a vision of the functionality for the app.

++ Personas ++

++ Context Scenarios ++

Once the design language was settled on, we decided to update the name for the App since “BCC” seems vague. Seven words made the final cut from a proposed roster of 50 plus names. I presented the top seven names along with Font possibilities to the team.

++ Font & Name Roster ++

After the final name was chosen we decided to select the color palette for the App. Using the Transtheoretical Model for change we decided to have each stage represented by a specific color which helps inspire change throughout that specific stage within the program.

++ BCC Color Scheme ++

++ BCC App Background ++

I was then tasked with creating a background for the App with these rules in mind:

  • An Environment which inspired the user’s journey from beginning to end.
  • Having a gradient which symbolized each stage within the change process.
  • Make it a perspective point of view.

Roberto: What you need fam?

T2: We need a background for the App. Make it look awesome.

Roberto: Say no more.

 

++ Background sketches ++

Once the design language and color palette were in place, I created a mobile theme example for project management.

++ BCC Theme Examples ++

We also developed badges which users would be rewarded as they made their way through the App.

++ BCC Badge Development ++

++ Badge Sketches ++

This project would have never been possible without the help of the fantastic Design Collective. I was fortunate to pick these fantastic creatives’ brains as I developed each deliverable for this project.

++ Design Collective ++

Art Director Robb Sanchez provided guidance as I stumbled through the darkness of development.

Coach Carter and Coach Pouleson discussing UI/UX world domination.

Coach Rios provided invaluable help when it came to the development of Personas and Context Scenarios.

Coach Roff provided his Adobe Creative Cloud wizardry during the visual design process.

Coach Carter looking into the future.

— All Design Collective photographs were taken by the talented Olivera Teodorovic. —

^ Back to Top

Read more

T2 [mobile] vs TEAMROBERTO

production

Comments Closed


Share this post

demo_22

:// INTRO

For this project, I was tasked with creating a stylized cartoonish theme for a mobile app concept. This theme would feature exaggerated shapes and a pastel color palette.

:// PRODUCTION

I started off by thinking about creating characters which could make the user feel happy. The idea for the “pill people” came after having seen a picture of two fingers which were crossed. Each finger had a smiley face drawn on it with a pen.

The idea was that the pill people would be modular so the user could choose his or her preference in style, thus making the avatar personal.

These characters would then visit “planets” which would make up the background of the app. Each planet would be completely different from the one before it. We also discussed rewarding the player by giving them badges to promote their progress. These badges would be created in the classic NASA mission style badges.

++ Sketches ++

++ Pill People ++

blog_01

blog_02

blog_03

++ Planets ++

blog_04

blog_05

blog_06

blog_07

blog_08

blog_09

++ App Layout ++

blog_10

blog_11

blog_13

blog_14

++ Reward Badges ++

blog_12

++ Background exploration ++

_card_v1

_card_v1a

_card_v2

^ Back to Top

Read more

T2 [desktop] vs TEAMROBERTO

production

Comments Closed


Share this post

demo_21

:// INTRO

One of my first tasks at the National Center for Telehealth & Technology was to create a desktop concept for an app which focused on user generated content & it’s own social network. We chose to go with a flat design aesthetic for the concept, this would provide a clear highlight for the body of the content. Having in mind the great number of possibilities which each user could bring, organization and simplicity were key.

:// PRODUCTION

The first pieces of artwork created for this endeavor were not digital at all. Everything was kept classic, pencil and ink on paper. This helped with the large number of iterations which would come ahead.

Under the watchful eye of Art Director Robb Sanchez the layout and format were decided upon. Add the UI/UX expertise from General Assembly craftsmen Lalo Carter and Mary Pouleson [a sure recipe for success].

++ Sketches ++

blog_01

blog_02

blog_03

blog_04

++ Style Tile ++

bcc_styleguide_v2

++ BONUS: Dark Theme concept ++

_desktop_screens_mockup_v2b

^ Back to Top

Read more