hey, i'm marco

these are my creations

Freelance Illustrator, graphic designer, UX/UI Designer




I am a freelance UX/UI designer and illustrator based around the globe. I was born and raised in Los Angeles, California before moving around the country and finally settling in Texas to study at the University of Texas, Rio Grande Valley.After I earned my degree in Political Science, I worked abroad in Tokyo as a school teacher for two years. It was my time in Japan where I learned to illustrate and began to start my own work as a freelancer.After Japan, I lived in Europe for a few years, supporting myself with art commissions before learning how to become a UX Designer.


The world needs to run on proper UX design. I have a passion for this career as if it was an extension of my artwork. Each design I create is made with lots of love and effort, but most importantly, it's made with the goal to better our future as a world-wide community.


About the Project

STOMPs is a fun, easy to use, and fresh app when shopping for sneakers. Our app is designed to appeal to the sneakerhead inside all of us. Whether you're new to the fashion world or a veteran, this app will streamline a way to get your next favorite pair of shoes.This app stands out from the rest by picking trending shoes and adding them into one place without having to shuffle through such a saturated, condescend market.


Project:
STOMPs
Timeline:
2 weeks
Role:
UX/UI designer, Researcher, and visual design
Responsibilites
Sketching, Design, Wireframing, Mock ups, Prototyping

Getting Started

I wanted to design an App that was simple to use, appealing, and overall fun while shopping for sneakers. I needed this app to stand out from the rest of the competition while simultaneously taking the best features from other shopping apps.Virtually, anyone should be able to use this app at any age. Accessibility was important.The question as to why some features worked over others was explored and the idea for STOMPs's direction began to stew.


Name: Gwen O'brien
Age: 41
Hometown: Fresno, CA
Occupation: College professor


Meet the User: Gwen

Gwen is a hard working community college professor living at home to take care of her sick mother. She is what many consider to be a workaholic. However, she wants people to know that her interest might not be too far off from the students she teaches. She enjoys lots of the same interest many youthful creatives have and wants to express it through her shoes.The problem: She hates using a lot of modern apps and wants something easy to use, simple, but overall gets her in the right pair of shoes.


Name: Oswald Connor
Age: 23
Hometown: Toronto, CA
Occupation: Customer Support Agent


Meet the User: Oswald

Oswald is a customer service agent who genuinely likes helping people. He’s very optimistic about anything, lives with his wife and their recently born daughter. His work life can often be negative when he hears lots of complaints from customers and want a positive experience when shopping for shoes that match his bright personality.The problem: He's tired of wearing discount shoes with a discount look. He wants to find something to reflect his personality.

Ideation

There are tons of shopping apps out there, so when designing STOMPs, it was a good idea to start looking at what the other competition did in terms of design, flow, and experience. I did a competitive audit of some other popular shopping websites in order to best understand how my users might feel when using STOMPs.The most important thing for me was the look and feel of the app.I needed to do a Competitive Audit.


Lids

Lids is a company that specializes in selling hats and some other accessories. What I really enjoyed about this store was how simple it was to use. They had a clean design and I didn't feel overwhelmed.


Amazon

Amazon had a lot of featuers that appealed to the mass shopper. Some of these things were virtually inescapable when designing STOMPs, but I felt it was also far too cluttered. First time users may not be able to incorporate all the features and some might be intimidated with how much is going on.




Nike

When talking about sneakers, it's impossible not to talk about Nike. Their contribution to the market has changed the world. However, they have some inconsistencies with getting out their product. There are multiple nike websites to buy shoes from and all have different designs. Our app needed to be consistent.


Initial wireframes

After the competitive audit, I drew up a few wireframes for what might be the homepage. This phase was important because it would carry the design throughout in order to maintain a consistent look.The steps were:1) Sketch of our design on paper2) Translate paper sketches into lo-fi digital wireframes3) Complete a full process wireflow of the lo-fi wireframes.






First iteration

The end result of the lo-fi wireframes enabled users to make a simple purchase with minimal effort. The users are able to pick a pair of sneakers, add it to their cart and review it afterwards before completing the purchase.


User Research

My main goal for the research was to see how intuitive and accessible the app was when creating each layout for the wireframes.The app needed to feel natural.To do this, my User Research relied on unmoderated usability study to figure out how many pain points someone could run into. Based on whatever I might find, I would sharpen the design, look, and feel of the app for better quality and usability.I had 4 users who volunteered to be a part of my user study.These were the results!


Affinity Diagram

