Combining User-Center Design Process with Design Thinking Mindset

To successfully complete this project, I integrated the Design Thinking mindset into the User-Centered Design (UCD) process.

Synthesized research data to identify actionable key points.

I spent two days analyzing the research data provided by stakeholders, synthesizing it into actionable insights that enhanced my understanding of user needs and informed the ideation of effective solutions.

The absence of a dedicated platform connecting consumers with local businesses leads to several challenges for consumers when shopping.

To address these issues, I employed the Affinity Mapping method to synthesize the data into themes, as shown below:

Through this analysis, I identified 4 key factors/ themes that could alleviate consumer pain points and encourage engagement with a local shopping platform:

These are highlights of consumer pain points & needs…

By focusing on these areas, a local shopping platform can effectively address consumer challenges and promote a more sustainable and connected shopping experience.

Mapping the end-to-end experience users will have when shopping via El Locale.

To jump right into imagining possible solutions, I draw a map of possible end-to-end experiences users will have when using the app. The user journey map helped me focus on the most critical parts of the user experience I wanted to improve.

How might we make it easier for consumers to shop locally and support local businesses and artisans?

To address the main question, I concentrated on the most critical aspects of the user experience identified through research data analysis and organized the problems into four themes:

Developed sketched wireframes as lightweight, low-fidelity representations of the design

To expedite the creation of high-fidelity screens in the project’s first week, I opted to forgo digital grayscale wireframes. Instead, I produced high-fidelity sketches that functioned as lightweight sketched wireframes, incorporating my solutions and all necessary UI elements. This approach allowed me to transition directly from sketches to designing high-fidelity screens.

In this project, I conducted the sketching and high-fidelity screen creation phases in parallel. Specifically, I sketched each page or flow, then developed it into high-fidelity digital screens before repeating the process for the next page or flow.

My sketches encompassed the 11 pages and flows I was working on:

I proposed creating a dedicated UI Style Guide and component set for mobile to ensure Consistency

In the project’s first week, each team member was tasked with submitting at least one high-fidelity screen to provide stakeholders with insight into our work. Although a UI Style Guide existed for the desktop version, I observed that additional styles for fonts, icons, and buttons were necessary. Given that this was a team effort, with each member responsible for different screens and working remotely, maintaining consistent design rules was crucial for the mobile version. As the team lead, I recognized the importance of a cohesive app design across all screens. Consequently, I proposed creating a dedicated UI Style Guide and component set for mobile, which received stakeholder approval.

The final Mobile UI Style Guide

I also suggested changes to ensure compliance with WCAG contrast standards for better Accessibility

While working on the Business section pages, stakeholders proposed using gradients of the primary color (#FFBB11) as the background color to distinguish them from the white backgrounds of the Consumer screens. Although I agreed with the concept, I was concerned that applying such a bright, attention-grabbing orange-yellow across large areas might overwhelm users during extended use. To address this, I recommended softer pastel yellow shades and suggested 6 options that complemented the primary color while ensuring compliance with WCAG contrast standards. The stakeholders adopted my suggestion, and the background color #FFF5E1 was implemented across all business screens in the app.

Another example of my suggestions was changing component colors to comply with WCAG contrast standards. We worked on many changes like this.

I made the necessary changes to UI elements to ensure compliance with popular design guidelines for better accessibility.

A typical example was the redesign of the Header & Footer:

My design for the Header and Footer was applied across the entire app.

Now comes the fun part! Using Figma, I created high-fidelity screens for the El Locale app. Upon starting the first screen, I noticed multiple versions of the header and footer for both desktop and mobile, with stakeholders seeking improvements. Recognizing the importance of these elements across all screens, I prioritized redesigning the Header & Footer before proceeding with my assigned pages. My design was approved by the stakeholders and adopted for the app, as it best aligned with the project’s goals and user needs.

In our team, there was a suggestion to remove the search bar from the header and place it only on individual screens requiring the search function. However, I insisted that the search bar is crucial in the header for several reasons. My argument persuaded the stakeholders, and my solution was adopted.

My final Header, Footer & Hamburger Menu designs

Transformed my solutions into stunning digital interfaces.

Building upon detailed sketches and the Mobile UI Style Guide, I developed high-fidelity screens, consistently focusing on user pain points and needs. This approach ensured solutions addressing 4 key problems:

1. Easily finding local products and businesses
2. Understanding their values
3. Quickly checking out
4. Feeling good about supporting the local community

To maintain visual consistency across the product, I also organized weekly team meetings, ensuring all members’ high-fidelity screens aligned seamlessly.

Adapted to the expanded project scope during the final week.

Throughout the design process, I proactively developed prototypes for the flows and pages under my responsibility. For example, I created small prototypes to demonstrate the functionality of the hamburger menu, the login/signup process, the pickup order flow, and the sticky call-to-action buttons on certain screens. However, developing interactive prototypes was not initially included in our team’s project plan.

In the final week of the project, there was an unexpected change. While our team had planned to review all 44 pages and flows to ensure design consistency and address any gaps, the stakeholders requested interactive prototypes for the major user flows of the product, which was an addition to the original scope. Given the limited timeframe and the absence of comprehensive information architecture and user flow maps from the research phase, building a complete prototype for the entire app would have been challenging. However, since the stakeholders were interested in small prototypes for key user flows, I found this request reasonable.

As the team lead, I promptly organized a meeting to discuss this additional scope and ensure alignment among all team members. We collectively decided to undertake this task. Our efforts in addressing the expanded scope were highly valued by the stakeholders and significantly enhanced the project’s outcomes.

Task success rate: 100% – Minor issues identified.

The last step…

After finalizing and obtaining stakeholder approval for the designs, we handed off all materials to the stakeholders and developers through a final presentation, accompanied by a Figma file and other related documents.