From sketches to mock-ups
Once you have created sketches, the next step is often to create a mock-up. (For complex designs, wireframes can also be used as an intermediary step.) The mock-ups are not interactive. They simply provide an idea of what the finised product will look like, without any coding.
Creating mock-ups allow for early testing of key features. Any feedback on this stage is easy to implement. This encourage feedback that require significant changes, unlike later, when major infrastructure decisions have already been made.
Mock-ups can be created with both graphics tools like GIMP or PhotoShop, presentation tools like PowerPoint or Keynote, and dedicated tools like Axure RP or Adobe XD.
Example of redesign mock-up
Disclaimer: This website mock-up is for educational purposes only. It is not a real app. The app mock and this website are not affiliated with Helsinge Kameludlejning in any way.
Helsinge Kameludlejning (Helsinge Camel Rental) is a cat and dog boarding company. Their website has a very basic structure and design, which makes it seem quite dated.
Current website
Page structure
In re-designing the website, it is important to consider the site’s structure and purpose. Currently, the site has the following pages:
- Front page
- Boarding (inactive link)
- Dog boarding
- Dog pictures
- Cat boarding
- Cat pictures
- Directions
- Order form
- Boarding (inactive link)
As part of the re-design, this structure can be simplified:
- Front page
- Dog boarding
- Cat boarding
- Directions
- Order form
The dog and cat pictures does not add much value as seperate pages. It would be much better to use these pictures on the other pages.
Currently, information about the history of the company is located on the front page. This, combined with the red background, creates a very heavy impression. If the company owner insists on keeping the company information, this could be merged into the Directions page.
New website proposal
Overall changes
Assuming that many customers are repeat customers, it would be beneficial to add a small, online database. This database could include both the customer’s information and information about their pets.
Such a database would allow the company to easily see the history of both the customer and their pets, such as special needs and preferences. Over time, it would also allow the company to make predictions about how many animals they can expect for specific weeks.
The design has been moved to a green color palette with orange accents. This is a much more relaxing color palette, and allows specific areas to be emphasized.
Front page
The front page has been changed so that it has three elements: A generous illustration, and two calls-to-action: One to book dog boarding, and to book cat boarding.
Because they are the only orange elements, the two buttons immediately catch the eye. This enables repeat customers to quickly jump to the booking form, while new customers’ eyes will be drawn near the link with additional information.
Information page
The pages with detailed pricing, rules, and additional information naturally contain a significant amount of text. This can be broken up with images from the existing image pages, to make it easier on the eye. At the end of the page is another highly-visible call-to-action to book boarding.
Booking form
Because the functionality will include user accounts, it will be possible to pre-fill most of the information. This ensures good data quality in the database, and makes it easier for the customer to fill out the form. As the customer fills in the form, the expected price will be updated.
Additional form functionality may be added if needed, for example to allow customers to add more than one animal.
