As an assignment for the User-Centered Design for Web and Mobile Interfaces course at California State University, Fullerton, students were prompted to design maps and wireframes for a fictional client who is opening a string of gym locations, named "Peak Fitness". The overall objective for the assignment was to produce deliverable maps and wireframes for both desktop and mobile interfaces, iterating on our designs given feedback from our instructor as well as our peers. We accomplished our goal through demographic research, competitive analysis, and rapid prototyping.
Once provided with the assignment prompt, our team collaborated online to determine the specific needs of the client, and potential solutions that could be implemented to meet those needs. We conducted our brainstorming through an online affinity diagramming tool, stormboard.com.
Through this brainstorming process, the team was able to generate ideas for:
The goals and primary channels of profit for the client.
Tools and information that the website can feature in meeting those goals, including those specific to the mobile or desktop site.
The target demographic and personas for potential customer bases.
Given the ideas generated from the above brainstorming sessions, our team developed site maps for the client website; one specific to a desktop format, and one specific to mobile. During the development of these maps, the team focused on constructing a site that had a clear and easy to follow hierarchy that minimizes confusion for visitors to the site.
While mapping out this site, we aimed to minimize the number of organizational levels that users would need to navigate through in order to locate their desired information. We also opted to reserve space on each web page for a set of "Call To Action" (or "quick access") buttons, which would offer quick access to commonly used pages for the average user. In the above map for mobile users, for example, we reserved space for 3 buttons that a mobile user may access most frequently: "Member Log-In" for account management, "Locations" for location-specific information, and "Contact Us" for general company contact information.
Upon finalizing our site maps for both desktop and mobile formats, the team continued onto drafting wireframes for the client, ensuring our layouts accurately reflected our site maps and met the targeted needs of the user and the client. We conducted thorough research into the design methodologies of potential competitors and began sketching our own layouts, using draw.io as a collaborative drawing tool.
Desktop Wireframe
Mobile Wireframe