alxbonilla1@gmail.com
arrow pointing down

hey! i'm alexander.

and i also go by alex.

alexander smiling in a button up shirt

i’m a ux/ui designer and developer with ~3 years of experience being a creative lead.

currently working at university of washington.

university of washington logo

my focus is on aesthetics, usability, and accessibility.

“it looks good, it works good, it does good”

pair of eyes looking to the left emoji arm holding up a smartphone emoji a woman walking with a white cane emoji

recent case studies:

in-depth walkthroughs available upon request.

hit spacebar to read more
hit spacebar to close

department of medicine framework redesign

2020

arrow pointing down x shape
hit spacebar to read more
hit spacebar to close

department of medicine news site

2020

arrow pointing down x shape
hit spacebar to read more
hit spacebar to close

center for emerging & re-emerging infectious diseases

2018

arrow pointing down x shape
hit spacebar to read more
hit spacebar to close

department of medicine division sites

2020

arrow pointing down x shape
hit spacebar to read more
hit spacebar to close

department of obgyn site

2019

arrow pointing down x shape

the university's largest department needs a new look

nov 2018 - present

the problem

my manager and i supported 23+ websites for the department of medicine, all on an antiquated drupal 7 web framework – a framework slated to reach its end-of-life.

the goal

design an entirely new and original web framework to meet the needs of all users and stakeholders. the end result needs to:

  • greatly improve on functionality for users and content editors
  • modernize the ux & ui to resolve pain points and enhance the web/mobile experience
  • operate on the new drupal 8 system

original (template 1)

original template 1 screenshot

original (template 2)

original template 2 screenshot

issues with the original templates

the original templates had remained unchanged for years. some of the main ui/visual problems were:

  • an outdated design based on an older parent theme
  • super thick navbar and purple bar
  • weak/no visual hierarchy
  • contrast & spacing issues

additionally, there were ux/functionality problems:

  • confusing dropdown menu
  • rigid structure that couldn't be changed by editors
  • limited options for highlighting information
  • loss of functionality on mobile

new (template 1)

new template 1 screenshot

new (template 2)

new template 2 screenshot

mobile story (template 1)

new mobile template 2 screenshot

desktop story (template 2)

new desktop template 2 screenshot

rounded corners

with the original templates, the department's identity felt like an afterthought, and its content was somewhat unorganized. utilizing rounded corners and a more 'card-centric' design, i was able to give a more unique look and feel to the department aesthetic, all the while organizing content in a more concise and digestible manner.

menus

with the new templates, clients have the ability to choose between a tucked-away menu and a more traditional inline menu – both of which solve ux issues with the original dropdown menu

home menu (template 1)

template 1 homepage menu functionality screenshot

page menu (template 1)

template 1 internal page menu functionality screenshot

internal pages

the original templates were not 'scan friendly.' because users scan websites for the information they're looking for, i designed a page outline section (located on the left, in a 'fixed' position) that allows readers to quickly jump to the information they're looking for.

in addition, with the absence of a sidebar and the clear visual separation of content above/below the fold, my design encourages editors to be more intentional with content placement and order.

dept. of medicine website - education before

department of medicine old education page screenshot

dept. of medicine website - education after (template 2)

department of medicine new education page screenshot

cardiology website – subspecialties before

cardiology old page screenshot

cardiology website – subspecialties after (template 1)

cardiology new page screenshot

allergy & infectious diseases website – faculty before

allergy & infectious diseases old page screenshot

allergy & infectious diseases website – faculty after (template 2)

allergy & infectious diseases new page screenshot

closing thoughts

the above screenshots are only a tiny portion of the work done on this project. after many iterations and many design decisions, the finalized product completely transforms the web and mobile experience into something new, useful, and exciting.

this project was especially fun to work on, and hopefully marks a new chapter in the story of this incredible department.

as with every project, an in-depth walkthrough is available upon request.

exciting medical news stories are waiting to be shared

jan 2019 - present

the problem

department news stories were scattered everywhere, with no single website to live on. i suggested a conglomerate news site for our department and its divisions, and leadership loved the idea.

the goal

design a news site that would act as the go-to for all things news – both for the department and for the public. the end result needed to:

  • be designed to tell news stories in an engaging way
  • be able to work with minimal (or even poor quality) media
  • encourage internal and external audiences to share news

mobile

news site mobile screenshot

desktop

news site desktop screenshot

turning restrictions into opportunities

i moved forward with the above 'card' design because it worked well with the small images that would often accompany news stories (the department did not have access to a regular photographer).

