DONO

Research & Discover

Outside Research

We began our research studying our target audience to understand their importance to the the economy overall. In our meetings with stakeholders, we found that the largest portion of the audience was of ages 18-38, which included millennials and generation z. Researching the values and population statistics of these demographics revealed some staggering numbers, which told us the significance of this audience, their values & potential impact on the business. We would use this information to further define the scope of the project & the direction our solution would take.

Heuristic Evaluation

To determine what was working & what needed improvement, we conducted an audit of the current site and evaluated its usability through heuristics. Much of the site lacked relevant information & resources to help users make informed decisions - something to be addressed in our solution.

Constraints

In meeting with the stakeholder, we were informed that the development of a native mobile app had been on the table for some time. Because of a lack of bandwidth and the current business climate due to the pandemic, this was no longer a feasible solution for DONO. In conjunction with a Shopify subscription that had been purchased for the coming year, this directed us toward ideating on a desktop-based solution. Research into the Shopify platform, including what themes and plugins were currently used by the site as well as what was available, gave us insight into the constraints of the templates and themes we were limited to. With a bare-bones crew lacking a development team, DONO was interested in as little customization through coding as possible, with the solution being easy to implement.

Analytics

A review of the site’s current and past analytics showed us how its audience used the site and key areas that needed to be improved. Conversion rate was low and bounce rate was extremely high. Nearly all of the site’s traffic came from social media, proving the importance of DONO’s presence on these platforms. Additionally, we could see a 22% drop in access of the site from mobile devices over the past few months. Because of this, we would focus our efforts on a desktop-centered solution.

Competitive & Comparative Analysis

A review of competitors showed us trends in the market, not just among features but also aesthetics. Features and mission statements varied, but the use of hero images and calls-to-action were consistent across the board to give users incentive to navigate further into the sites. Additional comparative analysis was conducted on various other Shopify sites to further understand the constraints of the platform & what options were available to us for our design decisions. We also looked into what conventions existed among these e-commerce sites and how they responded to mobile. We would use this data as a resource to validate our decisions down the line.

User Interviews & Persona

From prior research into our target audience, we knew the age range of our interview subjects. In additional meetings with the stakeholder, we were directed to focus on women in our interviews. Screener surveys helped us to recruit interviewees who met our demographic criteria and had interest or experience supporting causes and procuring exclusive content, in-line with DONO’s mission offering “authenticated items” promoting “authenticated impact.” Also in-line with DONO’s goal to include live stream events in the near future, we expanded our survey to find interviewees with experience viewing or purchasing items in this arena.

Nine users were interviewed in total - three men and six women. Interviews were transcribed and insights were arranged into similar groupings to reveal values, struggles and opinions, which would further define our solution. A portion of each interview included a task analysis of the current site, in which participants were asked to navigate the current site & discuss the highs and lows of the process. This offered us further insight into our audience’s needs and pain points. Commonalities among interviewees were compiled into a single persona to give us a clear focal point for our audience and their goals.

Customer Journey Map

Results of task analyses were compiled as well to represent Adella’s thoughts and feelings as she navigates the DONO homepage. The resulting journey map was used to highlight which areas of the site were done well and which should be the focus of our solution.

Problem & Hypothesis

With our persona Adella and her journey fully fleshed out, we were ready to articulate the problem at hand through clearly defined statement:

• Adella needs a better way to find and regularly support causes in her community because of a lack of context and transparency around charities and the impacts they have on the community at large.

This statement led us to ask the following questions to direct our solution:

• How might we allow Adella to see her impact in a positive, tangible way?

• How might we incentivize Adella to continue giving?

Based on these statements, we arrived at the following hypothesis:

• We believe that through more informative and transparent platform, we will allow Adella to feel confident in her decision to support causes and continue to do so.

Ideate & Design

Goals, Features & User Flow

To make sure our solution was addressing all the necessary points, we listed out Adella’s needs & DONO’s goals to find the intersection of the two. An affinity map of our client meeting was compiled to further articulate the business goals. Diagraming these goals and needs showed us what success would look like from all sides.

