RoastPATH - Community Forums & User Portfolios

Website UI Redesign

PHASE 1: Research + Analysis

Competitor Analysis

Forums are somewhat unique compared to other types of internet sites in that they’re not all that different from each other even if their topics are completely different. Because I wasn’t trying to invent a wholly unique solution, I decided that conducting a competitor analysis would be the best place to begin.

• I looked at a number of websites and social media groups that discuss coffee as well as several forums dedicated to my own interests such as video games and the Figma forums

• I collected screenshots of these pages and assembled them as a collage in Miro

• I redlined all the images and added notes about what features I felt were strong and what features I felt didn’t need to be included.

Why a Forum?

The most essential and basic thing to ask when redesigning a site like this is “why would people use this?” After completing my analysis and speaking with the developer of the forums website I decided on 9 reasons to use a forum.

Simply creating this note helped me really see the full picture of what was required. What this all essentially boils down to is that a forum requires interaction and enabling that interaction is key to this design.

User Profiles

As another component of the forums, I also looked at user profiles and how users were able to edit them. As RoastPATH grows, the goal is to make the forums a more social place and enable people to showcase their identity and really feature their experience as a coffee roasting professional. This includes a breakdown of what they are roasting, trophies they’ve earned using the app, as well as the typical profile staples such as where they are and who they are. Additionally, the profiles would allow users to make roasts public and share ideas amongst each other.

PHASE: 3 Ideation

PHASE 4: Prototyping

Desktop Prototype Sketches

I sketched out the three primary layers to the forums website: Home Page, Topic Overview Page, and A Post Page. I also sketched out the way that comments are created and how a hamburger menu could enable users to jump to different topics without returning to the home page.

Topic Page Revision

After a stakeholder review, I went back to the topic page and made some revisions to my initial design. The new iteration was less cluttered and easier to understand.

Ideally, I would like to implement a continuous scrolling feature, but, unfortunately, the developer for this project said that would be difficult to do. I settled on having a page selection option instead.

The original design featured breadcrumbs in the upper left corner. I decided to forgo these in favor of a home icon as that icon is ubiquitous enough to be understood by most people.

I made sure to show the updates to RoastPATH on both the home screen as well as the topic page so users can easily find information on how the app has changed.

Profile Sketch

In addition to the forums pages, I also sketched out a possible design for the profile page.

Many roasters will use social media websites such as Instagram, YouTube, and TikTok to showcase their roasting so I included links for those as well as a list of badges the user earned by using RoastPATH’s roasting software.

I would need to revisit this design later and work on the backend of how this page is edited by the user.

Similar to LinkedIn, another type of profile page would be created for businesses who use RoastPATH.

These portfolios lead to other required screens

• Organization pages that detail a coffee roasting or coffee affiliated establishment in a similar way to the user profiles.

• Edit pages where each piece of information would be accessed and edited.

• A way for users to hide modules on their profile screen

• UI for achievements (Badges) and a way to see a users forum activity

Thumbnail Images

I really wanted to incorporate illustrations as thumbnail images for the forums website. I didn’t know what type of images would work best for this, but I did some research into what sorts of styles are being used in other forms and how they are being implemented. I also considered using photos instead so I included some of those. I assembled my findings into a Miro board so I could get an overview of my options at a glance.

Low Fidelity Desktop Wireframes

I was now ready to start building digital wireframes in Figma. My favorite aspect of this design is the header image with the logo contained in a color block. I had been looking for a way to create a color scheme that was more consistent with the app rather than having an red-orange header for one and a blue header for the other.

Mid Fidelity Mobile Wireframes

I believe the best practice would focus on a mobile version first. However, I was going to be programming the HTML and CSS for this site and decided to create the desktop version first since that’s where I was going to begin my design.

You can see I added user profile icons to posts within the topic overview pages. This decision was made to better represent how active any given conversion has been and so users can see at a glance who’s discussing what topics.

(For whatever reason, I didn’t create my Mid Fi forum designs with the iPhone X notch, but I did with the profile pages so I had to use two different phone mockups to showcase these designs)

Mobile Profile Layout

Due to the limited real estate of the mobile profile layout, I decided to make the About, Trophies, and Stats sections all appear as tabs in this view. Initially, I hoped to have alerts, search, and a nav menu in the bottom to make it easier for users to access them, but this was going to be difficult to realize within our time constraints.

PHASE: 4 Interaction Design

High Fidelity Desktop Wireframes

I really enjoy pulling together the final design. Creating and adding the thumbnail illustrations was an especially fun part of this project. I found some illustrated icon images that Mill City Roasters used for their Instagram page which I modified and added to with my own icon designs.

High Fidelity Mobile Wireframes

Edit Screens

The profile page wasn’t complete with just UI for what the visiting user will see, the project also required me to build out the edit screens for how the user manages their profile pages on the backend. These are the wireframes for that design.

Phase 5: Bootstrap, CSS + HTML, + Revisions

Handoff to Development

For the next phase of this project, I programmed the layout using Bootstrap 4. The developer for RoastPATH then up all the necessary background functionality. During the development process there were a number of revisions required to improve the experience. We had roadblocks in the form of stakeholder requests and issues during the testing process that required quick revisions

More Edit Screens + More Edit Screens

The biggest revisions required were changes to the way the user edits a portfolio or an organization they manage as well. We also needed to revamp the way personal information is edited

There’s a fair amount of back end information that needed to be handle on the RoastPATH Portal. The public information is handled elsewhere. These are the final designs where the user edits their account’s details and preferences.

My first designs required the user to move to a different page in order to edit their personal page, but, through some testing, it was decided that the experience shouldn’t take the user away from their screen quite as much and many of those editing options became available to the user without needing to navigate away. It would still require the user to edit their bio and picture on a separate page, but modules on their page could be hidden while looking at their page.

The whole edit wireframe map needed to be revised in order to accommodate these changes. I created more pages for the image upload and achievements overview.

Next Steps

For the Community Forum the next wireframes will be for a user feed, similar to Facebook or Reddit, that will give users a real-time look at conversations happening about RoastPATH and coffee in general.

Thank you for reading!

More Case Studies