Client
"We know that our web user is the app user, but different."
Build an app in three days
SPA, PWA, Native? Whats the best decision in 2021 to create an mobile application out of an exiting website that has no search or filter.
My Role:
Research | Workshop | Analysis | Concepts | Presentation | Documentation
Decide how to develop
From an already existing database with "functional content", the pressure of decision, going live, scarce resources . In a quick benefit workshop I prepared, we decided to build a PWA from the existing platform beach-volleyball.de.
Looking at the current website, one quickly gets lost in the shallows of 6-7 levels of navigation, external links and duplicate links. Due to the large content management, it was first necessary to match the mobile user needs with the functions of an application of a first MVP and align them according to priority. So I created our personas:
Feature & content we should deliver first:
Articles | News | Eventplanning | Teamprofiles | Statistics | Rankings | Social Media | Livestreams
- Checks 2-4 times a day current game reports and live streams
- Wants to attend some games of his/her favorite teams with his/her team
- Wants to view pictures of favorite games and share content with the community
Sam Huston
Hobby beacher
Joey Millhausen
Beach beginner
- Checks out areas for local field sports, where a fee training is possible
- Checks performances of beloved teams in train after work
- Wants to receive notifications about starting games | game status and new articles
Feature & content we should deliver first:
Beachcourt map | Push-notification | Events | Eventprofiles | Statistics | Rankings | Feed | News
Feature & content we should deliver first:
Articles | News | Eventplanning | Teamprofiles | Statistics | Rankings | Social Media
Understand the backend
when a website is not using filter or a search
The good thing about creating a concept is that I don't have to read through all the content in detail, but can click through each page and content to review the current navigation and content logic and (perhaps) functional features that might help define some types, templates, and navigation structures for the PWA.The good news is that existing content could be reused for the PWA. It wasn't an option to take everything from the website or create a new website. We set up a logic and new IA.
1.0 Backend logic
headless CMS
Typo 3
PWA
REST APIs
Chakra UI
React
Start the first concept draft for assessments
For a quick start and development I decided to concept sustainable components and Template layouts:
Navigation website
matryoshka navigation levels
Startpage website
overloaded mixed content and 25 different links for further pages
PWA Navigation
reduced menu by needs
PWA personalized startpage concept
content fits main use cases with "realtime" feed and the last published news / articles
Newspage website
crosslinks, missing filters and search make users not find the right content
Event websites
different information formats with interruptions and mixed contents
PWA news
content supports the flow and needs | easy navigation through content by filter and search
PWA Timeplanner
Sorted by creation-month and collected in a hub | Easy to find the event
Article websites
similar contents without any templates with too long pages | no orientation
PWA articles
clustered content with ticket-upselling aspect
User-driven experience by a reduced structure
User only can enter the relevant areas and can still access the website in extra tab to go to the shop and guidelines of volleyball.
The client likes it and will develop a first MVP
During concept phase, the check in with development ables us to define this first iteration for a quick and easy release 1.0 . The PWA improves main needs for an intuitive user experience. We handed over the concept-templates to the client and they will prepare a backend that supports the PWA.
Team:
Sandy Kauer (UX | Service Designerin)
Mohammed Mayla (App Developer)
Hannes Kober (Chief Executive Officer & business Expert)