[MUSIC]

Based on everything you know from your research,

it's time to start ideating potential solutions.

Using the problem statement worksheet and your user journey map as your guide,

begin to brainstorm some ideas by hand sketching.

This can be an individual exercise, or

you can also facilitate group sketching sessions with your product team.

All you need is some pen and paper, or any other medium you'd like to use.

When you're exploring solutions, try to go broad and

brainstorm a lot of solutions before narrowing them down.

The goal of this exercise is to explore as many ideas as possible.

Don't feel intimidated or shy about your drawing skills.

These sketches aren't meant to be really refined.

But they're meant to be quick drawings so

that you can get as many ideas as you can on paper.

Think about the UX flow, what screens you'll need, the flow of these screens and

how users are interacting with the app as you're creating these wireframes.

After going through a few rounds of sketching and

putting your ideas on paper, try to narrow down some options.

Some things that will help to narrow solution ideas

is considering technical limitations or feasibility.

This is where communicating with engineers is important.

You can also use a dot voting method, where each person on your team

votes on the ideas that they like most by putting dots or stickers on them.

Once you've narrowed down your ideas,

it's good to have two very different solution ideas, so

that you can test both of them and find out which is more successful with users.

In order to test these ideas,

we'll need to create higher fidelity mockups of our sketches.

We'll be using a software tool called Sketch.

Which you can also use by downloading a free trial version from sketchapp.com.

If you're not working on a Mac,

you can also use tools like Figma which we'll be using in our prototype later on.

Once you've downloaded Sketch, open a file called Craigslist,

which is provided in the project files.

If you're using Figma, you can simply import the Sketch file and it should work.

In the Sketch file, there will be a page in the left side bar called Assets.

These are some brand and

UI elements provided to help you get started with your mockups.

Under the Template page,

you'll see a template that you can use to help you get started.

When you're starting a new project,

it's helpful to start by setting up a grid or a layout.

Go to the View menu and under Canvas select Layout Settings.

You can set the number of columns and rows, as well as the gutters,

which is the space in between.

Once you've set up your grid, you can turn the grid on or

off at any time by pressing the Ctrl key and L.

Now let's' take your hand sketches and

begin creating a mockup, one screen at a time.

Don't worry too much about getting everything right the first time,

in terms of the UI elements and visual design.

Sketch provides standard iOS elements under the Insert menu,

which you can use instead of creating them yourself.

Then start thinking about the UI elements for this screen, by referring back to your

hand sketches and start creating those elements on the screen.

You can use the UI elements provided in the file or feel free to create your own.

Drag and drop icons, whether they're SVGs, PNGs, or

Illustrator files, into your art board.

You can also add text and use the inspector on the right to change size,

color, justification, fonts and so on.

Think about how to translate Craigslist brand to the app interface.

What are some colors, shapes, imagery, or illustrations you can use?

How can typography, space and layouts enhance the usability and

the aesthetic appeal of the app?

One of the things from talking to users,

was that while Craigslist users want a more visually appealing UI, they also like

the familiarity of the Craigslist brand, which hasn't changed for so many years.

And there's a sense of charm that shouldn't be lost by

over-designing the app.

For this mockup, I tried to make the home screen more visually appealing while

using Craigslist brand colors and making sure that it still feels like Craigslist.

As I was thinking about how to increase the feeling of trust and safety for

users, one idea was to bring the existing safety tips that are currently buried on

the website, more to the forefront, while the user experiences the app.

What if users saw these safety tips at the beginning of the app,

before they start using the app?

On the categories page, I wanted to see what it would look

like if we added icons to represent all the categories.

Does it enhance the browsing experience for

users, does it bring more pleasure to users, or is it more confusing?

Does it still feel simple and straight forward?

And lastly, on the search results page, I was thinking of some ways to make it

easy and less overwhelming for users to discover and browse the post.

Perhaps by having larger images and more space between the thumbnails.

Especially considering the size of the mobile screen.

You don't wanna cramp any small thumbnails and make it feel overwhelming to users.