Hello! I am an interaction designer with over 6 years experience in design, and a background in Project Management in Digital Media.
I’ve been planning a career change and the time is finally now to pursue my true passion. I have been freelancing as a UI/UX designer on several projects during evenings and weekends and, I’m ready to turn my experience into a full-time career and collaborate with a team who truly values hard work and creativity.
As an interaction designer I feel my main interest is to utilize user research & results that have been collected and start from there to create clean, engaging, visual experiences for the consumer. I am also not afraid of a little code. But my true passion is improving the user experience through designing the usability of products and their aesthetic appeal.
I’ve always been interested in various forms of creative activities/hobbies, including: digital artwork, painting, crafting unique photo frames/wooden artwork/signs, and even upcycling an old cabinet into a cocktail bar. I speak native Latin American Spanish, English, and am learning Sign Language.
My other passions include typography, nature, and music (almost all genres - my favorite though is 90’s Alternate & Indie Rock). I love to sing in the car, dance to the beat in my seat, listen to audiobooks, travel/explore with my family, and eat anything with Nutella in it!
This project was completed as part of a class at Santa Monica College. My team and I were tasked to redesign the SMC (Santa Monica College) main website. The goal was to create a successful redesign by identifying the needs of the user and making it a truly enjoyable experience for them. This was done by implementing research, organizing content and applying the new branding being developed by an outside company and creating a responsive design.
As a SMC student I visited the Santa Monica College website multiple times a semester and always found it difficult to navigate. Santa Monica College wanted to refresh their online presence and brand identity to promote the college’s unique approach and vision to a global audience. Additionally SMC wanted to promote specific content to different interested parties: the community, alumni, faculty and new students. The long term goal for the redesign was for the site to be easy to update and to be designed with mobile first in mind. A full redesign of the website was part of a class project where I worked as a team leader in a group of four designers.
During our client survey we discovered that the main reason for the redesign was that the site was not responsive, outdated and was not competitive against the other Community Colleges in the area. The goals for the new site was for it to be engaging, forward thinking, and innovative while maintaining the new branding created by an outside design firm.
We performed a competitive analysis of the other community colleges in the Greater Los Angeles Area. Most community colleges offered unique content targeted to specific audiences. SMC mostly targets the international community of students. We used Xtensio to make this process easier.
As an independent assignment I analyzed the current SMC site and created a sketch of the site map first, I rearranged the navigation to make more sense and renamed any confusing nomenclature. Then I began organizing and removing any unnecessary links and redundancies. The final solution was six categories in addition to the homepage. Each category on average would feature 4-6 pages.
Having an overall idea of the direction for the redesign I began creating wireframes for the three breakpoints, mobile, tablet and desktop. I considered the primary goals and the audience for the site. Mobile pages should only include the important content of a site in an easily viewable layout meant for a small device. I focused on three sections, for the homepage the first section contained the logo, below that, I placed the navigation menu in accordion style dropdown and a search bar.
In the second section the jumbotron slideshow with details on the images about events, programs, or other information that needed to be highlighted. The last section was for a news section with an image and the text column to the right of that. For the second page, the admissions page the first section was consistent with the layout of the homepage, we added three icons in the second section that represented three steps to apply for admission, in the third section we added a paragraph overview. We used Balsamiq to wireframe more easily in this process.
For the design comp, I worked on two pages in three sizes to give the new SMC a new look. I started the visual design for the pages by creating a complementary color scheme to go with the revised logo. I chose a sky blue that complements the orange in the logo perfectly and as SMC is so close to Santa Monica Beach, the blue represents the ocean. For the typography we chose a standard font that would read well on all devices, we chose Helvetica in Regular and used the Helvetica font family throughout the design. For the homepage we chose a large image of the campus with three sections with icons known as the "call-to-action". These are the main focus of the college for students to be able to "apply now" a section for "new students" and a section for "current students." The team chose my design and we proceeded to make adjustments to all of the pages to reflect this design direction.
We purchased a WordPress theme that was geared towards education. We split the work into 3 pages each totaling 12 pages for the high fidelity prototype. The end result was a site with a clear navigation system, a successful sub-navigation system, a strong visual design.
As project manager, I performed a test on all of the pages to ensure quality, branding cohesiveness and functionality. It took about eight weeks to complete the site prototype with 12 functioning pages. We presented the site to the SMC stakeholders and they were very please with the outcome.
In conclusion, this project was an overall success for all parties involved. As a team we successfully redesigned the site and created a responsive website for our client.
In the end the project satisfied the users' end goal which was to have access to a mobile friendly site with clear, well-organized content. The stakeholders' end goals of increasing the visibility of the college and maintaining its status as the #1 transfer college to and remain competitive in the market were also met.
This project involved finding a solution to a daily problem most hungry food truck seekers face, waiting in long lines for gourmet food trucks. My team and I were tasked to conduct research, identify and solve this problem in the food truck ordering experience. While we kept this customer focused goal in mind, we were also highly focused on boosting revenue for the gourmet food truck owners.
Our solution was to eliminate the lines altogether by providing food truck seekers the ability to look up locations of nearby trucks, view their menus, food images, yelp reviews, and quickly place an order all through our app. Once the order was fulfilled, the user of the app would be notified when the food was ready for pick-up. This was done by implementing an end-to-end design process.
There’s no shortage of apps designed to allow to you order-in from restaurants for pick-up or delivery. But I couldn't find any on the market that service food trucks.Truck Line Cutter App is a concept that was created to solve one of the biggest pain points in most hungry people's lives, waiting in line at a popular gourmet food truck to order food. The Goal of Truck Line Cutter "TLC" was to be able to look up a food truck by name, location, cuisine or scan a truck at your existing location, then view the menu, place an order and avoid waiting in line to pick up the delicious food. Most events now feature food trucks and they always have long lines and this app would be such a time saver.
To begin my competitive analysis I searched the Apple & Android App Stores for any food truck related apps, and at the time the only thing closely related were locator apps that pulled a twitter feed into them showing you the trucks location based on their tweets.
The next step was for us to gather real-time data from real customers, we visited a popular truck stop and we began by talking to real people waiting in line, and asked them how they felt about their experience when they waited in line. What aspect was most frustrating for them? The time wasted, the physical act of standing, boredom?
These findings led us to start thinking about taking the solution in a direction that would eliminate the time spent waiting to order, as well as exploring ways to improve upon the experiences of traditional point of sale.
The user persona was created from the combined key findings from my teams surveys, interviews and research. This persona is meant to represent how a typical user of the product may think and behave.
We met to discuss the app in detail to create flow charts from the sitemap made of post-its. We evaluated the visual sitemap and all of the possibilities for the screens that were necessary depending on where the user clicked. First, we identified the necessary information from the low fidelity prototype and sketches.
In example: Search screen, Shopping cart or Checkout screen, then we visualized all of the information and their functions. Mobile design is not a linear navigation process, with mobile there is always more than one way of getting to the same result, plus other options, menus, etc.
After sketching out a full user flow on paper, I began working on the low fidelity prototype to test out that the user flow was accurate plus it could be used to receive preliminary user feedback.
I created a quick prototype in POP to share with the team
With the research step complete, the problem clearly defined and the persona and user flow established, we started to formulate design concepts by individually brainstorming and researching our ideas, then reconvening to discuss what we came up with and combine our best ideas.
Once the design pattern research was complete we began sketching out the final concept for the high fidelity prototype, then creating a quick high fidelity version of the screens for a user testing session. We decided to focus our prototype on one food truck to, the Kogi Truck it is legendary in Los Angeles for the delicious Korean Mexican Fusion food. We used their real menus and images for the prototype.
We were able to conduct preliminary user testing to get feedback on the 12 screens and the user flow. The most important pieces of feedback received were:
Taking all of the feedback received into account, I resumed ideating with a critical eye analyzing every screen for alignment, padding, or sizing issues. I made improvements to maximize effective communication and logical visual choices.
The following is an example of the different iterations that were created and the changes we made as a result of the noted feedback.
Insert image here
The App Icon also received a makeover, originally the main idea for the app icon was to create a cross between a pair of scissors, a fork and a knife. We continued the original idea but through multiple ideations.
Insert image here
This is a walkthrough of highlights of the final mockup, starting with a full demo video and ending with an interactive clickable prototype.
The first thing that users will see is a welcome screen they are prompted to create an account, but are also presented with the options to sign in or continue as a guest.
Following this, the user is directed to the search page and is able to proceed with three options for courses of action:search by location, by cuisine, by Truck Name A-Z.
If the user selects search by location, they will receive a list of food trucks that are currently open and accepting orders near them. The user can then select their food truck of choice and browses the menu. Once the user decides which items they would like to order they add the items to the shopping cart.
All of the user flows end with checkout. This design demonstrates how a user would check out using a Credit Card because it is likely the most convenient, but other options available are Google Wallet and Paypal. Immediately after payment, the user is shown a purchase summary stating an email confirmation has been sent and informing the customer of when the order will be ready for pick up.
Insert animated gif here
Cheesy grin jarlsberg stinking bishop. Smelly cheese squirty cheese everyone loves cheese strings everyone loves babybel ricotta cheesecake. Cheese on toast pepper jack airedale pepper jack cheesecake croque monsieur cheesy feet cheeseburger. Emmental boursin cheese on toast cheese triangles emmental cauliflower cheese monterey jack fromage frais. Dolcelatte red
leicester emmental cheese slices caerphilly squirty cheese hard cheese brie. Cheese slices emmental red leicester stinking bishop taleggio everyone loves stinking bishop say cheese. Monterey jack everyone loves queso dolcelatte manchego emmental macaroni cheese blue castello. Ricotta cheesy feet chalk and cheese paneer danish fontina roquefort halloumi.
This project involved creating an app that would work like a rolodex, but with tequila, with a list of all of their available products for tasting while giving the user the experience of logging their favorites, sharing with friends and viewing purchase information. OLA Mexican Kitchen are known for having the largest variety of tequilas in the region, and often host tequila tasting events. My team and I were tasked to improve the customer experience in the restaurant by boosting tequila sales.
This was done by ensuring the basic restaurant information was displayed, that the UI design be intuitive, clean and functional.
Target Audience: Food lovers, tequila enthusiasts, couples, singles, college graduates, income of 50k+, ages 25 - 55. Upon completion the app was made available on the Apple App and Google Play Stores.
When I think tequila, freshly cut limes, salt and shot glasses come to mind. When I think huntington beach pier, I think of the sunset, plus the logo has the colors of the sunset in it, this makes up the moodboard.
I started to formulate design concepts by brainstorming and sketching out ideas, then my team and I discussed the ideas and refined them. We decided to move forward so I started with the sign-in, sign-up screen solutions. And I added notes for the developers for pop-up notifications we should include as a (Call to action)
for the users. Then I continued sketching the remaining screens, the category view listing out the tequila types. Product views in list and grid view. The side navigation, customer profile screen, About us sections and post splash screen home page views.
I created a quick prototype in POP to share with the team
Once the sketches were approved I began wireframing the login screens so that the developers could advise if they could apply the functionality.
I sent the client a few design patterns in wireframe form for the design solutions should be. I sent them:
They approved all of these ideas except for the filter as this was too complicated for the first version of the design. I started working on a few visual design patterns and shared those ideas with the team, they liked the direction this was heading in.
I used the wireframes as a guide for the design of the sign-in screens, adding in the branding colors, logo and details needed to make the screens be a great user experience.
The Restaurant already had an established brand that they wanted to use this as the app icon so designing the app icon was not difficult I just played with the colors and thickness of the circle in the logo itself.
Once I completed the design of all of the screens I sent the development team a UX Flowchart so they knew how to correctly build the app.
The development process began, they created a test app and uploaded it to a test site of the google play store where I downloaded the app and evaluated each screen. I began documenting and taking screenshots of the issues for the developers to fix. Multiple bug fixes later the app was live on both the Google and Apple App Stores.
During this project I learned a lot about workind directly with a development team to launch an app live. Instead of designing from scratch I started with a template that the developers had chosen. Luckily having some coding experience I found it more easy to express the issues that arose during the testing phase.
The turnaround time was much more rushed than I expected but overall from start to launch it took a few months, I'm glad we had the time to test before the app could launch on the Apple Store to fix the bugs and iron out all of the details. Here's the proof that this app was launched and was live on the app store in 2015, however as of 2018 the restaurant decided to no longer use the tequila rolodex.
This project involved rebranding the logo and product label design for Tolly’s Treatments, a company that makes all natural home and body products using high grade essential oils. I was initially consulted to perform a facelift on the website, but after performing a quick analysis of the products I identified the problem.
The packaging design wasn’t aligning with the needs of the target audience. Once the problem was solved I was able to help Tolly’s Treatments boost their sales by 235%.
At the beginning of the project I met with the client (the owner of Tolly’s Treatments) to collect their goals for the new logo and redesign of the packaging labels.
Design to be kept: The logo appearance should appear the to be similar, they wanted to keep the same look which was a thick chunky font. No curve or angle, a black color and all products in the line would have a color variation but be consistent with other lines in the same primary color set.
The goal: Convey a feeling of calm, relaxation and love.
Changes wanted: Simple, clean, bold, they were interested in having illustrative patterns such as fruit or images of the ingredients on the labels.
Future goals: Overall they wanted the new design to be fun, luxurious but not pretentious with the ultimate goal aside from increasing sales was to be sold in Nordstrom one day.
Since the future goal is to be sold in Nordstrom Stores, I performed my Market Research there, I evaluated full lines of products in a multiple spectrum of designs.
Target audience: 20 - 55, female, mid-level to upper class, with knowledge of toxicity in products.
The things they have in common are they all have similar ingredients, the design is clean, basic, the label contains alot of white space.
The logo and packaging design were originally created by the client. The logo was set in a typewriter font in all caps with a drop shadow. On the label it was taking up 35% of the real estate, there was a total of five unique fonts on one label. In one example, the description of the product for the airspray product
Love was Geranium is peaceful, "Ylang Ylang is an aphrodisiac”. However during my product analysis, the label lacked those qualities of romance. The other thing I noticed was that The lip balms, rollers and air sprays were all designed differently and the descriptions used were also inconsistent.
I searched for illustrative images of all of their ingredients, such as lavender, blood orange, lemon, geranium. Despite the clients desire for a masculine feel I knew the target audience was mostly female and I wanted to attract them so I went for a more feminine vibe but with plenty of white space.
I sketched ideas with elements of eucalyptus, a flower or anything to give the name Tolly's Treatments the identity that it is an aromatherapy company. We went through multiples rounds of iterations for the logo but nothing was resonating with the new look the client wanted.
I tried a combination of fonts from something that looked like their previous logo to serif, bulky sans serif, then cursive, handwritten fonts and still nothing hit the nail on the head. I suggested that we move the project along by working on the designs for the labels then placing a few of their logo top choices into the final label design.
I brainstormed an idea of including an illustrative element into the label, I started sketching and playing with lemon slices, eucalyptus leaves, blood oranges and then I played with the text direction of the label headlines on a few designs.
Once we settled on the background pattern I inserted their top logo choices. None were seeming like the right choice. I finally found a cursive font that was feminine and I thought looked great with the word “Tolly’s”.
I sent them this font for review and the client immediately rejoiced and said I love it, I think it’s perfect! I manipulated the font a bit in illustrator with some minor tweaks here and there and the final logo was set.
I scoured the web for free illustrations of natural elements I found an amazing line illustration curved pack. Out of this I chose a select few flowers and leaf combinations to create my own pattern and repeated it as a background on the label. The client loved this and was it was the first step in the right direction for the label design.My next goal of this redesign was to minimize the amount of fonts used on the package.
Their previous design had five different fonts. I used three fonts including the logo. I wanted the fonts to evoke the feelings listed on the label, for example Love I wanted it to be a feminine thin and mildly cursive font. I chose to update the color border by bracketing in the “Blend” and this way all of the product lines were tied together with similar design.
The client really liked the idea having one line printed on metallic, the client decided to have the face masks with this luxurious metallic look. I suggested we have the label background as black this brought a sense of exclusivity and elegance to this line.
After a few rounds of printing, re-iterating and resizing to ensure all of the content fit on the product the labels were ready for the printer, they were all professionally printed and applied to the products.
I recently created a double sided postcard for Tolly's for them to use in P2P marketing.
Tolly’s Treatments launched their new line on their Website and Etsy store and began selling around town on the weekends at flea markets. Their sales have increased by 235% and they attribute their success to the new design. Pictured here is the owner of Tolly's Mandi Tollefson selling at the Rose Bowl Flea Market, hanging behind is a banner I designed for her and all of the new products. I thoroughly enjoyed this project and working with her as a client and I will hopefully be assisting her again soon with a new product line that is being developed.