Deliver
The wireframing process began with pen and paper, noting down all the essential flows for the app features and sketching them out on post-its for ease of re-imagining the flow and making necessary quick changes. I used Adobe XD for Mid and High Fidelity Wireframes.
Usability tests, affinity mapping and preference tests were conducted in multiple iterations after design modifications. A design guideline within WCAG 3.0 framework was created to address some of the accessibility issues.
I now present to you some major parts of my work I did in this phase, in the following section.
Low Fidelity Sketches
Mid Fidelity Wireframes
Usability Test and Affinity Mapping
After designing high fidelity wireframes,
Moderated usability tests were conducted to test the 5 initial functionalities of
Schitzeljagd. I recruited participants via Slack and other networks and made a
consent form which was sent to them well in advance via email. A
test plan and
test script were also subsequently made. The functions that I then tested are as follows:
1) Sign up and payment
2) Game search
3) Chat and messaging
4) Game play
5) Game creation.
Figure: Affinity Mapping
Based on usability heuristics such as consistency, standards, user control and freedom and the observations I made during the tests, design modifications were done some of which are as shown below
Figure: Design modifications
Preference tests were also conducted against some screens, as shown below.
You can find the detailed report on my findings
here.
Design library
Based on Schnitzeljagd’s visual and aesthetic requirement, a design library and a style guide was developed which consists of all the visual components used in the app.
Figure: Design library
Accessibility Design
In order to make the app intuitive as well as accessible to everyone, I read and researched further on inclusive design and how to keep the user interfaces user friendly especially for people with disabilities.
I incorporated some of the learnings as shown below.
Figure: Accessibility Design modifications
Interaction Animations and Emotional Design
In order to provide happy experiences to users and for them to have connected with the app at an emotional level, I decided to work on making the interactions smooth and creating some feel good animations and illustrations at some specific high points and transitions. Following are some animations I designed for a transition, user onboarding and user interaction .