Role
UI/UX Designer designing the Inaka project. A responsive web app and complimentary mobile app from conception to delivery.
Responsibilites
- UX Research, interviews & usability studies
- Creating paper and digital wireframe, low and high-fidelity prototypes
- Accounting for accessibility and iterating on designs
- UI Design decisions, branding, logo & icon design
- Front-end coding for complimentary responsive website
Project Overview
The Background
Inaka means “a rural area” or “countryside” in Japanese. In Japan, there is a growing problem with rural depopulation. Many traditional crafts and farming practices are disappearing and there are not enough people to support rural industries. Inaka is a user-friendly, bilingual platform that connects local and international volunteers with hosts in rural Japan. Tapping into the farm-stay and organic food movements, Inaka allows Hosts to post opportunities for volunteers to stay with them in exchange for their labour.
It also allows potential volunteers to view opportunities all over Japan by location, task, produce and apply for long or short-term stays. The app also supports the application process and communication between Hosts and Volunteers via the chat
function.
The Challenge
1. Create a bilingual responsive web app and dedicated mobile app which can help support rural communities in Japan by connecting hosts and volunteers
2.Hosts can post opportunities listing the type of work and stay that they are offering and what kind of help the are seeking
3. Volunteers can browse the listings by map, task, location, produce and length of stay to find their perfect match. Then apply to the listing directly through the app
4. The app allows for a smooth process of application and acceptance between hosts and volunteers via the app’s chat function
5. The app provides a space for volunteers and hosts to share images and memories from their experiences via the photo gallery
understanding the user
User Research
Initial user research identified 4 key groups who would make up the Inaka userbase:
1. Craftspeople and farmers in rural Japan looking for help to complete seasonal tasks, support their practice or looking share their way of life with a wider audience
2. International travellers or expats looking for a unique experience, a chance to see ‘the real Japan’ and make authentic connections with local people
3. Japanese living in urban areas looking to get out of the city and connect with nature or learn more about their traditional cultural practices
4. Expats and Japanese living in Japan with a strong interest in organic food, farming and traditional, low intervention means of production
User Personas
STARTING THE DESIGN
Interaction Mapping
Mapping the user interactions as a Volunteer using the mobile app
Paper prototyping
Since the app is relatively complex, I decided to do some user testing with a paper prototype to confirm the ideas laid out in the interaction map. I wanted to test the flow of the host and volunteer functions to determine what information and functionality would be needed for each screen.
Site Mapping
paper wireframes & storyboards
Digital Wireframes
One of the challenges of the Inaka project was to make Inaka available as both an app and a responsive web app to meet different user need cases.
I spent a lot of time in the early stages working on a solid UX foundation and IA (information architecture) for the app since has many moving parts. However, it was important to also wireframe out the differences necessary for the web app. As users will likely land here from a search engine and may need more detailed information on the mission of Inaka, how to apply for opportunities or become a host. So I focused on how to add this information to the design
Mobile App
responsive web app-Mobile
Lo-fi Prototype & Testing
In a moderated usability study I tested the key functions of the app- the user flow for signing up, creating profiles as a volunteer and as a host, posting an opportunity as a host, browsing and applying to opportunity as a volunteer.
Research Findings
Theme
Users were confused by the navigation and similarities between the Home Screen and the Account Page functionality
Insight
The role of the home screen and account pages should be more clearly defined so users can find what they are looking for and manage tasks easily
Theme
Users have concerns about safety and security on the app
Insight
The app needs a clear way to verify users and allow them to review their experiences to build trust and a sense of safety within the product
Theme
Users liked the idea of the group application but where confused by how to use the function
Insight
The group application process needs to be simplified and optimized for a better user experience
REFINing the Design
UI Considerations
Mockups- Mobile App
Mockups- Responsive Web App
I also created some mockups of how the design might translate in the web app version by creating mockups of the Opportunity Search Page at multiple screen sizes.
Desktop
Tablet
Mobile
high-fidelity prototype-Native App
As the Inaka app is quite complicated, for the first round of high-fidelity testing I decided to focus on the three key functions for Host users only.
This included
- Sign Up/Sign In flow
- Profile creation flow
- Opportunity positing flow
As there will be some overlap and similarities with Volunteer user processes it made sense to test and refine at this stage and troubleshoot any design and functional issues early before moving on
Coding the Design
I also wanted to learn the basics of front-end web development. I thought it would be a fun challenge and a chance to bring that alternative point of view into my design process. I think having some hands-on understanding of technical elements helped me think about potential design limitations and come up with more creative solutions. I also really wanted to be able to empathise & communicate better with developers. I think being able to see things from a different angle ultimately makes us better team players and designers.
To develop these skills I decided to build a complimentary landing page which eventually grew into a kind of promotional website for the Inaka app. I built it from scratch using what I’d learned about HTML, CSS and JavaScript.
If you’d like to see more you can visit the site or check out my repository on GitHub.
Going FORWARD
Takeaways
Designing Inaka was a fun and challenging project. My initial goal was to make Inaka function as an all-in-one application to manage the entire process in one place. This was a huge undertaking. During the early stages of designing Inaka, I attempted to wireframe every screen of the app for both Hosts and Volunteers, as well as for edge cases who might choose to have both accounts!
While working on Inaka, I read Lean UX and The Lean Startup. These two books had a big impact on my thinking and my design process. I decided to move away from trying to design the whole app frame by frame. Instead, I moved towards the idea of an MVP that could be tested with users in stages. Since Inaka has more than one user group, it was much more efficient to start with key flows for one group and troubleshoot them first. While it was important to have a clear big-picture vision, it was also important to prioritize and edit to create an efficient iteration cycle.
I needed to step back and think about which elements would bring the most value (keeping in mind that the app is in the volunteer economy). I also needed to make sure my assumptions were being continually validated. I learned that it is crucial to stay flexible and develop in stages with as much testing as possible. The goal is to reach a viable product that would work for both the user and the business with the least possible waste.
Next Steps
The initial user testing showed that the Inaka app does have great potential and could compete with existing platforms.
However, further testing is necessary to determine whether the more ambitious features such as the in-app messaging function and the photo gallery would actually add the value necessary to justify the labour & cost.
- Iterate and refine a reviews function for Hosts and Volunteers to improve safety on the app
- Test the candidate management function for Hosts
- Refine the group application function which allows Volunteers to apply to the same opportunity together as a group from their individual accounts
