Case 1: Buss’n

This case study solved some very essential functions missing from a bus

line’s mobile application. There were three main tasks to fulfill: allow

passengers to view when all 7 bus lines of the Washington Metro

Bus System will arrive at their designated bus stop, be able to see

real time locations of each bus line so passengers can tell how

much time they have to arrive at the bus stop before their bus,

and allow users to select one of the 7 bus lines to see a list of its

future arrival times.

Goals

Aside from achieving solutions to the three main problems at hand,

I wanted to make an application that was a simple and user-friendly

as possible all while delivering a pleasant experience. I wanted to

achieve practicality through simplicity.

Design Process

First, I began with conducting a survey asking questions to gauge what

user’s pain points were and why. How could I expect to design an app

without knowing who I was designing for? The users that completed the

survey had much to say in the way of complaints pertaining to the

well-known yet flawed competition. User’s prioritized the concept of

simple but effective navigation and accessibility above all else.

Seeing these pain points I wanted to see users were already familiar

with in the way of mobile applications already in use. I conducted a

competitive analysis and saw what user’s were experiencing myself.

This inspired me to create an app that kept as many kinds of users in

mind as possible. Things like confusing navigation, color contrasts that

proved to be difficult to read for some with visual impairments, and obvious

calls to action were the top priorities to balance with the problems at hand.

So, then I moved onto drawing up sketches taking away from the survey results

and competitive analysis. I created a persona, site map, user flow, and finally

the wireframes.

Design Studio

These wireframe sketches became the base on which the design process was

built upon. Keeping the pain points, key problems, and my own ideas in

balance was a challenge and it took a lot of deliberating and compromise

between form and function. I took inspiration from well known and affective

apps that most users are already familiar with such as Apple Maps and Google

Maps. Doing this will help ensure to lesson a learning curve for users who may

already be uncomfortable utilizing mobile apps. I wanted to have a clear sense

of visual hierarchy by guiding the eye to the top of the page with the main

heading and going downward towards a call to action. Keeping the layout vertical

and in a single column encouraged less navigational confusion and kept the user

on a clear path.

Design iterations

Style Guide

This section highlights the deliverables that came from previous steps. Here I

display everything from the logo design, color scheme, mood board, and the final

mockup. This was the fun part. As you can see the original color scheme didn’t

make it to the final mockup, which you’ll learn why in the next section. I kept to my

design guidelines that I had originally sketched, which utilized a vertical single

column layout. The eye reads naturally from top to bottom making the navigation

smooth and seamless.

Usability Testing

Once the color, layout, and pages were added it was time to put it to

the test. Initial testing showed some feedback was unexpected at first

but help to make the design even more accessible. The first user was

tasked to navigate their way to the map section of the app. This page

is where the user will be able to select one of the seven bus lines and

see a real time location in oder to see how much time they have to arrive

at the bus stop before the bus. The main feedback pertained to the

original orange, teal, and dark green color scheme. This particular user

fell within a spectrum of color blindness and felt these colors were difficult

to read and poorly contrasted with each other. It was from this test that

resulted in the final color change of the project. Afterwards, a second test

was conducted and the grey, light blue and cranberry color scheme

proved to be a vast improvement. Navigation was smoother and there

were less struggles with where the user was looking on the page.

Click the “High Fidelity Prototype“ to interact with the final mockup.

Keep scrolling to read about my other studies or check out my gallery to see my range of artwork

Case 2: Content Creator Website

This project was unique in that its concept is one that I would not

have given thought to if it weren’t for the client that requested it.

This website aims to cut out the middle man between content

creators and their fanbase. It is a home base website that is

designed to be a one stop spot for fans to view their favorite

creator’s videos, gain exclusive access to content that is

unlocked by a monetary pledge, and notify user’s of the

creator’s updated content amongst different social media

platforms. This concept could work for a slew of different genres

of creators, but this case specifically pertains to gamers. The

process was tedious but the outcome is something totally new.

Goals

