Case Study:

POC HAUS Website

pochausmockup4.png
 

 
 

My Role

UX Designer, UX Researcher


Team

UX: Crystal Juarez, Kevin Perez

Developers: Daniel Shamany, Devan Terry, Will Hinkelman

Duration

3-day sprint


Tools

Figma, Sketch, Slack, Google Suite

 
 

 

The Project

I took part in a competitive 3-day Hackathon in a team of 6 (3 UX designers, 3 developers). We were tasked with conceptualizing and building a platform that would help promote diversity, equity and inclusion. Our panel of judges featured representatives from Snap and Headspace.

We came up with an idea for a website that would support LA fashion brands owned by people of color to promote economic inclusivity. Our research reflected that large brands with social and economic mobility have been able to succeed in the fashion industry while it has been difficult for low-income people of color to thrive within the field.

 
Screen Shot 2020-03-09 at 10.36.01 AM.png
 

LA is the second largest fashion city in the US, and fashion is the 6th largest industry in the city. With the prominence of the fashion business in our diverse city, we wanted to ensure that companies owned by people of color are able to flourish. Especially now as gentrification displaces countless people in Los Angeles, we want to establish a platform that highlights the importance of people of color in our city.

We named the concept POC HAUS and envisioned a subscription-based site that features a curated, comprehensive listing of local POC designers to a broad audience eager to support and celebrate their work.

Screen Shot 2020-03-09 at 10.35.55 AM.png

UX Challenge

The most limited resource during the Hackathon was time. In less than three days, we had to ideate and design a novel concept and website - and make sure to give our developers plenty of time to build it.

One of our most exciting yet daunting challenges was collaborating from start to finish with developers. We had to consider what was actually feasible for them to carry out with the time crunch.

 The Process

My team took part in a 3-day Agile sprint consisting of researching, designing, and building out the POC HAUS responsive site. We used a Lean UX and mobile-first approach in the interest of time and efficiency. My UX teammates and I collaborated with our developer partners in the research and ideation portions of the process, and our developers likewise included us in their build-out process, negotiating feasibility of our features based on the tight timeline.

Our UX process was based on the British Design Council’s design double diamond:

Research & Empathy

We conducted research through news sources and reports such as the CFDA’s Report on Inclusion & Diversity in the American Fashion Industry that confirmed our suspicion — people of color-owned fashion businesses in Los Angeles and other major fashion cities often faced insurmountable hurdles to maintain a successful brand, often due to racial and socioeconomic inequalities from the top down in the fashion industry.

 
 
 
Screen Shot 2020-04-27 at 12.36.51 AM.png
Screen Shot 2020-03-09 at 10.20.47 AM.png

We interviewed key target users as well as a couple of local POC designers, who showed enthusiasm for our idea. We also asked them about their preferences for the future platform and their business practices. We would have liked to interview a wider array of target users, but our tight timeline limited us to holding just a few brief interviews.

In the interest of time, as we did not have the bandwidth to conduct enough interviews or run an affinity mapping exercise, we created a proto-persona — Michelle — that embodied some of our research.

Proto-persona

Ideation & Design

Armed with a better idea of our target audience, we mapped out our concept for the POC HAUS platform.

We ran a design studio with our developer teammates to brainstorm ideas for the layouts of each major page we hoped to build in the short time allotted. We voted for our favorite features and layouts, and sketched out a final user flow on the whiteboard.

Sketches of POC HAUS page layouts

My UX teammates and I moved on to refine and consolidate these designs into the wireframes of the site, and finally digitizing them. Meanwhile, our development teammates began to work on the basic functionality of the website, including account creation and log-in, as well as cards for the different brands and deals we planned to feature in various sections.

Continually throughout the process, as my UX teammates and I added more features or adjustments, we ran them by our developer teammates to gauge feasibility of these additions.





Medium- fidelity wireframes

While the developers continued working on the site’s functionality, my UX colleagues and I ran a few usability tests as time permitted on our low fidelity wireframes. We quickly iterated upon our findings and moved on to work on finalizing our digital wireframes on Figma. We passed along every final wireframe to the developers to use as their blueprint before the final high fidelity mockups were completed.

We decided to focus our efforts on the phone interface of the responsive website because we took a mobile-first, content-centered approach for our Lean UX process.

Since we envisioned POC HAUS to be a cutting edge platform for a fashionable and trendsetting audience, we knew the high-fidelity design would be an especially important step in the process and tried to allot our time accordingly.

We used bright colors throughout the site’s UI to reflect the vibrant cultures that the brands featured in the site represented.

We passed our designs on to our developer teammates with detailed design specification guides for each page.

ResponsiveMockupPOCHAUS.png

We designed layouts for the responsive site that were intended to fit in with popular fashion brand competitors’ websites, while showcasing a unique edge.

Our landing page featured scrollable full-page shots with information about the site to dynamically educate visitors about POC HAUS.

FInal site mockups

The website features accounts for both customers and businesses.

Customers create accounts to access exclusive discounts, save their favorite brands/deals, and leave reviews.  

I designed the business’ profiles, which business owners can create by signing up for an account.

Business profiles feature their individual branding, personalized details and owner bio’s, in addition to highlights about the company that will catch the attention of today’s audiences, e.g sustainability and local sourcing.

My design for the fashion brands’ pages

We also wanted to feature several browsing options so that users can explore the site and discover new POC-owned companies. These include featuring Deals of the Week, Business Owner Spotlights, Popular Deals, and more.

We were proud to present and share POC HAUS with the panel of judges. Several members of the panel even said they would love for this site to exist and would be eager customers, noting that it is “beautifully designed.” 

While a different team did end up winning, we are delighted with our product and feel it is truly viable.

 Next Steps

  • Design and build the rest of the pages in the website

  • Build out the responsive tablet and desktop layouts of each page, working off of our mobile-first foundation

  • Create individualized brand and deal recommendations for customers, based on data from their purchases, favorites, and browsing history

Reflection

The intense Hackathon process was a unique challenge that forced my team to work as efficiently and smoothly as possible to meet the time constraint. The amount of work we could complete in 3 days was impressive, and yet it quickly became clear that we would not be able to finish half of what we had planned in the beginning. Ultimately most of the pages we designed could not be fully built by the developers because there was not enough time. But most importantly, our UX and programmer sides of the team worked so smoothly with each other and it was a true team effort, with a lot of mutual awe for each others’ work.