Mercedes-Benz Canada

Redesigning the Mercedes-Benz Financial Services page

 

Overview

During my Spring 2018 internship at Mercedes-Benz USA, I was tasked with supporting the NAFTA OneWeb team with migrating content from the existing Mercedes-Benz Canada customer-facing website to a new platform using Adobe Experience Manager. I redesigned a total of 8 pages, the most extensive of which was the Mercedes-Benz Financial Services (MBFS) Canada page.

 

Background and Research

I began my project by completing an audit of the existing MBFS Canada page. After clicking through the landing page and its child pages, I created a page flow or map of the existing page. We couldn’t believe that the landing page linked to 29 separate pages or documents, and many of them were duplicates.

MBFS_page-flow.jpg
 

Design Process

New Page Outline

After completing the audit, I created a new hierarchy for the MBFS page. I made assumptions for the placement of information based on the audit and on preliminary feedback I received from our business partners in MBFS Canada.

 

First Design Iteration

Using my new outline, I took a stab at the initial design after sketching out wireframes on paper. Because the layout was so content-specific, I decided that it would be best to create a high-fidelity mockup before bringing it to my manager and team for further feedback. Unfortunately, my first iteration didn’t even make it past the first five minutes of our design review.

“It’s too much information for one page.”

They were right—I had condensed all 29 pages of information into one long, scrolling conglomeration that presented the information in a way that was just as confusing as the original design.

 

Second Design Iteration

Taking feedback from my team, I started on a second iteration of the design. I went back to the original page flow and new hierarchy and started over with organizing the information.

IMG_6368.JPG

Thus, I broke up the design into six separate pages, including the landing page:

  1. Landing Page

  2. Leasing Options

  3. Financing Options

  4. First Class Protection Products

  5. Customer Resources

  6. About Us

 

Reflection

After refining the second iteration, I had the amazing opportunity to travel to Mercedes-Benz Canada in Toronto, Ontario, to run a workshop on the new MBFS designs with our MBFS Canada business partners. I learned what it was like to present designs and justify design decisions to a non-designer audience, and I gained valuable feedback for a final iteration of the pages. Overall, I learned how to effectively audit an existing product or page and maintain the integrity of content while maximizing new components. The process was time-extensive but definitely rewarding.

My updated page designs are now live on the Mercedes-Benz Canada website, and you can view them here.

TopPick

Continuous user experience and user interface improvement

 

Overview

TopPick is an online platform that serves as a Candidate Relationship Management system for Talent Acquisition teams, recruiters, and sourcers. TopPick aims to meet recruiter’s needs during the hiring process, providing a seamless and integrated method for gathering and batching candidates in a centralized, organized fashion. TopPick is comprised of the candidate relationship management software, allowing recruiters to communicate with candidates directly through the platform, and also allows recruiters to digitally screen candidates via the digital interview platform. My role was to design new features that had not yet been visually designed or functionally implemented. Additionally, I was tasked with translating user data, gathered by my colleagues, into web interface designs, which I took to our software engineers for implementation.

Check out TopPick.

Weather Channel App Redesign

For my User Interface Design class (CS 3750), we were instructed to find a problematic user interface and create redesigns to address those user interface problems. I chose the Weather Channel app, because it presented some problems with discoverability, signifiers, and information overload. Below are my redesigns, mocked up using the iOS app Inspr.

launch.PNG

Launch Page

Improved first launch experience. The dots represent a feedback animation feature, letting the user know that the app is loading. The previous design did not provide any feedback for the user while launching.

hourly.PNG

Hourly Weather

Improved signifiers. The user clearly knows which forecasting section they are currently in, indicated at the top by "Hourly" or at the bottom of the menu, where the selecte

today.PNG

Home Page - Current Weather

Quick navigation. There is now a menu at the bottom of the screen with different forecasting options; the previous design did not show allow the user to quickly navigate to any of the other options.

daily.PNG

Daily Weather

Improved signifiers. The left and right arrows at the top module suggest that the forecasts are displayed in a carousel module, affording horizontal scrolling clearly marked by the arrows. The user can also see more information about two daily forecasts in the lower module, beginning with the selected day (marked by an opaque-white highlight in the top module).

dropdown.PNG

Customizable Locations

Quick navigation. The user can quickly navigate between their saved cities, or add a new one by clicking the search icon. They can also see the current temperature in each of their saved cities without clicking on them.

sidebar.PNG

Features Menu

Improved navigation. The hamburger icon lets the user know that there are more features and settings in the app. This secondary menu shows various features separated by relevance.

Preparona Barcelona