in addition, it was important to create a similar aesthetic to that of the web framework redesign (case study #1) to give the department's brand identity a sense of thematic consistency.

homepage options

i decided on a multi-option homepage layout to give news stories different 'tones.' as a result, a single story could be presented in a few different ways, depending on the tone the author wanted to convey.

light tone

news site light tone screenshot

dark tone

news site dark tone screenshot

purple tone (example 1)

news site purple tone screenshot

purple tone (example 2)

news site purple tone screenshot

vertical content, horizontal menu

with the focus of the news site being news, i kept the top of each page free from getting bogged down with links. in order to do so, i tucked the sparse navigation off and away to the side, with the focus being more on the content and vertical nature of the ui.

my design moves the eye in a vertical motion, much like what inspired it: newspapers and magazines.

mobile menu

news site mobile menu screenshot

desktop menu

news site desktop menu screenshot

reading a story

complete with bold headers (again, à la the web framework redesign introduced in case study #1), text callout options and background image overlays, each news item can highlight important story aspects to the reader.

news story (mobile)

news story page mobile screenshot

news story (desktop)

news story page desktop screenshot

sharing + suggesting stories

at the end of each story, readers get the opportunity to share said story or read related/recent stories.

while the desktop version has an everpresent 'share' option for facebook and twitter (our most active social medias), both the mobile and desktop designs give users the chance to share stories on a number of different platforms.

bottom of story (mobile)

news story page bottom mobile screenshot

bottom of story (desktop)

news story page bottom desktop screenshot

closing thoughts

the process of designing a news site for the biggest department at the university came with many challenges.

from balancing design with functionality to designing for little/no media use-cases, this was an incredibly challenging (and rewarding) project.

as with every project, an in-depth walkthrough is available upon request.

building a new website for an important research center

oct 2018 - feb 2019

the problem

the center for emerging & re-emerging infectious diseases (long names tend to be common in the medical field) was looking to create a new website after years of using a very stagnant website.

i had just started with the department of medicine, and the template options we offered at the time were incredibly limiting.

old homepage (mobile)

old cerid mobile screenshot

old homepage (desktop)

old cerid desktop screenshot

the goal

as the new designer/developer, i wanted to give the center team more than the two very simple template options that the framework had to offer.

as shown in case study #1, the two original templates were the following:

template 1

old template 1 screenshot

template 2

old template 2 screenshot

temporary templates

the framework at this point was hosting around 14 websites with just 2 template options. as a result, every website looked incredibly similar to every other website.

the biggest issue with this was not that the template options were plain (although that didn't help), but that no one site looked different from another to confused users – they would often navigate to an entirely different website without realizing they had done so.

a third template is born

after toying around with different design ideas and user stories, i very quickly came up with a template design option that could be built in a month (our timeline was tight). the new template was:

  • a modern take on the base template look (as modern as possible within the constraints)
  • a design that incorporated the 'uw look' that was more popular at the time
  • something the clients could actually get excited about

cerid's new homepage (using the new 'template 3')

new cerid homepage screenshot

closing thoughts

the cerid team was incredibly happy with their new website. it breathed new life into their web presence and brand awareness, which was exciting to see for such an important research center.

'template 3' was a hit, and as you can see with case study #4 (department of medicine division sites), we continued to use 'template 3' for the many division projects to come.

as with every project, an in-depth walkthrough is available upon request.

13 divisions, 1 department: the department of medicine story

oct 2018 - present

a quick history lesson on the department

the department of medicine has 13 divisions, and about half of said divisions' websites were on the web framework when i started this position. the remaining websites not on the framework were incredibly outdated and difficult to use, often times resulting in a decrease in recruitment numbers.

the ongoing goal

since day 1, the goal was to bring on the remaining divisions so that the department of medicine could present a more unified and modern web presence to internal/external audiences.

in my first 6 months of employment, we added 3 division sites. we added 3 more over the course of the following year, pushing the total number to 12 division sites – all the while working on a number of other web projects.

before & after

below are a few before & after shots of our division sites. you can see that they all went with the 'template 3' option i created back in 2018 for cerid (case study #3).

dermatology before

old dermatology homepage screenshot

dermatology after

new dermatology homepage screenshot

pulmonary before

old pulmonary homepage screenshot

pulmonary after

new pulmonary homepage screenshot

gerontology before

old gerontology homepage screenshot

gerontology after

new gerontology homepage screenshot

gastroenterology before

old gastroenterology homepage screenshot

gastroenterology after

new gastroenterology homepage screenshot

closing thoughts

like most improvement-related projects, this project will never truly be 'closed.' the department of medicine carries a rich history of innovation, and i've been lucky enough to see a small fraction of it through these division website projects.

in the same way that the divisions will improve over time, so too will their websites.

as with every project, an in-depth walkthrough is available upon request.

obgyn joins our web framework as the first paying client

jan 2019 - sept 2019

how it began

like many other departments at the university, obgyn was looking to update their website.

by this point we had designed and built a large number of division and center sites. word had started going around about our service, and once the department of obgyn caught wind, they reached out to us for help.

the goal

design and build a new site with obgyn leadership while migrating content over from their existing site. the finished site needed to:

  • organize content in a more efficient manner
  • effectively present information to users and stakeholders
  • update the visuals and user interface to be more in-line with main campus

original homepage (mobile)

old obgyn homepage mobile screenshot

original homepage (desktop)

old obgyn homepage desktop screenshot

web woes

the original website was full of issues, including:

  • breaking on mobile devices
  • repeated, verbose content
  • confusing navigation and information architecture

highlighting news items

we had an option with our framework templates to turn on a 'hero news item' functionality. this allowed a news item to be highlighted on the homepage, and i worked with obgyn leadership to make sure they displayed their news stories as best they could with this feature.

current homepage (mobile)

new obgyn homepage mobile screenshot

current homepage (desktop)

new obgyn homepage desktop screenshot

what's next

obgyn (like all other clients) were brought on to the framework prior to our drupal 8 update. while their current site is a fantastic improvement from the original, the plan is to eventually move them over to drupal 8 with my more current design (case study #1).

closing thoughts

this was the first project where we brought in money for our department. prior to obgyn, we had no paying clients, but our hard work building and designing so many sites in such little time quite literally payed off.

obgyn was a joy to work with, and they were just as happy as we were with the finished product.

as with every project, an in-depth walkthrough is available upon request.

top arrow pointing upwards