The goals were simple. First, give users a means to access videos,

discords, and livestream footage. Second, provide a means for

users to pledge or donate to the creator through the website,

which would then unlock content otherwise unavailable to them

similar to Patreon. Lastly, design it within the guidelines provided

by my client, which involved an “organized chaos vibe”. It took a

lot of sketching to get that last request just right.

The Design Process

Once I understood the scope of the project I began researching.

Personally, I’m not a gamer but I do know the demographic is

huge and extremely diverse. The gamer universe was a very

deep rabbit hole but what I came out with was very informative.

In order for me to create this concept, I had to understand the

players and what made the tick. I conducted a survey to better

understand pain points and qualities in websites that these

users were sensitive to. The end results were actually very

reasonable complaints that I think most people would agree with.

Even though I’m not a gamer, I could definitely see these concepts

being applied to creators across various genres.

Survey Says

Site Map/ User Flow and Stories

Next was plotting out the information and where I could start laying out the

information. It was important to prioritize the goal functions I mentioned

earlier. The hard part was where to put them and how to present it to the

user.

The Drawing Board

Now that the data was collected and the plot points mapped out, it was

time to think about layout and information architecture. As an illustrator

this point in the process was refreshing. I appreciate being able to step

away from the computer and put pen to paper. As you can probably tell

from the scribbles, I had a lot to unload.

Wireframing

As soon as I was happy with the sketches it was time to get back to

digital drawing board and begin the basic wireframes. Of course,

creating the skeleton frames comes first. Click HERE to access the

low fidelity prototype.

Branding/ Style guide

This part is easily my favorite part of this whole process. Designing

the logo, deciding between typefaces, and color swatching is what

really puts everything together and when I can finally see it all

coming together. Granted, it is a very tedious stage. I’ve found that

the colors of a website are extremely difficult when you take into

account the accessibility of the website. Luckily, I live with someone

who is on the color blind spectrum. This stage of the design process

has been made a lot more intuitive because I have immediate

feedback pertaining to color contrast and what combinations of hues

or saturations can prove to be problematic. As a result, the final

mockup doesn’t go through too many iterations. The gallery below

showcases all the details including the progression between color

schemes and mood board.

Final Mockup/ COnclusion

After all that swatching and playing around with what colors will go

where, the final mockup was born. I think with further development

this project has the potential to help creators simplify their outlets

and make things easier on both the creator and their fanbase. You

can click here to access high fidelity prototype and take it for a spin.

I learned a lot throughout the duration of this project. First and

foremost, I learned that designing a project for a client with a

completely different interest than I have makes things very

interesting. At the start of this I had no clue how I was going to go

about making this happen because gaming isn’t really a hobby I’ve

had a lot of experience in. Getting to understand my clients needs and

the users that would utilize this kind of idea took a lot of thinking

outside of myself and I enjoyed it a lot.

Case 3:Pup Me Up

This project was one that hit home for me. I adopted my best friend

from a shelter and it’s an experience that stays with you for years to

come. With that said, I did this years ago the old fashioned way.

Nowadays, most people are browsing shelter and adoption websites

first before setting foot in their car. For this project I strove to elevate

the adoption experience with a website that filled the gaps lacking in

current websites of this kind.

The Problem

The main focus of this project was to fix the features lacking usability

that users claimed to be main pain points. First, reduce the amount

of visual clutter throughout the website. Second, create a more

enjoyable and animated atmosphere to entice users who most likely

wouldn’t utilize an adoption website to begin with. The third and final

problem is honing in on including more information about any specific

pet within their profile.

Getting the Data

Below are the highlights from the survey that I conducted to better

understand the users I was aiming to please.

Competitive Analysis

I had to know who I was up against so I analyzed the top websites

most users will find themselves using when searching for potential

adoptions.

ASPCA

Strengths: Clear sense of info architecture. Simple but effective

color scheme. Easy to read and navigate.

Weaknesses: Large distracting ads/ windows on the side of the

body. Layout does not take advantage of full desktop display as