For my User Interface Design class (CS 3750), we were tasked with creating a solution for people traveling to Barcelona for an extended period of time. After requirements gathering and seeing what Barcelona travelers' frustrations, needs, and conveniences were, my group decided to create a planning-aggregation website, where travelers may combine all of their trip-planning materials into one accessible place.

First Iteration

Below are the mockups for the first iteration of the prototype. There are multiple problematic features of this prototype, and we addressed these issues in our following iterations.

mockup1-01.png
mockup1-02.png

Second Iteration

Below are mockups of the second iteration of the prototype. Here, we attempted to address the interface issues we discovered in the first prototype, and we used this version for our evaluation by cognitive walkthrough and heuristic evaluation, performed by another team in the class.

mockup2-01.png
mockup2-04.png
mockup2-02.png
mockup2-05.png
mockup2-03.png

Third Iteration

Below is are sample changes in our third iteration of the prototype. We discovered a few more issues in the second prototype after evaluating, so we decided to address these issues before performing our two user studies.

mockup3-01.png
mockup3-02.png
mockup3-03.png
mockup3-04.png
 

Graphic and Visual Design

Projects exploring different aspects of and concepts in visual design for Principles of Visual Design course

 

Personal Logos

We were tasked with creating a logo that integrates our full name into a unified whole using typefaces and graphic enhancements.

logo-01.png

Flamingo I

When I was younger, my peers used to call me "Beatrice Flamingo." Using this nickname as inspiration, I began my first iteration of my logo. Intending to keep the design simple and scalable, I refrained from adding details to the design.

logo-02.png

Flamingo II

Following the first iteration of the flamingo, I decided to change the type face and add more details to the flamingo. While this version is not scalable as a logo into smaller dimensions, it incorporated more playfulness in design.

logo-03.png

Frames

I chose to use a pair of glasses in another iteration of my logo design because my clear frames is often a conversation-starter. The muted pink and oversized, imperfect shape of the frames are more indicative of a brand identity than the actual frames.

 

 

Black and White Composition

 Water Droplet, using rhythm and balance.

Water Droplet, using rhythm and balance.

 Girl Saluting, using figure-ground composition.

Girl Saluting, using figure-ground composition.

 Jagged, using rhythm and repetition.

Jagged, using rhythm and repetition.

 Birds, using rhythm and emphasis.

Birds, using rhythm and emphasis.

 

 

Photography

We were instructed to choose our favorite song or poem and create and capture photographs that somehow represented the words or lyrics visually. I chose "Gold" by Penny and Sparrow.

Pulling my clothes, none of which fit

Bringing back us meeting as kids

Covered up red, figured our fame

Honor your death making my name

All of my guilt and the way that I'm built

I don't sleep so well

All of that hope, the end of a rope

Swinging on cue, I'll be mimicking you

And the way you felt

When I know what you know, it's an easy let-go

Covered in gold, forgetting my skin

I recall you, I recall when

Pulling your shirt up over your head

Laughing, gets stuck, gets stuck in bed

All that I do is a shadow of you

And the light you make

I'm turning my face away from the shade

Swaying on cue, I'll be mimicking you

And the way you shake

You're a difficult love, I'm a narrow escape

All that I do is a shadow of you

And the light you make

I'm turning my face away from the shade

Swaying on cue, I'll be mimicking you

And the way you shake

You're a difficult love, I'm a narrow escape

Covered in gold, forgetting my skin I recall you, I recall when

I wanted to capture the feelings that I believe are associated with the song, “Gold”, by Penny and Sparrow. I don’t know what message the artist intended to convey with this song, but I feel wistfulness and nostalgia when listening to this song. The lyrics convey much of this feeling, but the soft tones of the music complement and contribute to the feelings as well. The gold tones in the photographs directly mimic the lyric: “Covered in gold, forgetting my skin.”

I shot these photographs at sunrise to give a sense of contemplative calm before the day awakens and to allude to the lyric: “All of my guilt and the way that I’m built I don’t sleep so well,” with the assumption that thoughts and memories are keeping the artist awake until sunrise.

The smooth contrast of the shadows and bright spots in the second photograph represent the lyric: “All that I do is a shadow of you And the light you make I’m turning my face away from the shade.”

PBD_lmc2720-3.jpg

Assuming that the song was written for a once-loved one, I photographed my roommate in a contemplative state to emulate the artist’s lost love.

All of the photographs have some sort of reflection in them: the first photograph shows a horizontal reflection of the buildings, the second photograph shows the reflection of a room in the balloon, and the third photograph shows the reflection of the sunrise in the office building in the background. Using a glass prism to capture these reflections, I chose reflection as a theme because of the lyric: “Swaying on cue, I’ll be mimicking you.”