As previously stated, my main method would be an unmoderated Usability Study to see how the users might interact with the app without any assistance.I came up with an Affinity Diagram to answer some of my own questions through their feedback.1) Does my design feel natural?
2) Is the flow intuitive?
3) What were the major pain points?



There was definitely a lot to learn from and improve upon. I categorized the feedback into four main sections. Three were sectioned into common pain points the users all felt and one section was about some of the things they enjoyed.Major pain points:

1) Add a proper shopping cart. Some users were unable to check on their items and felt it was off putting.2) There was an overall lack of features within the app to make it feel unfinished, even confusing some users.3) Our design lacked a payment confirmation and review page to make users feel more at ease before finalizing purchases.

Moving forwardI needed to implement these changes in order to make it more accessible for the user. What I knew was how the users felt, and even with some communicated satisfaction, there was room for improvement.


Final Design

After reviewing the feedback, creating mock ups was more than just fine tuning the original wireframes. I needed to incorporate all responses and put the user as a priority. The usability study suggested there wasn't enough content. After revising it, the app now contains various features, designs, and even photos to offer diversity of what this app is.STOMPs isn't just another shopping app for shoes. It's the place meant to connect those who felt disconnected with their footwear and style.

Shop seamlessly and with confidenceNow that it's all said and done, the app works as intended. One can start the app and get from login to checkout with little obstruction and with the reassurance of a trusted process.


Highlight featuresThe final product didn't just implement what was suggested, it surpassed them.Some of the things that made this stand out were the categories that differentiated each of the shoes you could get. Here are some other features I was proud of.


1) A carousel banner which maintained the style of the app upon login.
2) The ability to add multiple shoes into the cart with a red highlight to the top right to indicate how much product is being held.3) Reviewed products with ratings to allow more comfort and assurance when making a purchase.4) A page to review and confirm your shopping cart before finally making the decision to officially place your order.


Style Guide

The whole purpose of STOMPs is to look for a shoe that makes the user feel great, fashionable, and achieve some level of cool. The app needed to offer a similar feeling. The colors and choice of design were almost retrograde in a sense to the homage it was paying tribute to. The aesthetic were the Memphis Design of the 80s meets a 1950s soda pop shop. It's young, but wise.The colors were chosen to make the accents feel strong, yet comforting with the blues and beige palette which makes it a visual treat.



What I learned

STOMPs is my first design project, and going into it I wanted to take it very seriously. The app was meant to highlight how capable my abilities are to make an app. There are many things I could go about differently if I were to do it again, mainly it's margins and perhaps adding even more features such as purchase history of items, or even a more out of the box design to make the shopping experience unique.However, I believe an app like this has one purpose-- practicality. I wanted it to be accessible, so anyone from any age group could learn to use this app soon after downloading it. STOMPs needed to look good, so a complimentary color pattern was the best bet, and lastly, I needed the app to flow well. There doesn't need to be a lot of fluff or bells and whistles; it simply needs to work well, and look good doing it.


About the Project

The Tutors is designed for all learners. It is built to provide an engaging, interactive, and effective learning experience that is tailored to the unique needs of each individual student.One of the standout features of the tutoring app is its responsive web design, which ensures that the platform is accessible and functional across all devices, specifically desktop computers and smartphones. This means that students can access the app and their course materials from anywhere, at any time, whether they are at home, at school, or on the go.


Project:
The Tutors
Timeline:
2 weeks
Role:
UX/UI designer, Researcher, and visual design
Responsibilites
Sketching, Design, Wireframing, Mock ups, Prototyping



Getting Started

This project has a lot of my background professionally; I worked as an English tutor during college and even did some online tutoring. Students would always praise the tutoring department for their convenience, but often talk about wanting an online feature.Online tutoring isn't new, but it's not fresh either.The Tutor's design is to invigorate the process of finding a tutor for an online session, or to schedule and meet with one in person. Furthermore, it's a way for users to sign up as a tutor and make some extra funds while studying.I wanted the design to be calming, sophisticated, and precise, while integrating common mechanics and themes from other apps in order to make something which helps select tutors and schedule them without a hassle.


Name: Isao Sato
Age: 18
Hometown: San Diego, CA
Occupation: College Freshman


Meet the User: Isao

Isao is a first year university student. He's having a bit of trouble adjusting to campus life, trying to juggle a full class schedule and a part time job. He needs a way to schedule a tutor for his time frame that doesn't get in the way of his busy schedule.The problem: Isao doesn't like the tutoring center at the university because he feels the tutors there aren't best suited to him. He wants to find a tutor that's ideal to his needs!


