.png)
Precita Eyes Web App Design
I initiate website merging and optimize the web-app display by drawing references from the visual theme of Precita eyes muralists.
Project Brief
As a volunteer work, I design a web app interface based on the existing web page of Precita Eye Muralist—a non-profit organization that facilitates local artists and residents in making murals. My major takeaway is having hands-on experience in visual design and improving the interface based on the organization’s needs. I also use competitor analysis to model on other similar organizations’ web pages. Besides, the communications between Precita Eyes and I give me some insights into their visual designs to complete the project in a fulfilling way.
High-level Timeline
October 15, 2019
3 weeks
Skills
User Research (Competitor analysis)
User Experience Design
User Interface Design
My Role
UI & UX Designer
Approach
Transforming Precita Eye's website into the web-app interface.
Key Features
Home Page Layouts
For the home page layout, I use the elements from my style tiles and pick the essential section from the original main page. The improved layout gives the users a clear understanding of the website’s functions.
User-Friendly Navigation Menu
I design a clickable button on the left corner that is expandable to a drop-down menu, so to make the web browsing more convenient (for users).
Event Information Display
To facilitate a smoother experience, I employ a drop-down box to show extra event information.
Event Calendar Display
I design an interactive calendar function to help users to search for the dates of other events.
My Design Process
Design Research
Competitor analysis
To commence the web app’s design, I conduct a competitor analysis on other local non-profit organizations’ websites. By comparing them side by side, I am able to maximize the functionality of the interface of Precita Eyes.
The Non-profit Organizations I Picked
CompassPoint
Provides free management tools, strategies, and resources to the local community to lead positive social change.
.png)
.png)
Alemany Farm
Alemany Farm, the largest urban farm in San Francisco, offers everyone the chance to learn where their food comes from, pitch in to help, and take home fresh produce for free.
.png)
.png)
Bread project
This organization trains refugees, immigrants, and formerly incarcerated individuals to become self-sufficient by learning bakery skills and getting involved in the industry.
.png)
.png)
.png)
826valencia
Helping 6- to 18-year-old Bay Area, kids learn creative writing skills by creating books, magazines, and newspapers, as well as providing literary-themed field trips and in-school programs. They give individual support to kids as well and have served nearly 7,000 students since starting the project since 2002.
.png)
.png)
.png)
Shanti Project
It offers help for SF-based residents with terminal illnesses, life-threatening conditions, and disabilities, including in-home care, help to navigate the medical systems, and emotional support
.png)
.png)
.png)
Precita Eye Muralist (My Client: Non-profit Organization)
The organization has been around for more than 40 years, working with inner-city SF communities to bring art into the daily lives of locals. Today, they still work with local kids and street artists to commission pieces and provide an outlet for creative expression in the city.
.png)
.png)
The Competitor Analysis Summary
After a brief analysis of the above-mentioned non-profit organizations, I extend and focus my research on other major arts organizations in the Bay Area and Philadelphia.
I then compare and contrast their structures, branding, main activities, strength, and weaknesses in relation to how they present their cultural events. These criteria are essential and helpful for me to start designing my web app’s features.
Mood Board Design
Creating a mood board helps me to identify the visual norm of the Precita Eye Muralist. I then picked the most suitable color theme and the visual delivery for my style tile
.jpg)
Idealistic Personas
User Research
When I started designing my web app, I focused on my target audience’s user experience on the Precita website. To further my research, I contacted these users to generate my persona. I enjoyed the process as I was able to figure out the audience’s roles and how these fit into the product in real life.
User Flow Chart
To identify the flow of the web app, it is very essential to create a user flow to ensure everything in place in order to make the wireframes.
Wireframes
Wireframes were the rough draft of the web app layout. I decided to add the needs from my personas such as the quick view for the event information, the clear navigation of the website, and the time schedule search.
.png)
.png)
.png)
The Style Tiles
The style tiles were my visual guide for designing my final prototype of the web app. I created my prototype based on my understanding on Precita Eye Muralist’s visual characteristics and their color themes.
Reflection
In summary, this is my first experience collaborating with a non-profit organization on transforming a website into a web app. I find the work process very fruitful for gaining hands-on experience in UI & UX design. I enjoy the research part as it helps me to get to know my target users. Moving forward, I picture improving my prototypes in relation to user testing. I also want to extend my researches further to gain more insight through users’ feedback.