GroupValet iOS app design

When it comes to the argument over the importance of creating a quality mobile experience the statistics speak for themselves:

We are living in an age where roughly 56% of people own a smart phone & 50% of mobile phone users use mobile as their primary internet source (Digitalbuzz, 2013). Over 1.2 billion people access the web from their mobile devices (Trinity Digital Marketing, 2014) and 61% of people have a better opinion of brands when they offer a good mobile experience (Latitude, 2014). So it’s no surprise when a client comes to us wanting to take full advantage of this medium, to help their own digital enterprise unlock its full potential.

Meet GroupValet; a social lifestyle site that allows group members, group captains and clubs to connect, schedule and plan their activities all in one place.

gv-1

Being able to take advantage of the site’s many features, while on the move, could play a pivotal role in increasing new sign-ups, whilst building trust and maintaining relationships with existing customers, by having an edge over direct competitors in the market. Accessibility is key, with 60% of mobile shoppers using their smartphones while in a store, and another 50% while on their way to a store (Deloitte Digital, 2014); allowing users to check schedules and arrange activities whilst on the move, could add a new dimension to the product on offer.

gv-4

1) Wireframing

As with any website, the wireframing stage was a crucial step in the visualisation of this project; allowing us time to map out the users interactions as they navigate the app and quantify any potential limitations in the scope, whilst creating a layout that at its core is easy-to-use and intuitive. Any functionality that is overlooked at this stage could prove disastrous, in terms of time, when the project moves onto design or even development.

Whilst one could argue that this is an exercise in separating the layout and structure from the design and form should follow function, in reality, particularly with pre-existing designs, that users are already familiar with, the two have an almost symbiotic relationship. Therefore, it’s also at this point in the project where I, as a designer, tend to gather most of the ideas for the visual design of the app that could be used later.

One thing the client was keen to see in this iOS app was interesting animations between steps in the interface, that would draw users in and make the transitions between sections of information more fluid. This could be a large influence on the overall structure of the site, but it was important to distinguish between which ideas would aid usability and which were simply gimmicks that, in the long term, would hinder it by delaying users. One way we facilitated these animations was by incorporating one into the specific event cards, allowing users to touch anywhere on the card itself to flip it over and reveal more information. We also decided later, on an animation to load in each individual event and the information it contains, in a clean unobtrusive manner.

When designing for mobile, space is always limited, therefore it is important to prioritise elements and establish a visual hierarchy, if one doesn’t emerge organically. Fortunately, working on this project, we already had a successful live website to use as reference and thus an already refined hierarchy to replicate. However, this also presented the dilemma of exactly how far to stray, both from this original composition and its underlying navigational structure.

2) Design

With the client happy to sign off on the wireframes and move forwards towards mocking up some of the pages of the app in more detail, the process of design could now begin.

With regards to the design of the app, there were already a number of elements that would influence and guide this project; the current logo (which must remain unchanged), one of the primary colours (a brown, slightly darker than the current orange of the website) and some of the icons, which for technical reasons could also not be changed. Typographically the current website uses “Proxima Nova” & “”Helvetica Neue”, two popular sans-serif fonts so it made sense to carry these across to the mobile app and give current users a sense of familiarity and re-enforce the fact that the two are directly related (taking advantage of the trust gained by existing users of the website wanting to try the new mobile platform).

For the rest of the colours on the site we tried to compliment the already existent colours with a palette that gave the site a fairly elegant & sophisticated but also modern feel. Hoping to appeal to the apps largely older audience.

gv-8

One of the main things we set out to achieve, was to combine current iOS app & web design trends, which the client was fond of, with their existing branding, which fortunately for us was fairly harmonious. Large fonts, thin font-weights and flat icons were all a must.

3) In conclusion…

As with the wireframing, the design process is iterative, between the designer and client, therefore communication is vital to the expedition of the ideas of both. Often important elements emerge, as the project progresses, and it is only after a series of amends that designs can take shape into something both the client and designer are happy with. All of these things are key to a successful design project.

But it doesn’t stop there, as with all designs, the user is at the centre and one of the joys of working online is the range of tools available which allow us to test how the user interacts with our work and make measured changes through a process of consistent fine tuning.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?