a result.

Pet Finder

Strengths: Easy navigation. Clear eye lines and good use of

monochromatic color scheme. Obvious calls to action.

Weaknesses: A little repetitive site has 2 identical sections

spaced out vertically as the user scrolls downward.

Summary: Both sites look very user friendly and fun to look at.

Pet Finder has better obvious calls to action while ASPCA looks

more clean and organized. I’ll definitely take qualities I like from

both to create something new and improved.

User Personas

I felt it was necessary to create completely different personas in

order to better understand what different qualities users may be

looking for. Creating 3 personas on different sides of a spectrum

from very tech savvy with a calm yet busy work schedule, a

painter that prefers the slow lane and only knows the tech basics,

and an elderly user who spends most of their days indoors was

crucial.

User Stories and Flows

Once the personas were created, it was time to start mapping

out the path.

Sketches

After the map was drawn out, it was time to start sketching out

some ideas. Organizing the information and determining how

to display it was one of the tougher challenges I faced. This

proved even more difficult when I got to sketching the search

page.

Wireframes

When it was time for the wireframes, I started very simple. The

layout of the page needed to feel easy on the eyes and not too

cluttered with information or images. The grey squares acted

as both placeholder spots for images and spacers once I got the

images I wanted use. Click HERE to access the low fidelity prototype.

Branding/ Style Guide

This stage took quite a few turns, especially in the way of

colors an images. During my competitive analysis, I noted that

both websites utilized a very simply color scheme, which was

usually 1 or 2 colors throughout. While I enjoyed how those

websites found different ways to play with such a minimal color

scheme, I wanted to go a step further. I wanted a scheme that

wasn’t overbearing but complemented each other in a way that

was pretty much seamless. The images below are in chronological

order to show the progression of change between the color

palettes I tried.

Next was typeface. It had to be something easy to read but

something different enough to set itself apart from the average

fonts so commonly used online. The Baskerville typeface also

seemed fitting since it’s namesake reminded me of a certain

Sherlock Holmes story involving a certain type of hound.

Imagery

The look of the website I wanted to be animated. Meaning

showcasing an aspect of animation from the verbiage used

to the imagery of different “mascots“. This helped create a

certain theme of the website that came across very open

and playful.

Prototypes/ User Testing

This stage was easily my favorite because I get to see all

the elements come together. The main page layout

changed quite a bit but I really wanted to maintain a sense

of symmetry and simplicity. Once the prototyping was done

it was time to put all the elements of the design to the test.

User testing is always a nerve wracking step but very necessary.

I had to know what elements still needed to work and what

elements were just right. The clickable MVP is HERE

The user testing results were pretty successful. I tested the

website with 2 users. One of which assisted me with choosing

the final color scheme since they’re on the color blind spectrum.

User 1 came into the picture with no prior knowledge of the

design so it was seen and used by a fresh pair of eyes while User

2 had seen some of the development process but only the color

choices.

Task 1: Navigate to search results.

User 1 Feedback: “The layout of the search results is nice and

organized. I like that the names are underneath the images

rather than on top.“

Task 2: Navigate to search, click on pet profile, and go to alerts.

User 2 Feedback: “That was easy. The colors have a clear

contrast too so everything was easy to read.“

Conclusion

Pup Me Up solves the main pain points that were expressed from

the user survey data. It provides an easy-to-use layout to optimize

accessibility using a simplistic layout with even spacing and good

color contrast. Pup Me Up could be just what a potential pet owner

needs to find their new best friend. For this project I learned more

of the technical skills it takes to build an idea like this one. When I

got into the wire-framing stage I realized that even though this idea

isn’t particularly unique, it has the potential to really push the

envelope. I think I’d like to revisit this someday and completely

shuffle around ideas in terms of layout and information architecture.

I think I played this design very safe, which isn’t necessarily a bad

thing because it fulfilled the problems I aimed to solve. I just think

completely revamping a simple idea like this would prove to be a

good challenge.