Interface Design Wireframe and Storyboard - Avery GYM

May 17, 20226 min read

Part I: Home Page Research

The Home page URL of the website like Avery Fitness I found online was https://bluemoonfitness.com/, here is a screenshot of the home page (see Figure 1):

Figure 1: Screenshot of Home Page of Blue Moon fitness

Analysis of Home Page of Blue Moon Fitness

Figure 1 screenshot shows the Home Page of Blue Moon Fitness Website, on the upper left corner, you can see the Logo of Blue Moon Fitness. It shows that Blue Moon Fitness has been in business for 30 years. There is a simple business statement under the logo in the center of the Homepage written “YOU ARE NOT ALONE”, this powerful statement gives customers comfort, which means Blue Moon

Fitness will stand with you. This makes the visitors want to explore more about this company. There are standards of cleanliness and Safety Precautions showing a video of What to Expect at Blue Moon Fitness center during the Covid-19 time. You can click the video watching how Blue Moon Fitness Practices Standards of Cleanliness and Safety Precautions during this critical time (Figure 2). The idea of video presentation is a powerful tool to persuade the clients to come to the Fitness center. It explains how to practice the Standard of Precautions and how Blue Moon Fitness Center do to make sure the client is safe, for example, it requires every member must be scanned before going to the club, and everyone has to wear mask and keep 6 feet of social distance, the capacity is 50% increase and there is 60 – minute time limit for each member who stays inside the Fitness center, this practice helps to ease the anxiety of the clients.

Figure 2: About Us – Standards of Cleanliness and Safety Precautions

Organization and Design

Blue Moon Fitness has been in business for over 31 years with six locations in four different locations. It describes itself as “Blue Moon Fitness is more than a value gym”. Blue Moon Fitness features nine fitness programs. The Blue Moon Fitness web page gives the visitor several different types of user interface and different navigation menus to enhance the visit. The home page layout has menu tabs (see Figure 1) at the top right side. The home page has a video that gives a tour of the fitness center with different areas to illustrate the different programs (see Figure 3& 4). The video seems to be highly informative. When touring the different fitness stations, a visitor can pause the video. The link of the video <https://bluemoonfitness.com/styku-body-scan/. > This allows the visitor to view the different fitness programs in detail. There is little white space with the focus on the fitness themes.

Figure 3: Gallery of Fitness Center

Figure 4: Blue Moon Fitness Virtual Fitness Programs

Branding and Communication

The main color of Blue Moon Fitness is naturally “blue” but there are other contrasting colors that guides the visitor to the different programs and information. There is the use of yellow, pink, and the main color of blue (See Figure 5 and Figure 6). Different colors will send different messages to the visitors, the choice of blue as main color scheme of Blue Moon Fitness fits with the color of logo, white, black gray are chosen for text, neutral color is like the white space which gives visitors a break and gives them time to process and prioritize data on the page. Primary color blue was used on the button side bar to attract users’ attention and encourage them to act such as join the club or take a tour. Secondary colors yellow or pink are used to highlight the less important information on the website such as secondary buttons, Free 3 months memberships. (See Figure 6) Neutral colors such as white, gray black are used for text and background which helps to cool down the eyes and make them refocus on other information.

The pick of primary blue is a great choice, since blue is described in psychology as calm and serene. Blue calls to mind feelings of calmness, which is peaceful, secure, and orderly. Blue is only used in offices decoration since research proved that “people are more productive in blue rooms” (Cherry, 2020).

Figure 5: Blue Moon Home Page

Figure 6: Blue Moon Membership Sign up

In About Us Page, there is label See It For Yourself on the upper left corner under the Blue Moon’s logo, when you clicked on that See It For Yourself, it brought you to a screen to take a tour today, you can select the club location, and then fill out your name, phone no, and email address to request tour (see Figure 7 & Figure 8)

Figure 7: About Us Blue Moon

Figure8: Blue Moon About Us Page – Take a Tour

Blue Moon focuses on building its brand, it is voted as the Best of Omaha for over 25 years. You can see that there is the Best of Omaha Reward displaying on the website. (See figure 9)

Figure 9: Blue Moon Fitness Voted – the Best of Omaha for over 25 Years

In About Us Page, it lists What Makes Us Different showing why Blue Moon Fitness is different from other fitness center since it opens 365 days a year; it offers free 3 months memberships. The clients can compare all these with other fitness center and decide whether they want to join the club or not. (See Figure 10) <https://bluemoonfitness.com/amenities/>

Figure 10: Blue Moon Fitness – About Us-What Makes Us Different

Overall, Blue Moon Fitness Website did a great job on the choices of colors which uses the neutral colors for text and background. The primary blue color on the website brings the feelings of trust and safety to the clients. The layout of the website is clean and simple, the different types of user interface and navigation menus enhance the visit. The video presentation brings pleasant experiences to the visitors. The design of the Blue Moon Fitness website is a great success.

Part II: Original Diagram

My design of website wireframe for Avery GYM will contain the information design, navigation design, and interface design. Information design will be arranged logically so that users can get clear guidance on what to do and what they can expect. The elements in information design will have body content, share buttons, contact information, headers, footers, and so on.

Navigation design will be the navigation system of a website which will enable users to move among pages easily and rapidly using easy commands. Avery GYM website’s navigation design will include several navigation systems, such as global, local, background. The rules on website navigation menu design will be strictly followed to ensure the best user experience, which includes keeping the menu text simple and clear; keeping navigation design short and focused; keeping the navigation mode consistent; making sure all navigation elements clickable; making navigation easy to use and easy to find. Navigation design will tell the users Avery’s location, provide access to information about Avery Gym’s brand.

Main area for home page contents will include logo, search field, headers, page title, navigation systems, global navigation and local navigation, map, body content, share buttons. Main feature and purpose of the website. Main feature and purpose of the website is to help Avery Gym to create individualized training and experiences, assist Avery to sell its brand to the customers, and extend its business. The navigation and purpose on the wireframe is to help the clients find Avery, wireframe will display Avery’s highest priority content clearly, drive users to signup for the class, and help them find what they need. I will keep wireframes design simple and stick to basic shapes and natural color palette by using only the structure of my wireframe.

Logo, buttons, pictures, text, and drop-down menus will be provided to users as basic visual elements in the interface design in Avery Wireframe. For the use of the color, I will use the 60-30-10 rule, 60% main color, 30% secondary color and 10% accent color. White will be used as primary color, red will be secondary color, and green yellow (Hex Color #adff2) will be used for accent color. Neutral color white or gray black will be used as text, white will be used as primary color, red as secondary color, and yellow green as accent color. The use of whitespace. Neutral color white or gray black will be used as text, white will be used as primary color, red as secondary color, and yellow green as accent color. Logo will be placed on the upper left corner. A rationale for their proposed layout is to attract customers and give them the information of the Avery Gym Center.

Here is the screenshot of the original wireframe diagram designed for Avery GYM Fitness Center (Figure 11) White space will be used to highlight See Our Popular Class and Join A Club, it will be in yellow green highlight, emphasizing the importance of joining a club or taking class.