21
CARLY BRUCE [email protected] | 858.229.0169 User Experience Designer. Interface Choreographer.

Carly Bruce User Experience Portfolio 2015

Embed Size (px)

Citation preview

Page 1: Carly Bruce User Experience Portfolio 2015

CARLY BRUCE

[email protected] | 858.229.0169

User Experience Designer. Interface Choreographer.

Page 2: Carly Bruce User Experience Portfolio 2015

About Tools Process Case Study Contact

Contents

Page 3: Carly Bruce User Experience Portfolio 2015

I am a User Experience Designer trained in all things UX, although I focus on interface design, interaction design, and information architecture. Projects that I create are user-centered and built upon research with a solid foundation of design principles.

About

Before pursuing design as a career, I was a ballet dancer with companies in Omaha, San Diego, and Pittsburgh. Through ballet, I learned at a young age that hard work and nearly endless hours go into making something look beautiful and effortless, so it is important to tackle any challenge with an intelligent strategy. Today, I apply this philosophy to my digital designs to create products that are usable, functional, and beautifully effortless.

When I’m not working on a design project, you might find me tinkering with HTML and CSS, stand up paddleboarding, meandering through a museum, or trying a new vegetarian recipe.

Page 4: Carly Bruce User Experience Portfolio 2015

Tools

Primary

Secondary

Page 5: Carly Bruce User Experience Portfolio 2015

Process

I employ a thorough, yet efficient, process that ensures a thoughtful and usable solution to any project I work on. This process allows me to take a project from ideating, researching, and strategizing to designing, testing, validating and delivering. It is important to note that this is a flexible process. Some areas may be require more focus than others, depending on the project, and I am always an advocate for iteration.

BackgroundResearch

InterviewsContextual Inquiry

Competitive AnalysisHeuristic Analysis

Synthesis & Strategy

Project ScopeFeature Prioritization

Information ArchitectureContent Strategy

Design& Build

Rapid SketchesWireframes

MockupsPrototypes

Validation& Delivery

Usability TestsIteration

AnnotationsTest Reports

Page 6: Carly Bruce User Experience Portfolio 2015

ProcessBackground Research

Each project begins with a discovery phase. This phase, depending on the stage the product is in, contains a number of

steps. Typically, background research consists of getting to know as much about a product and the space it is in as possible.

Interviews with stakeholders and existing or target users are conducted. It is also important to research how similar products

and companies are implementing their own solutions.

Page 7: Carly Bruce User Experience Portfolio 2015

ProcessInterviews | Contextual Inquiry | Competitive Analysis | Heuristic Analysis

Surveys are sent out to collect initial data and recruit people to interview.

Competitors and comparable products are analysed to find new opportunities and to understand what people already know how to use.

Trail SearchResults

TrailProfile

PhotoFeed

UserProfile

TrailReviews

Trails

AllTrails

MyMapHike

Yonder

Survey takeaways and interviewing a user

Competitor feature and layout analyses

Page 8: Carly Bruce User Experience Portfolio 2015

ProcessSynthesis & Strategy

With the initial research completed, it is time to digest all of the information. Thoroughly synthesizing and organizing the amount of data that comes out of the research phase can be daunting, but it is incredibly

important to fully understand the information. This allows for more intelligent decisions to be made about the scope of the project and strategy

moving forward.

Page 9: Carly Bruce User Experience Portfolio 2015

ProcessProject Scope | Feature Prioritization | Information Architecture | Content Strategy

Personas are created to help keep the focus on the research instead of assumptions when making design decisions. Based on the personas, features are prioritized to help them best meet their goals.

Page 10: Carly Bruce User Experience Portfolio 2015

ProcessDesign & Build

In the design & build stage it is time to bring the research to life by thinking through how the product will actually look and

function. Ideally, this is a highly collaborative stage so that many ideas can be fleshed out as quickly as possible. Core, prioritized features and flows are worked through first at

various levels of fidelity which are then turned into prototypes.

Page 11: Carly Bruce User Experience Portfolio 2015

ProcessRapid Sketches | Wireframes | Mockups | Prototypes

Collaborative design studios are conducted to produce rapid sketches or whiteboard sessions of core pages. Paper prototypes are then sometimes built to test general element arrangement and flows. Afterwards, higher fidelity wireframes are built to create clickable prototypes for testing.

Both the visual and copy fidelity of this page increased throughout the design process.

Page 12: Carly Bruce User Experience Portfolio 2015

ProcessValidate & Deliver

Getting designs in front of real people is the best way to validate decisions. Findings from usability tests reveal so much that is then able to be iterated upon. These findings

are delivered with annotations and test reports.

