User Interface Design (UI)
HyperArts can work with you to create an exciting and easily understandable interface for your software or Web application. Our UI Designer, Dan Stiles, has worked with a number of companies to build intuitive and visually attractive interfaces for their products. Below is a case study for one such company, Fast Country, which demonstrates our process in developing a user interface.
Case Study: Fast Country
After developing their brand and identity, Fast Country approached us to design the user interface for their Companion product. Fast Country Companion services deliver information, entertainment, and a VIP experience to resort guests and conference attendees using handheld devices enabled with high-speed wireless connectivity.
The list of features included:
- Remote Food & Beverage ordering
- Interactive catalog of restaurants, shops, entertainment, and attractions
- Interactive reservation system for restaurants, shows, and activities
- Interactive Conference Planner to calendar activities
- Integrated and streaming media
- Weather, traffic, and other up-to- the-minute information
- Email, Web browsing, and Instant Messaging
All of this was available on a handheld device and posed quite a few challenges.
- Simplicity. The interface had to be instantly understandable, even to the non tech savvy
- Usability. Ease of use was paramount. Handhelds have no keyboards, or right and left clicks. The only user input is a single tap with the handhelds stylus. The final product had over 150 and pages, all of which had to be easily accessible (less that three clicks away) from all the other pages.
- Appealing. As a consumer facing product the interface needed to be appealing to consumers. It had to be fun and approachable, but also slick and high tech.
- Size. The screen size on a pocketPC is 240 x 320 pixels. We had about one third as much space as the average webpage in which to fit not only our content, but our navigation and branding as well.
Process:
Our first step was to map the content. How much will there be? Where will it go? How will people use it? Once we knew that we were able to begin looking at navigational paradigm and information structures. Do we need different sections? Does information slide in and out? Will the pages scroll? After going through the pros and cons we decided on what we called "the deck". Basically a series of linked static pages. We also decided to sub-divide the content into four sections, each with sub sections. The user could drill into each sub-section, or jump back to the top of any main section using a global navigation bar. This would allow them to keep from getting lost or navigating themselves "down a hole". We also included a "back" button so a user could find their way out the same way they came in, and a home button.
click image to enlarge
Once we had our navigational paradigm and information structure we were able to start "skinning" the product. A functional mock-up was built and we began experimenting with the look and feel. Icons, buttons, type styles were all carefully developed. (See images at right.)
When we had those elements locked down we were able to begin production. The mock-up was passed off to the coding team, and the design team moved into developing all the support graphics. Photography was selected, maps were drawn, input screens were developed (how do you order a custom drink with no keyboard?). Sound effects were added for various type of clicks, back, main nav, input, etc. Streaming video was integrated, as was an MP3 player.
The final product was visually stunning and remarkably easy to use. From there we were able to create custom skins and functionality for a variety of clients.
(left: The Venetian Casino & Hotel, Las Vegas)
click image to enlarge
