S.A.Seronick|Portfolio

design, strategy, code, schtuff

design and development of content, sites, apps, experiences, logos, what-have-you

50 Hours, 8 People, 1 Set of Design Deliverables for a Responsively Designed Site

Highlighted Skills Used:
Workshop and Design Thinking Facilitation
Discount User Research
Journey Maps
Team Management
Information Architecture Design

Context: A Bay Area non-profit sought to support, advise, and guide 18-29 year-olds worldwide who wish to become entrepreneurs. They needed to build a robust online, partially self-serve, partially educational business model builder.

The Challenge: Their current site utilized a Google form for capturing all of the information used to then create a PDF which was manually emailed to the user. It required that the form be filled out in one sitting, and even if you knew all of the terminology and all of the answers to the over 40 questions, it could take over an hour to fill out, without the option to save. There was no 'Help' or user assistance to help with terms and concepts, though there were lengthy examples included, which must be scrolled through to get to the actual question. The form contained no sense of progress within the form, nor was it visually appealing, and it was overly content-heavy. The CEO asked for 'Turbo Tax but for business model building', for his target audience.

Research Gathered/Methods Used: In a three- hour research session with the CEO and a content strategist, the team extracted as much first and second-hand knowledge from the CEO about his users. Interviewing him about his users, we drew out the five key user types from what he told us. He was able to easily think of actual users that aligned with these personas and the team performed structured interviews with him as if he were each of these users. This spawned an exercise in which the CEO then drew 'A Day in the Life' sketches for each of these actual users he was thinking of, and then marked each point of each user’s daily journal as a high point (rose) or low point (thorn).  Thorns were then looked at through the lens of opportunity areas and fed into the initial design process.

Design Process: Patterns emerged around behaviors, backgrounds, motivators, and habits of these users, which were used as launching points for two, two-hour white-boarding sessions with another content strategist. These sessions helped hone the personas. I put together a four-hour ideation and prototyping workshop and four colleagues attended – an interaction designer, a UX producer, a content strategist, and a marketing writer. Guiding them through card sorts, 8-up drawings, affinity clustering, and idea posters, we were able to come up with a basic framework for what this application should include, functionally, as well as how to include it, and the major flows, information hierarchy, and interactions that would be needed to be prototyped.

Facilitating a rapid prototyping workshop with three colleagues (content strategist, UX producer, and marketing writer), we had the CEO and his engineering architect come in and respond to our iterative paper prototypes. Three rounds of prototypes later, we had a direction for the maker session in order to create deliverables. The day-long maker session included a content strategist, writer/visual designer, and interaction designer. Working together, we built a site map, created wireframes and interaction rules, and built a tone and style content guide, as well as a style guide, which included fonts, colors, and a full set of icons. This resulted in the three deliverables which were sent to the client the following week.

Result: Had the team that built this set of design deliverables not been donating their time, this project could have cost this non-profit client upwards of $90,000. As the site is currently in production, I cannot yet speak to the results of our designs, nor to the success of the site.

Measurements of Success: To be updated.


User Flow, Diagram, and Wire Frame for eCommerce re-design

Highlighted Skills Used:
Retail and Non-Profit Strategy
A/B Testing
Interaction and Visual Design
Information Architecture

After some initial user testing it was determined that the site needed a re-skin and some tweaking to the user flows. The site had grown to include so much information that the navigation had become cumbersome and difficult to use, particularly on mobile devices.

I created these sketches and low fidelity wire frames, and re-organized information and the navigation as well as the flow of products to allow for fewer, shorter navigation terms; all of which resulted in faster page load times and a more usable mobile experience.