WHEN: October 2018
WHAT: HTML/CSS, UX Design, Prototyping, Photoshop
A responsive (desktop, tablet, mobile and 4K) redesign of Double Fine
Productions’ website integrating UX principles of learnability, usability,
and memorability.
View the Github repository for the project
here!
Goals & Original Site Design Analysis
My goal was to experiment with simplicity and more modern, minimalist
styles that would aid in intuitive navigation of the site. The
current site is cluttered and outdated, which is understandable for an
indie game studio without a huge focus on web development.
Below is the current site for Double Fine Productions, a video game
company that has sold millions of copies of several games including Grim
Fandango and Broken Age. The Home page is primarily announcements, with
several menu tabs at the top indicating different sections of the site.
Photos of games and comics are on the right side.
Wireframes / Usability Redesign
I first created five low-fidelity wireframes in
Balsamiq to increase the usability of Double Fine’s site.
The navigation flow between these wireframes is shown below:
High-Fidelity Mockup / Visual Redesign
After wireframing, I used Photoshop to create a high-fidelity mockup of
a new Double Fine site.
Double Fine’s original color scheme has been preserved, but the original
background of uneven stripes, which distracted from the main content of
the page, has been replaced with a clean dark brown that
allows interactable and featured elements on the page to
stand out.
Overall, the redesign is much more minimalist, minimizing bright
distractions from the site.
The news articles are now separated, graphically presented as separate
yellow boxes to aid the user in comfortably discriminating which images
and text accompany which article.
The two-headed logo at the top left is now no longer blocking any
buttons or titles, enhancing readability of the site and
reducing user misclick errors. The News section is indented from
the menu to imply a hierarchy and distinguish menu from page.
The original website navigation tabs don’t employ
font consistency, so I’ve chosen a single font for tabs/titles
and a single font for text.
The social media icons have also been made more visible. Duplicate
buttons (e.g. ‘Jobs’ appearing in two places at the top) have been
removed to avoid user confusion and enhance simplicity.
Mobile, Tablet & Desktop Sites / Responsive Redesign
The next step in the project was using HTML and CSS to create a site
whose usability and visual appeal was maintained across different screen
sizes. To create a map of how elements on the screen should adapt to
different screen sizes, I first created the annotated mockup below:
I then used HTML and CSS to create a responsive page whose layout
changes with screen size.
Standard Desktop & Mobile (in Portrait) Interfaces:
4K Screen & Tablet (in Portrait) Interfaces:
The mobile site has been changed to be more similar to scrolling sites
like Instagram: the image and the title are the only two elements in the
News preview (article text preview has been removed) to
reduce clutter and give a simpler mobile aesthetic.
If the user wants to read the article, they’ll click the image (much
like Youtube’s interface).
Text scales according to screen size (but becomes slightly
proportionally larger on mobile) to enhance readability across devices.
The logo on desktop sites is stuck to the top left, alongside the
banner, to serve as a
consistent means of accessing the home page. Similarly, on
mobile, the banner shifts to just below the logo for a centered
appearance. Register and login buttons, along with the search bar and
social media icons are also stuck to the right on desktop for
easy and consistent access. On mobile, these elements are placed
just below the navigation tabs so they’re visible.
Contact info is often found at the bottom of mobile sites, so the social
media icons have been moved to the bottom in the mobile layout. Overall,
the mobile site is simpler, including news articles just using one color
for both title and image, with backgrounds of consecutive articles
alternating colors to help the user distinguish between articles.
Reflections
Were I to take this project further, I would add responsiveness to the
other pages of the site, including creating distinct game pages for each
of Double Fine’s games. Overall, though, this project provided me with
an opportunity to
design a site whose layout adjusts for different screen sizes,
and allowed me to apply my design skills, accounting for both
usability and aesthetics, to a real game company.
