top of page
GET IN TOUCH
Made with ❣️ by Valeria Espinoza
Image 3: ROMO App preview in Google App Store
Launch To App Store!
Reflection
Based on our findings in our dog fooding testing, we carried out further revisions with the React Native version to carry out our official launch on Google App and Apple Store. I do believe that the card could be improved by erasing the website link, but overall it has been efficient for our developers to engineer.
Solution In-Depth
An app curated to navigate San Francisco's support services made simple
I made a visual system that is easily engineered and understood.
A list view of content cards for events/resources
Resources
1st Iteration
Image
Info
Button
Button
2nd Iteration
Image
Button
Button
Info
.png)
.png)
Visual weighted with the intention to look towards the image first to Info to Buttons last
Buttons are appropriately padded for touch accessibility
Info is at risk of breaking if there is a long description (Vertical Arrangement)
A clear distinction of the eye doing to Image (take up the majority of space)
Info can be easily extended down if there is longer texts (Horizontal Arrangment)
Buttons being beside Info presents better hierarchy with the Image being prioritized first
Events
.png)
Button
Button
Info
Image
Date
Arrangement similar with Resources Card for consistency
Tapable information is highlighted in red
The date has the most white space, but it is visually strong compared to the others
Having both the Favorites button and a date stamp on the right side provides better structure
Having the Title in on top of the Time provides great typography hierarchy
The date being a stamp provides more clarity than it comprising the entire white space
Navigation Bar
Broken, with no clear indication of which tab is turned on
There needs to be more description for the visual icons because can be misunderstood
Unstructured and unstandardized navigation bar failing to comply with Apple standards
One highlighted to indicate one is turned on helps user know what tab they are on
Descriptions below visual icons provides more clarity
Standardized bar passing Apple standards
I collaborated with our engineering team to develop an effective user flow.
I've developed an task flow with the engineering team to layout all of our flow in an easy visual map.
Task Flow
As a way to layout the intentions of the software development, I've devised this visual task flow to support what the user will do in the app.
.png)
I prototyped an interactive map for all location pins.
Prototyping the interactive tooltip was critical in assuring the experience for the users and provide visualization for my software engineering teammates.
Distinct Location Pins
These colors pins with its own instinctual color helps categorizing all locations based on subject
.png)
.png)
.png)
.png)
.png)
Interactive Tooltip
A go-to button with all categorical pins placed in one place!
ROMO: Refuge of Mt. Olive App
ROMO App was a collaborative endeavor between my team at Code for the Community and Refuge of Mt. Olive, a non-profit in need of a user-friendly app. In a team of software engineering and product manager, we crafted a solution to bring vital resources to those in need in San Francisco, California!
Click here to see our app live on app and google store, or play my demo!
Duration
Jun - Sep 2024
Team
5 Software Engineers
1 Project Manager
Role
Sole UX/UI Design Intern
What I did
Visual Hierarchy Collab w/ Develop
Prototype Demo
Problem
The lack of a centralized resource hub makes it difficult for unhoused individuals in San Francisco to find food, shelter, and support services. Working closely with engineers, I ensure the design is structured for seamless development while aligning with product managers to prioritize user needs.
Goal: To offer users an app to access local support resources, events, and groups that cater to their needs.
Solution: How might we streamline scattered resource information into a single, easy-to-navigate platform for unhoused individuals in San Francisco?
Process
RESEARCH
Why Refuge of Mt. Olive needs our help?
By the Numbers
Approximately 7,700 unhoused individuals in San Francisco
49% of the unhoused population is under the age of 24
.png)
82% of unhoused individuals have access to a phone, making app useful ~6,300 people
They wanted to redesign their mobile app in both the backend system and design. It was my task to strengthen the brand identity and deliver the goals of the app with a better design.
Initial App Design from Refuge of Mt. Olive
Rough User Flow of Home Screen (Scrolling Vertically)
IDEATE
Sketching Home Screen Flow
Before prototyping on Figma, I decided to do rough concept sketches of the home screen flow with consistent navigation bar.
(1) events section scrolling down to (2) resources section to (3) contact us
SOFTWARE TESTING
Dog Fooding of App
With the high-fidelity prototype made through Figma, I collaborated with software engineers to conduct multiple dog fooding sessions where we tested the programmed Reactive Native version ourselves. In these sessions, we debugged any programming errors and I readjusted the design to fit the programmed version needs.
bottom of page