Spek Project Overview

Spek is an online community for and by the business traveler: honest peer-to-peer reviews, helpful tips while on the road, travel-related news, opportunities for new connections, and discounted shopping. I had the wonderful opportunity to undertake an internship with Spek!

Sponsors: Ted Cullen & Mike Ivey

Duration: 20 weeks

Tools: Figma, Ionic, Trello, Google Suite, GitHub

Programming Languages: Typescript, HTML, CSS, Git

Pitch

Problem: How do we foster a community of business travelers?

Our Solution:

Design a system that consists of community features that allow users to interact, communicate, and connect with other business travelers on the Spek application.

The Start

To understand the project in its entirety, you must first learn about the beginning. When we first met with our sponsors, they came to us with a mobile application that had basic functionalities for searching, viewing, and reviewing a hotel in addition to a user profile page. However, they needed help in designing a system that would also incorporated a user feed, more enhancements and personalization to the user profile, and ways for users to connect and communicate with each other.

Initial Concept Screens

User Research

Persona

What's something exciting your business offers? Say it here. Based on the different articles and resources provided by our sponsors concerning business travel, we went identified the key goals, needs, and frustrations of our users. With this design artifact at hand, we were able to keep the user in mind when designing different solutions.

User Journey

We created a User Journey map in order to identify major touchpoints for when and how a user will be using the Spek application. We identified that the most common times a user would be using the Spek app would be:

Prior to going on a business trip
During their business trip (including when they check-in to a hotel)
After their business trip.

Based on this user journey map, we suggested 3 features to implement that would enhance the user experience of Spek.

Low Fidelity Wireframes

Based on our research and weekly meetings with our sponsors, we decided to focus on designing 3 new features that would be integrated within the Spek application to provide more of a community aspect:

User feed
User profile enhancements such as badges
Eco-footprint dashboard and calculator.

When creating these designs, we wanted to keep the wireframes as barebones as possible in order to understand the skeleton our designs would be built on top of. We started with creating the base features of what we wanted the app to have, which included the three tabs at the top as well as our navigation bar on the bottom.

Mockups and Protoypes

Now that we had an idea of what users would want, we needed to figure out how we should start designing how the application should work. To do this, we first needed to take note on how our applications needs would work with each other, and what type of user flows would be happening. To do this, we brainstormed within our team as well as with our lead software engineer in order to make sense of what tabs, features, and screens we would need for this application.

Eco Footprint

Eco footprint tutorial screens
- Introduce users to Eco Footprint features and surveys
Eco Footprint score and breakdown
- Average score is calculated based on responses to questionnaire with a breakdown of each category's significance to a user's score.
Initial iteration of questionnaire surveys
- Different categories with corresponding questions to track user's Eco activity: Travel, Shopping, Sustainability
History of previous Eco Footprint questionnaires
- Users can view their previously submitted questionnaires and view their correponding Eco score based on their responses.
Save questionnaire drafts and complete it later
- Allows users to save their progress and complete surveys later

User Feed

Post to feed
- Upload photos, reviews, articles, hotel check-ins and badge achievements
Save and edit post as draft
- Users can save their posts as drafts to edit and upload on another occasion
View articles in addition to connections' posts and activity
- The home feed consists of a variety of different posts from a user's connection with the ability to filter by categories: reviews, social, and articles.
- Articles can be shared and viewed all without navigating away from the app
Like, share, and comment on your favorite posts
- All posts are able to interacted with as well as be reported/flagged if any community guidelines are violated
Search the feed
- Users can search for connections, relevant articles, and other information that may be useful for their next business trip.
View a connection's reviews on their hotel stays

User Profile

History of user's posts
- Users can see the different types of posts that they've previously uploaded as well as their Eco Footprint score
Edit Profile Information for better connections
View list of connections and any incoming requests to connect with other users
View previously liked posts
- Access to previously liked posts
View history of reviews from previous hotel stays
Communicate with others through direct messaging
Achieve new badges to display and share with others

Implementation

The initial plan was to integrate code into the existing codebase, but we were unable to run it due to the lack of documentation

After talking with our sponsors and our professor, we figured that it would be better to not try and code out the whole application, but rather, focus on one aspect and implementing that.
- We did this because we realized there might not be enough time to properly code, develop, and test each respective segment. So instead we just focused on one.
We chose to actually implement the Eco Footprint part of the application because we felt that it was one of the most complex features, and hardest to show statically through Figma,

Final Takeaways

One of the most significant lessons I learned from this project was how big of a factor time management and project scope are to a large project. Going through the design and development process with our stakeholders and using an agile methodology really exposed my team and I to some of the practices we might encounter in our professional careers. Time management and understanding the target market and potential competitors are definitely some of the more valuable skills I learned through this project.

Click the image to view the code for the Ionic portion of this project