Page 13: Carly Bruce User Experience Portfolio 2015

ProcessUsability Tests | Iterations | Annotations | Test Reports

Test plans help to keep each test’s data as unbiased as possible by facilitating tasks for testers in the same format each time. Notes can quickly be taken during each stage of the test. Annotations are used to synthesize test findings and deliver them in a clear manner. Annotations are also used to describe features, elements, and interactions in an interface.

Page 14: Carly Bruce User Experience Portfolio 2015

Case StudyTexts.com

View Clickable Prototype

Page 15: Carly Bruce User Experience Portfolio 2015

OverviewTexts.com Case Study

2.5 weeks 3 designers

Timeline Team

Managed the projectPrepared survey and interview questionsPrepared test plan for existing siteDeveloped and tested new sitemapBuilt medium fidelity wireframes Built a clickable prototypePrepared test plan for my team’s designConducted usability testing

My ResponsibilitiesResearch ReportInterview findingsUsability takeawaysCompetitive analysisSuggested features

DesignSitemapUser FlowsWireframesClickable Prototype

Deliverables

Texts.com facilitates textbook buying and selling between students on campus and between students and online vendors. Textbook prices have increased a whopping 812% in the past 30 years and 80% of the market is controlled by just four publishers. They are determined to keep prices high, so Texts.com offers a cheaper

alternative to college students.

The Opportunity

Page 16: Carly Bruce User Experience Portfolio 2015

ResearchTexts.com Case Study

Our UX team was brought on board after Texts.com was fully functional, but had not gone through any research or usability

processes, so the first task was to understand the existing product. We conducted interviews with stakeholders and also watched college students interact with Texts.com. This allowed us to define the scope

and strategy for how our team would approach this project.

The Challenge

Initial Research Takeaways

Increase sign-ups and click-throughs to affiliate buyers

Improve Texts.com’s learnability and recall

Discover new features that could be implemented

Stakeholders

Buy books and cheaply as possible

Sell books as conveniently to themselves as possible

Didn’t understand the dual marketplace that Texts.com provides

College Students

Page 17: Carly Bruce User Experience Portfolio 2015

StrategyTexts.com Case Study

Research findings, partnered with takeaways from competitive analysis, led our team to focus on restructuring Texts.com’s information architecture.

Texts.com’s previous sitemap. Almost every action was accessible from every page which may sound convenient in theory, but actually confused users. They would get lost or frustrated within a flow and want to leave the site.

My team’s sitemap as of the end of this project. By splitting up the website’s main features (buying and selling) right from the primary navigation, users began to work through the site at a much quicker and more successful rate.

Part of this process was to visualize Texts.com’s current sitemap and userflows. The final proposals were informed by findings from testing the current site and analyses of competitive and comparitive services.

Page 18: Carly Bruce User Experience Portfolio 2015

Strategy Cont’d.Texts.com Case Study

Texts.com’s existing user flow for buying a book from another student. This flow was convoluted and even forced the user to search for the same book at two different points.

Proposed flow for buying a book from another student. This flow enables a user (who isn’t signed in, at first) to go from searching for a book from the homepage to contacting a student who is selling the book in four (4) less steps than before.

Page 19: Carly Bruce User Experience Portfolio 2015

Design & IterateTexts.com Case Study

Once the group was comfortable with the new user flows and information architecture at a conceptual level, it was time to begin the wireframing process which would help reveal any holes and enable us to test whether our proposed structure would help students complete their goals on Texts.com.

One of the more central pages on Texts.com is the product page for the textbooks, so my team made sure to focus heavily on this page.

Before: Students did not realize that they could login to see if any students were selling at their school (red). They also didn’t know that they could interact with the chevron icons (green) to reveal more information about a particular listing. Perhaps the biggest issue in this version was that student’s didn’t know what to expect when selecting “open” (blue).

After: The split modules were made into one module that students no longer glanced over (red). The “more info” buttons made it clear to students that more information was available (green). Finally, more appropriate terminology replaced the vague “open” buttons (blue) that helped students understand what they were interacting with when clicking there.

Page 20: Carly Bruce User Experience Portfolio 2015

ReflectionTexts.com Case Study

This was an amazing opportunity to get to work with a real client. Texts.com developers immediately began implementing my team’s findings and I have even joined the Texts.com team on a freelance basis to continue working on their products.

If I had the opportunity to start this project all over again, I would involve the Text.com team in our process more (and more often). As a designer, it is incredibly beneficial to have a product’s developers working alongside you.

I also learned that giving context to users is equivalent to giving power to them. Your team may design the most intuitive flows and interfaces, but if there is an absence of context your users are going to struggle.

My team with the CEO and developers of Texts.com