Home page of the finished site

The goal of the UX Design program’s second project was to learn how to use Adobe XD, and to learn how to design a website with multiple screen sizes. The prompt was randomly generated, and my prompt was to create a networking site for private chefs.

It was intentionally vague, with much room for interpretation. I decided to build the site with a familiar social media design, to simplify user navigation.

I conducted user research, completed competitive audits, created information architecture, wireframed, prototyped, acted as UX writer, and iterated on all designs.

The Process

I began my research with a competitive audit, but yet I could not really find a product that matched what I understood the prompt to be. There were some collections of chef networks, but they mostly were blogs, and there are freelancing sites, like fiverr, but that is far too generalized.

So then I switched my research to the user: what kind of user could use a product like this? How beneficial could it be?

Now that I can empathize with the user, I began to ideate with paper wireframes for a responsive website.

Desktop website paper wireframe

Alternate size paper wireframes

I switched over to Adobe XD to begin my digital wireframes.

All dropdown menus with simple selections

Reminiscent to familiar social networking layout

An additional advantage to the familiar social media-style approach is the simplicity of screen size adaptability.

From there I began to work on the mockups. Added color, changed the font, created a logo*, and created all as components within Adobe XD.

As opposed to the whole website scrolling as one, I made each separate column (“My Network”, “My Network Posts”, and “Community News”) independently scrolling

A dropdown menu open is the focus of the page, so the rest of the site gets less clear and scrolling is no longer allowed

There was no date selection option upfront, which was corrected here.

For the phone website mockups, I built them for the iPhone 12 Pro, the phone I had, which made user testing easiest.

Hi-Fidelity Prototype

Click here to test out high fidelity prototype!

Takeaways

I learned much about Adobe XD, including wireframing, prototyping, creating components, sharing with developers, as well as many of Adobe XD’s shortcuts and tricks.

I also learned how to use plugins with Adobe XD, and continued to hone my skills in the iterative process.

Thank you for checking this out, and please check out my other projects!

Let’s Connect!

(520) 286-3623; text or call

crump.bryce99@gmail.com