Reality LA

Reality LA

Reality LA is a mobile app that connects people who share the same vision with Reality LA.

Objectives

In the Rapid Design Event, I was assigned to  design 4 hi-fi user interfaces for Reality LA mobile app based on its website and theme.

In the Rapid Design Event, I was assigned to  design 4 hi-fi user interfaces for Reality LA mobile app based on its website and theme.

Themes

Inspire a thriving community

Inspire a thriving community

My role

Research
Content Mapping
Wireframing
Illustration

Research
Content Maping
Wireframing
Storyborad
Illustration

Tools

Sketch
Illustrator
Photoshop
Principle

Sketch
Illustrator
Photoshop
Principle

Team

Solo project 

Solo project 

Duration

2 days

2 days

The Challenge

The Challenge

 Reality LA is part of the Reality family of churches located in Los Angles. Its website is the main channel to share information. Based on the research of its website, the theme and requirements provided by the event, I defined the challenge as:

Reality LA is part of the Reality family of churches located in Los Angles. Its website is the main channel to share information. Based on the research of its website, the theme and requirements provided by the event, I defined the challenge as:

How might we inspire a thriving community in Reality LA through mobile?

How might we inspire a thriving community in Reality LA through mobile?

The Solution

The Solution

Reality LA is a mobile app that connects people who share the same vision with Reality LA.

Reality LA is a mobile app that connects people who share the same vision with Reality LA.

RealityLA-02

Key Features

hifi

 

The Research

This mobile design project was started with rapidly researching the RLA main webiste. I conducted the research depending on context, identity, and goals these three directions.

research

RESEARCH FINDINGS:

RESEARCH FINDINGS:

01 /  Inforamation architecture of the RLA website

Include main events and resources of the website to the app.
The information architecture has showed that Sunday gathering is the main event in RLA and providing resources for the viewers is another important content in its website. These two parts are included in the community page and resources page in the app.

info

02 /  User Segments& Relationship with RLA

02 /  User Segments& Relationship with RLA

Maintain the strong relationships and keep engaging with others.
Since donators, staffs, subscribers, community groups and volunteers have a strong relationship with RLA, I designed the features below to meet the user needs and maintain the strong relationships: "Sunday" and "get involved" on the community page, and resources page.

rela

03 /  Main Revenue Stream

03 /  Main Revenue Stream

Donation is the main revenue stream of RLA and the key to inspire a thriving community. 
Therefore, in order to get users engaged in RLA financially, I designed a give button, QR codes, my wallet, donation times, donate to RLA, these features in the app.

04 /  Key Activities & Resources

Those activities and resources are Sunday gathering, providing resouces, providing essential classes, volunteers, join community, marriage preparation, childcare and extra.

05 /  Community

A thriving community connects people sharing the same values.
In the inbox page, users can chat with others in the community and receive RLA notices. The "get involved" section of the community page has the latest news and events that encouraging users to join in.

Style Guideline

01 /  Color Palatte

color

In order to maintain the brand consistency, I adapted the main brand color of the website to the mobile. On the RLA website, they have used RGB#274b66 as the main brand color. This color has been used on buttons and the background of “Get Involved” section on the home page. RGB#0DB19F has been used on hover over on the website.

After I selected the two colors used on the website as the mobile design main color, I chose RGB#4AEBC6, the analogous color of RGB#0DB19F to highlight the menu and icons.

The four colors listed above create a color gradient, which has been widely used on the mobile design to create a clear and positive image of RLA. The color gradient has been used to overlay the pictures, which makes sure that the pictures are in the same style and match the other design elements. The menu items at the bottom use the color gradient as well.

02 / UI Elements

ui

Other Projects

DiscoveryProject type

XinnoHealthWEBSITE | SUMMIT DESIGN

FurmingoPRODUCT DESIGN | USABILITY TESTING

CHIDWEBSITE DESIGN

OwlWEBSITE DESIGN

mapFront-end development | Illustration

-Final_3
linkedin
pinterest (1)
twitter