Name: Maria Gonzales
Age: 23
Hometown: Newark, New Jersey
Occupation: Full time mother, part time student


Meet the User: Maria

Maria just married her high school sweet heart and started a family after graduation. She has welcomed a second child to her world and is very busy now raising two daughters. However, Maria wants to continue her education and has enrolled at her local community college as a part time student.The problem: Maria is swamped taking care of her two daughters and only has some time to go to class and get home. She isn't able to meet tutors at the campus, and needs to find a tutor online.

Ideation

When it comes to online tutoring, there's plenty of choices. The problem is how similar many of these designs or websites function. My research led me to find the most accessible tutoring sites and compare them to each other-- what they got right, what can be improved, and what's simply not needed.With a market that is oversaturated and offers a similar base, how could The Tutors stand out?From what I've gathered, there's a stale air floating with most tutoring sites. In the most blatant since, they're not engaging others to explore tutors as one could hope to achieve. Interestingly enough, I looked towards other apps that helped potential suitors find one another.

Tinder Meets your Tutoring App

I couldn't pinpoint one prime tutoring website or app to present since many of them are virtually the same. However, Tinder as a service has been perhaps the most game changing app in contemporary times.With how popular Tinder has become, Swipe Right is a part of English's lexicon; something that mainstream needed to flow through the veins of The Tutors. However, I wasn'tlooking to copy the whole interaction of swiping, wanting to focus on finding the perfect tutor instead!

The goal in mind-Connect students to tutors
-Make the interaction feel engaging
-Adding a swiping feature to link something familiar, even alluring



The challenges: Responsive Web Design

Making a responsive website that was capable of being used on mobile devices and desktop computers was important. The Tutors would be the perfect app to exercise these muscles. Students looking to sign up with a tutor could do so at the comfort of their work station at home, school, or office while also having the choice of scheduling a session through their mobile phone.



The goal in mind-Make a design that is similar in both mobile and desktop devices
-Have something with brand recognition on both layouts
-Seamless flow between both devices so they are accessible as can be

Initial prototype and early concepts

I began this journey with testing out a few layouts to see how well I can match a phone design to a desktop computer one. I began with lofi concepts for each and tried connecting them in a similar fashion, flow, and style.


User feedback and observations

I gathered a few participants to offer thoughts about the initial design and about where the direction the app would be going. The tough sell was trying to people understand this wasn't a niche app that would connect students and Tutors a la Tinder way, but used it's innovative design to make it more engaging.With 6 participants, I gathered their thoughts, experiences, and initial reactions to The Tutors's early concept. Here's what they thought:

Past experiences with Tutoring apps

More than half of the participants agreed that finding a tutor online has not been a very provacative or engaging interaction. Often, they do it out of sheer necessity. Students are usually told by a professor or have extra credit initative to seek out tutoring for the sake of a passing grade-- it's great, but not enough!


"Seeking a tutor and getting help should be initiative enough, but it isn't. I usually drag my feet when I have to sign up for tutoring on my school's website."


Initial reactions and feedback

When pitched about an app that could function similar to a dating service, most participants felt it offered an edge that other apps don't have. It's goal isn't to connect students and tutors for anything other than providing educational purposes, but with a design that makes getting to that point a bit more fun.


"It can feel more personal by seeing who might tutor me, rather than just seeing a name, major, and available hours. I want to feel like I'm meeting someone who's like a friend."


Iteration

The concept was starting to gain structure, but the feedback showed room for improvement. It felt perhaps there was too much reliance on that entertaining factor, that my product would not be taken seriously.The Tutors needed to include features such as allowing signing up to become a tutor, a flow that primarily showed interest in what a student is looking to learn, and a safe environment for all users.


Information Architecture and Wireframes

The concept of the app is for students to find tutors. However, many apps that provide this service also provide a service of allowing potential Tutors find work opportunities.Although the focus of this project is primarily for the students, I wanted to include that for potential, future.Translating the information architecture into the wireframes for the product would be a rewarding journey; with a strong foundation, and with a design in mind, I was confident the app would flow as intended.




Final Desgin

For both Desktop and Mobile Devices, I wanted The Tutors to feel the same, while functioning properly. The app is primarily for University Students, but accessibly is always something that one should keep in mind so it may be for everyone.


Experience it on Desktop

Our goal was to primarily make this look almost academic, highlighting important aspects and offering a stream lit process to connect young students with tutors as soon as possible.




Experience it on a Mobile Device

I'm very proud of how the mobile version came out. I personally feel my strength lies more with UX/UI in mobile apps, however the challenge of connecting both designs to be responsive was something I immensiley enjoyed as well.