With our goals clearly defined, we were ready to decide what features to include in our solution. These were broken down into what must be included, what should be included, what could be included, and what wouldn’t be included.

During Adella’s journey through DONOnow.com, one of her main pain points was the lack of an About section where she could look up more information on DONO, how they help causes, and how she can have an impact. The sitemap would be kept the same as it was clean and concise, but the addition of this About section would be an important part of reducing the bounce rate of visitors. We decided this would be the main call-to-action on the homepage and designed our user flow around our prioritized features.

Design Studio

Keeping our goals and features top-of-mind, we set off on designing. The team held an extensive design studio session to implement quick, frequent spates of creativity. The resulting sketches were based off of our prior research, including heuristic evaluations and C&C analyses.

Wireframes

Design studio sketches were scanned and refined digitally to give us a rich pool of options for developing a prototype. As a team we chose our favorite designs and explained our reasoning. Once a consensus was reached, we began implementing these designs, highlighting our key features, into a grayscale prototype for testing.

Test & Iterate

Usability Testing

With our prototype complete, we were ready to test the design decisions we had made. Five participants were recruited for testing. To put participants in Adella’s shoes, we developed a testing scenario typical to her lifestyle:

• You’re finally home after a long day at work and you’re unwinding on the sofa with your laptop, catching up on your Facebook feed. You see a post someone shared from an organization called DONO, highlighting a charity promoted by a celebrity. Your interest is piqued, and you decide to go to the DONO homepage.

Our prototype was developed to give Adella the information, transparency, and therefore incentive she needed to make informed decisions to support DONO. Much of the copy, however, was taken directly from the site in its current state, which users found inadequate in testing. Additional copy and information would need to be added to ensure DONO’s success in achieving its goal of motivating Adella to support on her current and subsequent visits to DONOnow.com. With these additions and amendments, we were ready to make iterations on our final high-fidelity mockup.

High-fidelity Mockups

A new dynamic layout was utilized to reduce the inconsistent white space and convey important information to Adella visually; this included new hero images and calls-to-action on all relevant sections of the site, most importantly on the homepage to draw Adella to our newly added “About DONO” section.

Additional copy as well as various artifacts and infographics were created; copy was written in the voice of DONO, which would be established through further interpreting the map compiled of our stakeholder meetings on goals, values and company mission. Data behind the artifacts and infographics was found through researching the organizations partnered with DONO, which provided rich, compelling information to further incentivize Adella to support the causes at hand, achieving DONO’s goal of lower bounce rate and higher conversion rate.

Among the additional artifacts were a content calendar and timeline, which would help DONO achieve its goal of encouraging users to return to the site through showcasing upcoming campaigns and ways to support. A timeline of charities’ past and prospective endeavors would give Adella the information and transparency she desired without having to leave DONOnow.com. With these revisions and redesigns, DONO was given the facelift it needed to stay relevant and compelling to its audience in an evolving market. Negative aspects of analytics were addressed, user pain points found through research were amended, and our redesigned site - with decisions validated through research - would keep DONO’s mission to have an authentic impact front and center while remaining a fierce competitor in the market.

An addition mockup was created to show how the site would respond to a mobile device, which was designed according to research done into the constraints within the Shopify platform.

Desktop & Mobile Prototypes

Reflection

Next Steps

The next steps for DONO would be implementing our redesign. A style guide was provided to show the color palette, typography, heading & body copy size as well as button and image dimensions. Our prototype was designed to be compatible with various Shopify themes with minimal customization or coding needed. A list of these themes was compiled and added to our client’s appendix of resources and artifacts. Additionally, a list of suggested plugins and apps for Shopify was provided, which would allow DONO to integrate features such as content calendars and Instagram stories. Research into potential Twitch integration was conducted and presented as well, with options and instructions as well as examples of the coding necessary to embed these features when the company was ready to implement this into the site.

What I Learned

Not only was this project an amazing and enlightening opportunity to work directly with a client to understand and meet their needs, but an incredible chance to develop my project management skills. I was really able to grow as a leader as well as a designer and researcher, and had to keep the goals of the business top of mind while solving the problems of our target users. It was a wonderful experience to learn to effectively articulate needs and meet them in a creative way.