TIMELINE: 2 Weeks, Winter 2020
Product Design, UX/UI Design
TOOLS USED: Figma, Photoshop
As a part of a design challenge, I decided to redesign UO Community, a platform for the UO community to tell their stories. They describe it as,"as a destination that fosters growth of our community and highlights everything we love about Urban Outfitters' brand and customers". However, going on the landing, I noticed that it doesn't exactly exemplify their mission. While the webpage is nicely designed to an extent, I figured there are changes that could be made to make it more user friendly and give it that "community" feeling.
How can users be more active on the platform and feel like they have role in the overall community?
First, I analyzed the areas of UO Community that need improvement. I identified some key issues:
Overall, the community is pretty missable from their website. There needs to be a way to make it more engaging with users and make them want to go to the community page, instead of stumbling on it like I did.
In order to start designing, I wanted to get a grasp on the overall content architecture for UO community and what are some potential features that should be implemented. I also took inspiration on some similar blog-type websites and what features they offer their users.
As I previously mentioned, there's a lack of interaction from the user. Thus, by adding likes and comments, it will allow users to express how they feel about certain stories, which can aid UO in figuring out which content is the most popular. Additionally, it will give users an initative to make an account with UO.
I also made some simple wireframes to get a sense of how I wanted to organize articles, heavily thinking about newspaper layouts as an inspiration. Additionally, I wanted the top, left, and right side of the page to be interactable. I recently have seen some interesting websites with vertical text, so I tried implementing it in my redesign.
I chose bright colors to match UO's overall visual style and identity. As for the fonts, I wanted to match their branding fonts as close as possible.
SOLUTION: HOME PAGE
For the landing page, I decided to implement a couple of features:
Some key frames:
SOLUTION: STORY PAGE
I did a sample story page and experimented with some interactivity and layouts (just to add, it's also an abbreviated version of an already existing article). Here's a summary of the features I implemented:
Some key frames:
Related articles function
Here's a summary of the interactions I've created:
Here's the interactive prototype on Figma. Feel free to check it out!
Thanks for reading my design process on redesigning UO Community! This was my first UI project dealing with blog-type websites, so the experience was definitely valuable. Additionally, designing for the users (who I happen to be one) was an interesting process. I kept on asking myself: what would I and others viewing UO Community think about the overall platform and what are some areas that can be improved? Aasking myself that question over and over again helped me realize what functions were mandatory to give UO Community the spotlight it deserves.