I also think that the reflection shows a look into the past, representing nostalgia and wistfulness, “I recall you, I recall when,” but also shows a reflection of the current environment.

 

 

Print Design I

We were given a plain text document with standard copy and no visual instructions other than “make this into a spread with facing pages.” I chose one serif typeface to create a uniform, formal design but introduced jagged, diagonal color swatches to make it feel more approachable.

domingo_grid12.png
 

As a follow-up project, we were given another set of copy along with images. Based on the amount of copy and images we were given, I decided to create a magazine-inspired spread. I used the same serif typeface for heading, subtitle, and body copy, but I used a sans serif as the quote font along with bold, playful colors and shapes to cut through the dense text.

 

Print Design II

domingo_grid24.png
domingo_grid22.png
 

 

Abstract Color

Color Composition-02.png
Color Composition-01.png
Color Composition-04.png
 

 

Digital Collage

collage_domingo-01.png

Technique Website Redesign

User research and continuous design improvement

 

Overview

Hosted on WordPress, the existing website of the Technique, Georgia Tech’s student-run newspaper was simple yet functional, but the organization of articles within sections was haphazard. There were fun photo stories and special articles that were featured in the print newspaper but had no place online because of the lack of infrastructure to support anything that wasn’t a regular 400-word article with a single photo.

 

Research and Background

We conducted two different user surveys in Spring 2017 and in Fall 2017 to determine the preferences, profiles, and goals of our online readers. We also wanted to know whether there was higher readership online or in print, because a low online readership would render a website redesign as useless.

We found that most of our readers are online, use desktop for reading, and usually end up on the website to read a single article (usually shared with them on Facebook). The most-read sections based on the survey were News and Opinions.

 

Users

One of my team members created personas for user flows:

Name: David Wong

Description: GT Undergrad/General

Flow: Wants to read baseball preview before the upcoming season >> visits homepage >> clicks on sports section to find baseball preview >> scans the story list for “baseball” until it jumps out at him >> clicks on article >> reads article >> navigates to another webpage and closes out tab with nique.net

Name: Olivia Vargas

Description: GT Graduate Student/SGA Senate Member

Flow: Sees Technique Facebook post of editorial criticizing recent SGA initiative >> clicks on link >> link opens to editorial in new tab >> reads editorial and becomes slightly irritated because she disagrees >> closes out tab >> leaves comment on Facebook post disagreeing with editorial and giving SGA’s point of view

Name: Marcus Rodriguez

Description: GT Staff Member from Student Center

Flow: Occasionally picks up paper because he sees it on newsstands around Student Center >> liked the Technique on Facebook >>  comes across article about new movie with actors he’s interested in >> clicks link >> skims first two paragraphs of article >> closes out tab and returns to Facebook browsing

Name: Caroline Baker

Description: Faculty

Flow: Liberal arts professor who supports student journalistic efforts >> more old-fashioned, picks up the physical paper >> likes the page on Facebook >> sees article about liberal arts students >> clicks article >> reads the entire thing and sees other articles at the bottom >> skims a review but is mostly interested in Life articles >> closes out tab when done

Name: Charles “Chuck” Stephens

Descriptions: Parent

Flow: Has a son interested in being on the baseball team >> reads the GT athletics page >> Google searches one of the players and comes across Technique article >> reads Technique baseball season preview >> skims first couple paragraphs for information >> closes tab

Name: Palavi Iyer

Description: student from other schools

Flow: Is looking for a school with a good BME program to transfer to >> also has interest in photography >> likes Georgia Tech engineering program, searches for newspaper >> comes across nique.net in Google search >> clicks through stories specifically for photography, doesn’t read articles deeply >>  closes tab after browsing

 

Design Process

SKETCHING

After creating our personas and digesting the data from the user surveys, we drew out some (rough) sketches on the whiteboards in the corner of our newspaper office. We divided up the sketches into three main sections: homepage, section page, and article page.

 

Wireframing

After sketches, we divided up the work between three designers to create low to mid fidelity wireframes digitally. We used Illustrator for these. Below are a few of the wireframes I created for the home page for desktop and mobile.

 

Mockups

This phase of our redesign is in progress, because we’ve reorganized the workflow to an Agile process so we can continuously validate our design decisions as we implement them instead of delivering the finished products to our readers before testing. We were also driven to make the switch because our team has been reduced down to three people—two developers and one designer—and all three of us also have other responsibilities on the newspaper staff.

Below are three first drafts of higher-fidelity mockups of the home, section, and article pages. I chose to design these in desktop only, since most of our readership is on desktop. As we continue to iterate through the redesign, we plan to eventually optimize for mobile and remain open to validations and invalidations of our design decisions.