Date: Winter 2015
Categories: Product design, interaction design, visual design, UX wireframing, front-end web development
Spokehub is a design studio and hub based in Berlin. After going through several designers, they brought me on to finish the project of finishing their website. I ended up starting most of it from scratch, while sticking to some of the elements in the existing visual design comps.
The website functions both as a portfolio of Spokehub’s case studies and a branding document that gives viewers a sense of Spokehub’s identity. This is accomplished through several main components: case studies, a mission statement, a live feed showing Instagram and Twitter posts from members of the hub hashtagged #spokehubNOW, and a social media forum where hub members can log in, ask questions, and generate discussions with visually driven responses. Thus, this project was unique in that it was both product design, due to the social media app component, and brochure design.
The first step was generating wireframes. The client wanted the design to be innovative and experimental. I stressed the importance of keeping it navigable and straightforward at the same time.
I created a sitemap, wireframes, and user flow diagrams, mainly focusing on the login, forum posting and profile creation processes. For the full Balsamiq wireframe set, please click here.
The biggest challenge was considering every minor detail and edge case. For example, what happens when a user wants to edit or delete a question they posted? What if a user wants to change their email or password?
Initially I designed the responses section for each question to mimic a forum posting format. However, the client requested them to follow a format more similar to Pinterest. The results are shown below.
The case studies on the work (portfolio) page have sample images displayed in a slideshow format side-by-side with descriptive text. The images are swipeable on touchscreens.
The website is also fully responsive.
Careful attention was also paid to the user-facing functions of the website. Clean interface design and an intuitive user experience go together hand in hand.