WesFund: W3 Wireframe

Sara Kim
Kai Labs
Published in
3 min readFeb 19, 2017

Receiving a request from Ms. Smith, Associate Director of fellowship, internship and exchanges, our team started out project of creating a new search engine that consolidates all the information on different departments regarding funding opportunities for students and recent alumni. Our client saw the inconvenience in current web services where users have to jump to the website of each department or program to find out what is available for them and there seem to be many occasions when they fail to reach to the relevant page or miss out some information due to its proliferation. What she is looking for is to make the process of finding a fund for their academic research, internship, study abroad, etc. easy and accurate by creating the database of all the information on official Wesleyan pages. She has no affiliation in its design or whether it is included into Wesleyan website, so we decided to make it outside web service that can be accessed through logging-in with Wesleyan email address.

After the interview with Kate, I started to create rough drafts of wireframe. The main purpose of our web site is to be able to look for the appropriate funding options under the condition each user set. Therefore, I made the main page real simple like this;

Search box, and three index to guide the users how they wanna start the searching. Once they set the first condition, the result will appear with more filters on the side to customise their conditions to be fulfilled. On the left corner, there will be the list of condition the user added already. And, below that, there’s filters to add more conditions such as narrow down the result with location, category, more keyword search and so on.

Right below the header, there will be ‘sort by’ section where the user can organize the searched results in a way they want to see.

The result part will change like this;

But the header, condition, filter and sort by bars won’t move throughout the whole searching process.

I am currently working on creating the lo-fi wireframe with Sketch and this.

--

--