5 Day Design Sprint: Mobile app UI design process

One of the best ways to encourage more women in leadership roles is to start at the grass roots level and give young girls strong female role models to look up to. The #DisneyGirlBoss series rewrites traditional “princess in distress” stories to ones of strong, entrepreneurial women, and hopes to inspire young girls to look beyond the traditional roles assigned to women. The series uses hypothetical scenarios with specific problems that are solved using a variety of design solutions from branding to digital proof of concepts.

This app prototype was developed for a scenario in which Princess Jasmine aims to educate people about tigers, an endangered species under constant threat from various human activities. Being one of many in a series, a 5 day Design Sprint process was acknowledged to be the right choice to guide the design process.

If you are unfamiliar with the 5 day Design Sprint process, it is exactly as its name describes: a rapid “sprint” aimed and creating and testing a prototype to identify problems and guide next steps. The design sprint process has a number of key business benefits, however, my inclination to this agile method is due to the ability to use the process to prioritize tasks and effectively manage time.

Here’s a breakdown of the design process as described in the Sprint Guide:

Setting the scene

The challenge was to create and test a prototype for a charity app aimed at increasing awareness about tigers. Being a self initiated, individual project, I was both the Decider and Facilitator.

Monday

The goal was to create and test a clickable prototype that features the key attributes of a charity app, such as; an information page, a sign up form and a shop page for merchandise.

As this was a project for a hypothetical scenario, user research was not conducted. However, two user assumptions were made:

  • Users are environmentally conscious and/or are animal lovers
  • Users are mostly young people aged 16–26

Non-profit apps and website were researched to identify the general expectations of a charity app and implement user familiarity within the design. This provided a good background to inform the ideation phase and wireframing process

Tuesday

Three users were recruited to avoid any delays in testing later in the week. This was followed by development of a mood board to inspire the visual language of the prototype.

Wednesday

Wireframes were refined and the best solution was selected for the next stage of the process. A UI style guide was developed based on inspiration from the mood board.

Thursday

Adobe XD was used to design the final screens. Photographs were sourced from Pexels and Pixbay. Product illustrations were sourced from Freepik.

User interactions were mapped and the clickable prototype was developed.

Friday

The link to the clickable prototype was sent to the three recruited users for testing. Key feedback points from the testing:

  • The ability to swap between single column, 2-column and 3-columns views received positive response.
  • The inclusion of the Disney illustration of Rajah seemed out of place with the rest of the design.
  • Although navigation seems clear, a drop down menu with all tile links ( i.e. Adopt, Donate, Fundraise, Volunteer etc)may be better.

Future Direction

Users gave positive feedback about the visual appeal of the prototype, including the use of color and imagery. A second version with a refined navigation would help solve potential usability issues.