Style Guide

I learned from my previous work that consistency was the utmost important aspect for UX design. Colors, buttons, and even framing needs to all be consistent throughout the flow. I wanted a design that was sophisticated, cool, and above all, stood out with a subtle vibrancy.The result was a dark background highlighted with accent colors to make exploring the site a pleasant, if not academic, experience.

What I learned

Designing a responsive web app for both desktop and phone, such as The Tutors, requires careful planning and consideration of the user experience on both platforms. One of the key lessons learned is the importance of designing for mobile first. This approach allows designers to prioritize the essential features and content of the app and optimize it for smaller screens.Another lesson learned is the need to balance the design for desktop and mobile platforms. The design should be visually appealing and intuitive on both platforms, while considering the different sizes and resolutions of the screens. Designers should consider the use of images and icons, typography, and layout to ensure a consistent look and feel across all platforms.Usability is another essential aspect of responsive web app design. Designers must ensure that the app is easy to navigate, with clear calls to action and a logical flow of information. This can be achieved through the use of user-centric design principles such as user personas, user testing, and user feedback.


About the Project

Welcome to LottoFish, your ultimate destination for lottery excitement and increased winning potential! I am thrilled to introduce you to my first paid project, where I have poured my passion and dedication to enhance your lottery experience like never before.LottoFish reflects my unwavering commitment to delivering exceptional value to you. I have poured my heart and soul into creating a seamless, feature-rich platform that caters to both seasoned players and newcomers alike. The app contains intuitive interface, sleek design and ensures an effortless and enjoyable lottery experience every step of the way.


Project:
LottoFish
Timeline:
1 month
Role:
UX/UI designer, Researcher, and visual design
Responsibilites
Sketching, Design, Wireframing, Mock ups, Prototyping

Getting Started

My task was to look at a previous design, and reinvigorate it.LottoFish was originally designed by a different UX designer when my client contacted me. What they had was a good start, but there was something about the app that didn't meet full expectation. I felt that the app lacked a few things; my skills confidently led me to believe I could adjust and redesign the app to fulfil my clients full vision and perhaps even show them something fresh.My goal wasn't the stray too far from the original design, but bring to light the full potential of this application. Every UX designer has experience and designs in their mind that works for each project. Just looking at this one in particular, I knew it was in my alley of expertise.



Meet the Users

Henry, 24

US Army

Henry believes in his country. He is an active duty enlisted Army soldier. When Henry isn't defending our nation, he is finding ways to enjoy his freedom. When he's home, Henry likes to go on dates, party with friends, and sometimes take his chances at various casinos.He usually has a good sense of luck and manages to respect the chances of losing, while enjoying the various times he comes out on top. However, Henry wants to enjoy something to this nature on his smart mobile device with some free time.


Isaac, 49

Contractor

Isaac's a married man and father of three. He likes to spend time with his family, and plan exciting weekend get aways into the outdoors. He's an avid risk taker and enjoys the rush of getting into new ideas.However, he isn't the type to put his family at risk of losing his hard earned money. He usually avoids gambling, but when an opportunity presents itself to up his chances at winning it big, Isaac's natural adventurous side begins to peek.

Ideation

As previously stated, there was nothing wrong with the first designs of the app. The challenge of this was how to separate my design from the first iteration. I did not want to make a carbon copy and I did not want to make something that was so far out left field that it shattered the original design's format. I had to examine what the app did right, and where there could be improvement.

Previous Design of Lottofish

Looking at the previous designs, I cannot say that there was anything particularly wrong with the first designer's implementation. It was a clean look, communicated clearly, and seemed intuitive enough.However, if I were to present this app to someone as it was, could the user be able to identify what app they were using? Most they could gather it was about buying lottery tickets and joining a pool-- that's fine, but it wasn't enough.

PROS

- The design had a uniform order.
- There was a color theme and consistent components throughout.
- It was simple to use and universally straight forward.


CONS

- The design lacked any flair and maintained a generic style.
- There was nothing to retain user attention or go further to make it accessible.
- There was absolutely no brand recognition.


I had a clear direction to what this design should now accomplish. The designs before were okay, but that glaring problem for a business is simply unacceptable to me. A business needs to have it's name on it's product first and foremost, and inspecting the Lottofish app, I was not able to do so easily.Brand recognition was something this app desperately needed. Opening any app from a popular company, you will know who published it without having to leave the front page in most cases.


Youtube's app has a million reasons why it works so well. However, opening basically any page, you will know what app you are using without second guessing. The signature red highlights the app and iconic play button is never far out of reach.


