LILY UNTERHASLBERGER
  • Work
    • From Fiber to Fray
    • Artonomy
    • EpiPen Redesign
    • Possip
    • TupperWar
    • Data Visualization
    • Daily Logo
    • Studio WIP
  • Contact
  • Resume

Craiglist Redesign

For my Interaction design class we were assigned the monumental task of redesigning a UI that hasn't substantially changed since 1999. A lot has changed since then, and what once was acceptable design for internet users is now outdated as the internet has become tool for everybody and should be designed to reflect that.
Picture

Research & Consumer Testing

For any redesign you must diagnose what was wrong in the first place. I ran two consumer tests. One had used the site previously and the other hadn't. Both were similar in their response: Craigslist's design was too flat, unappealing, and difficult to navigate. One aspect not captured by the user flow chart is stress. While the user could find each tab in a reasonable amount of time, she was overwhelmed by the amount of constant information filling the screen only a fraction of which was useful to her.
Picture

Designing a System

With these complaints in hand I focused on designing a website that
  • Only displayed useful information
  • Had a strong hierarchy
  • More images
  • And clear next steps
I created a lo-fi wire frame and started on my high-fi frames.
Picture
Picture

Adapting for Usability & Accessibility

Here's where I hit my biggest hurdle. My use of color to differentiate the different categories caused issues from a usability stand point. It's hard to make yellow visible on white for even someone who isn't color blind. My Icons were too large and yet my text was too small. Not to mention it was just unappealing. 
Taking these considerations in hand I drastically changed the visuals. I switched to a monochromatic purple color scheme to reference the purple of Craigslist's logo as well as make it more colorblind friendly. I shrunk down the icons and removed the bulky circles behind them. Along with many other small changes. My wire frame stayed mostly intact throughout the process. 
Picture

Final Mockup

While I couldn't make it fully interactive on figma, this will still give you a clear picture for my redesign. If the embedded code below doesn't work here's the link to the prototype https://www.figma.com/proto/pwyAZbGafUcRPzLp2XjRx6/craigslist?node-id=6%3A23&starting-point-node-id=6%3A23 
  • Work
    • From Fiber to Fray
    • Artonomy
    • EpiPen Redesign
    • Possip
    • TupperWar
    • Data Visualization
    • Daily Logo
    • Studio WIP
  • Contact
  • Resume