Even without an app's immediate logo being present, the fact that this app is globally recognized with the primary color pattern and the subtle accent colors of green speaks volume of it's design. The goal is to always emulate this.


First Iteration

My initial sketch used mostly the same format of the previous design. My main concern was to take this into something a bit more recognizable and set it apart to a unique look which would offer real brand identify.

These were ideas I had that would instantly set the app apart from it's original design.- Design a unique logoBy creating a logo, I could weave it into the app as a starting loading screen, and an idle loading screen between pages if possible.- Set a specific color schemeEvery successful app has a color scheme that sets it apart from the competition. Having seen other lottery apps, bright white and accent colors is over used and burns the eyes-- something that is cool, collected, sleek is what I'd like to go for.- Offer unique interface that retains users.There was little aside from the main purpose of the app to keep users engaged. Perhaps adding a floating action button (FAB) and fun facts in the loading screen could help users feel more engaged.

Research

Field StudiesThe best way to conduct research for this product was to simply have a group of volunteers use the initial sketch and get raw feedback. From a pool of 20 participants, these were the findings.

Out of 20 users, only 4 users were unable to complete every task. Most users testing the initial design were able to complete it's goal of selecting a lottery ticket, picking numbers, and finishing the purchase.


Despite some users not able to complete every task, the participants did not run into various pain points and were able to mostly get through the app in a timely manner.


The app's design was easy to use, most users were observed to need little motion and navigated the app with relative ease.


What to Improve?It was good to hear most users were satisfied with the app, but of course there is always room for improvements.1) The users who were unable to complete all the tasks were confused about what numbers they chose. They'd select the numbers, but weren't sure what order they just selected them in. It would be good to add a feature that shows the order of the numbers they select.2) Even though the app seemed accessible, it didn't seem interesting enough to engage users. I needed a feature that showed something more to keep the user's attention.3) Was the app too simple? Some users who finished it were left wanting more, and that to me speaks volume of how much left was needed.

Results

After thoroughly reviewing the research, I became convinced that the ideas I had in mind would undoubtedly infuse LottoFish with a fresh and captivating design. With careful implementation, these concepts held the potential to breathe new life into the app, elevating its appeal and impact. The thorough analysis fueled my enthusiasm and confidence, leaving no doubt that these ideas would truly transform LottoFish for the better.

Logo

Adding a new logo as a start up loading screen drills the identiy of the brand

FAB

With a Floating Action Bar (FAB), users have something to interact with, in addition to purchases.

Facts

Fun facts now accompany loading screens to engage users and offer retention.



Style guide

LottoFish's original design, in my opinion, played it safe. There was nothing inherently wrong with what the first UX designer did, but I wanted to go somewhere more daring. I implemented a dark color scheme and bright accent colors for the app; this made the design feel more vibrant, grabbing the users attention and stayed in line with the Web Content Accessibility Guidelines (WBAG).


Takeaway

I felt extremely privileged to have this be my first project working with people in the industry. The app contains nothing short of what I believe is my passion and creativity.
Most importantly, my client was happy with the results.
Designing Lottofish requires striking a balance between coolness and sophistication. The app's visual appeal should captivate users with sleek and modern design elements, while maintaining a polished aesthetic. Embrace a minimalistic interface and create a strong brand identity with a memorable logo. Incorporate gamification and interactive features to enhance the user experience. Ensure secure and seamless ticket purchasing, and offer personalization options. By focusing on these aspects, Lottofish can become the go-to app for lottery enthusiasts seeking a modern and enjoyable experience.By focusing on the new design, minimalistic design, branding, gamification, secure purchasing, and personalization, you can create an app that exudes elegance while capturing the excitement of lottery games.

About the Project

This was my first project not only working with a team, but working as Lead Designer. Though the project was small, the vision was big.SneakPeek is a cutting-edge website designed for stock trading enthusiasts, leveraging advanced AI technology to enhance the trading experience. The platform provides users with real-time insights, market trends, and intelligent predictions to inform their investment decisions. With a user-friendly interface, SneakPeek empowers traders of all levels to make informed choices and execute trades seamlessly.The website aims to revolutionize stock trading by combining user-friendly design with the power of AI, offering a comprehensive tool for individuals seeking to navigate the financial markets with confidence.This project is under certain restrictions. To learn more, please reach out.


Project:
SneakPeek
Timeline:
1 month
Role:
Lead UX/UI designer, Researcher, and visual design
Responsibilites
Sketching, Design, Wireframing, Mock ups, Prototyping